Composer Workshop
The Big Idea
This is a high-velocity, “vibe coding” sprint for eGain Solve ’26. Participants will build a React-based advisor in Google AI Studio that uses the Model Context Protocol (MCP) to fetch live mortgage rules from the eGain Knowledge Hub.
In 90 minutes, you go from a blank screen to a deployed, compliance-verified mortgage advisor — grounded in real knowledge, not AI guesswork. Every answer is traceable to an approved source article, complete with an audit trail.
Preparation
| Tool | Google AI Studio (set to Build Mode) |
| Secrets | Pre-load EGAIN_API_KEY and EGAIN_PORTAL_ID in the Settings > Secrets tab |
| Knowledge Base | Ensure the eGain folder “UK Mortgage Compliance 2026” is populated with articles |
The Workshop Timeline
| Phase | Time | Action |
|---|---|---|
| Stage 1: The Blueprint | 0–15m | Initialize the React environment and the “London Finance” UI. |
| Stage 2: Logic & Math | 15–40m | Build the mortgage inputs (LTV, Income) and calculation logic. |
| Stage 3: The MCP Bridge | 40–60m | Connect the eGain MCP server to fetch real-time rules. |
| Stage 4: Compliance & Deploy | 60–90m | Add the “Verified” badge, audit logs, and hit Publish. |
The Copy/Paste Prompt Sequence
1. The Foundation
“Enter Build Mode. Create a React dashboard for a ‘Compliance Shield’ mortgage advisor. Use a professional aesthetic with Slate and Navy tones. Include a main form with fields for ‘Property Value (£)’, ‘Deposit (£)’, ‘Annual Income’, and ‘Employment Status’. Use Tailwind CSS for styling.”
2. The Calculation Layer
“Add logic to calculate the Loan-to-Value (LTV) percentage automatically as the user types. Add a large ‘Verify Compliance’ button that triggers a loading state. Include a sidebar titled ‘Real-time Audit Trail’ to log application events.”
3. The eGain MCP Connection
“Install the @egain/egain-mcp-server package. Configure the ‘Verify’ button to call the eGain search tool. It should query the ‘UK Mortgage Compliance 2026’ folder using the applicant’s ‘Employment Status’ and ‘LTV’ as keywords. Open the developer console and log the full MCP request and response for transparency.”
4. The Grounding Logic
“Act as a strict Compliance Officer. Use the AI to compare the form data against the text returned from the eGain Knowledge Hub. If the applicant meets the criteria in the document, show a green ‘Certified’ badge. If not, show a red ‘Policy Breach’ alert and quote the specific rule from the article.”
5. The Audit Trail
“Beneath every result, display the eGain Article ID and the ‘Last Modified’ date from the metadata. Add a toggle switch called ‘View Raw Handshake’ that, when enabled, shows the JSON response from the eGain API in a code block.”
6. Deployment
“Finalise the app for deployment. Ensure it includes a footer regarding GDPR data handling. Add a ‘Download Audit’ button that saves the decision and the eGain source article reference to a local text file. Hit Publish.”
Technical “Nerdy” Checks
| Check | What to Do |
|---|---|
| Handshake Verification | Open the browser’s Network Tab. When the button is clicked, look for the mcp_call or egain_search payload to verify the bridge is active. |
| Schema Check | If the AI struggles with the search, check the egain-mcp-config.json in the file explorer to ensure the endpoint mapping matches your portal’s region. |
| Zero-Shot Enforcement | If the AI tries to guess a rule, prompt it: “Do not provide an answer unless it is explicitly found in the retrieved eGain JSON. If no match is found, return ‘No internal policy found — refer to human underwriter’.” |
