mcp-ui brings interactive web components to the Model Context Protocol (MCP). Deliver rich, dynamic UI resources directly from your MCP server to be rendered by the client. Take AI interaction to the next level! This project is an experimental community playground for MCP UI ideas. Expect rapid iteration and enhancements! mcp-ui is a TypeScript SDK comprising two packages: @mcp-ui/server: Utilities to generate HtmlResourceBlock objects on your MCP server. @mcp-ui/client: UI components (e.g., ) to render those blocks in the browser and handle their events. North star - Enable servers to deliver rich, interactive UIs with ergonomic APIs. Allow any host to support UI with its own look-and-feel. Eliminate security concerns (limit/remove local code execution). HtmlResource: The primary payload exchanged between the server and the client. uri: Unique identifier for caching and routing ui://… — UI resources (rendering method determined by mimeType). mimeType: text/html for HTML content (iframe srcDoc), text/uri-list for URL content (iframe src). The component accepts the following props: resource: The resource object from an MCP message. onUiAction: A callback function to handle events from the resource. supportedContentTypes: (Optional) An array of content types to allow. Can include rawHtml and/or externalUrl. If omitted, all supported types are rendered. This is useful for restricting content types due to capability or security considerations. style: (Optional) Custom styles for the iframe. iframeProps: (Optional) Custom iframe props. The HTML method is limited, and the external app method isnt secure enough for untrusted sites. We need a better method. Were exploring web components and remote-dom as alternatives that can allow the servers to render their components with the hosts look-and-feel without local code execution. UI Action: UI blocks must be able to interact with the agent. In mcp-ui, this is done by hooking into events sent from the UI block and reacting to them in the host. For example, an HTML may trigger a tool call when a button is clicked by sending an event which will be caught handled by the client. Installation: # using npm npm install @mcp-ui/server @mcp-ui/client # or pnpm pnpm add @mcp-ui/server @mcp-ui/client # or yarn yarn add
