MCP UI

Add the MCP-UI server library to your existing MCP server project. The package provides helpers for creating UI resources that can be returned from your tool handlers.

npm install @mcp-ui/server

If you are building an MCP host or client application that needs to render tool UIs, also install the client rendering package.

npm install @mcp-ui/client

Use createUIResource to generate an MCP-UI resource object. Set the uri using the ui:// scheme, specify a mimeType of text/html;profile=mcp-app, and provide content as rawHtml, externalUrl, or remoteDom.

import { createUIResource } from '@mcp-ui/server';

const widgetUI = await createUIResource({
  uri: 'ui://my-server/widget',
  content: { type: 'rawHtml', htmlString: '<h1>Hello from MCP-UI</h1>' },
  encoding: 'text',
});

Use registerAppTool to wire up a tool to its UI resource. The resourceUri in the tool's _meta links the tool result to the correct UI resource that the host will render.

import { registerAppTool } from '@mcp-ui/server';

registerAppTool(server, {
  name: 'show_widget',
  description: 'Renders a widget UI',
  inputSchema: { type: 'object', properties: {} },
  handler: async () => ({ _meta: { ui: { resourceUri: 'ui://my-server/widget' } } }),
});

Use registerAppResource so the host can fetch the UI content when rendering a tool result. This handler is called by the MCP client whenever the linked resourceUri is requested.

import { registerAppResource } from '@mcp-ui/server';

registerAppResource(server, 'ui://my-server/widget', async () => widgetUI);

In an MCP host application built with React, use the AppRenderer component from @mcp-ui/client to automatically render tool UIs returned from the server.

import { AppRenderer } from '@mcp-ui/client';

<AppRenderer toolResult={result} client={mcpClient} />