MCP UI Components Tool
Renders interactive HTML components that display inside the chat interface. Uses a template system with versioned templates for emails, tickets, demos, and more.
- Tech: TypeScript, MCP SDK, React + Vite (for building template bundles)
- Port: 3004
Tools
| Tool | Description |
|---|---|
ui_render | Render any registered template with data |
ui_list_templates | List all available templates |
ui_demo_interactive | Render an interactive demo component |
show_weather | Render a weather widget (fetches from OpenWeatherMap) |
show_last_email | Render last email viewer (mock Outlook data) |
ui_render
Renders a template by ID with provided data.
Input:
| Field | Type | Required | Description |
|---|---|---|---|
| templateId | string | Yes | Template identifier (e.g., email/compose@v1) |
| data | object | Yes | Data to populate the template |
Available Templates
| Template ID | Description |
|---|---|
email/compose@v1 | Email composition form |
email/sent@v1 | Email sent confirmation |
tickets/list@v1 | Ticket list display |
demo/interactive@v1 | Interactive demo component |
common/error@v1 | Error display |
common/people-list@v1 | People list display |
UI Actions
Templates can emit actions via postMessage that route back through the system:
| Action Type | Description |
|---|---|
tool | Trigger another MCP tool call |
prompt | Send a prompt back to the LLM |
link | Open an external URL |
notify | Show a notification |
Example Flow (Email Compose)
User asks to compose an email
--> LLM calls ui_render with email/compose@v1 template
--> HTML form rendered in chat interface
--> User fills in and clicks Send
--> postMessage action triggers Outlook MCP tool
--> Email sent via Microsoft Graph API
--> ui_render shows email/sent@v1 confirmation
Rendering
Templates are built as React + Vite apps, compiled to self-contained HTML bundles. They render inside sandboxed iframes in the chat interface. Communication between the iframe and the host is done via postMessage.