[MCP] Simple MCP UI

 MCP UI enables servers to send rich, interactive user interfaces along with their responses, transforming AI chat from text-only interactions into visually engaging experiences. Instead of just returning plain text, your MCP server can now provide HTML content that clients can render as actual UI components.

This capability opens up entirely new possibilities for AI applications. Instead of describing a chart or form, you can actually show one. Instead of listing data in text format, you can present it in a beautiful, interactive interface.

Example:

import { createUIResource } from '@mcp-ui/server'// Create a UI resource with raw HTML
const resource = await createUIResource({uri: 'ui://weather-card/lagos-nigeria',content: {type: 'rawHtml',htmlString: `<div style="padding: 20px; border: 1px solid #ccc; border-radius: 8px; background: linear-gradient(135deg, #74b9ff, #0984e3); color: white;"><h1>Lagos, Nigeria</h1><p>85°F - Partly Cloudy</p><p>Humidity: 78% | Wind: 12 mph</p></div>`,},encoding: 'text',
})

The createUIResource function is the foundation of MCP UI. It takes your HTML content and packages it into a format that MCP clients can understand and render. The uri parameter creates a unique identifier for your UI resource, while the content specifies what type of UI you're providing.

 

Here's how this works in practice. When an AI assistant needs to show weather information, instead of returning plain text like "Lagos, Nigeria: 85°F, Partly Cloudy, Humidity: 78%", it can return a UI resource that renders as an actual visual weather card with proper styling and structure.

The MCP UI specification defines several content types, but we'll start with the simplest: rawHtml. This allows you to send any HTML string that will be rendered directly by the client. This is perfect for static content, simple layouts, and getting started with UI in MCP.

 

From the MCP UI documentation: Raw HTML content is delivered as text/html MIME type and can include any valid HTML markup, making it ideal for simple UI components and static content display.

• 📜 MCP UI Server Documentation

 

Code:

查看代码

	agent.server.registerTool('view_tag',{title: 'View Tag',description: 'View a tag by ID visually',annotations: {readOnlyHint: true,openWorldHint: false,} satisfies ToolAnnotations,inputSchema: tagIdSchema,},async ({ id }) => {const tag = await agent.db.getTag(id)const html = tag? `<div><h1>${tag.name}</h1><p>${tag.description}</p></div>`: `<div>Tag "${id}" not found</div>`return {content: [await createUIResource({uri: `ui://view-tag/${id}`,content: {type: 'rawHtml',htmlString: html,},encoding: 'text',}),],}},)