MCP Ui Kit

MCP UI套件

为MCP工具构建交互式React UI。

这 模型上下文协议（MCP） 使AI助手能够与外部工具进行交互。 mcp用户界面套件 简化了构建直接在AI聊天中呈现的丰富UI组件：

• 按需捆绑 --编写React组件，在调用工具时自动捆绑
• 零配置 --没有webpack/vite设置，只是 createUI() 并指向您的 .tsx 文件
• 来自服务器的道具 --通过以下方式将数据从MCP工具直接传递给React useProps()
• 双向通信 --组件可以 sendPrompt() AI或 callTool() 调用其他MCP工具

MCP UI检查器 --基于 @mcp用户界面/服务器

安装

npm install mcp-ui-kit @modelcontextprotocol/sdk

服务器使用情况

import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';
import { createUI } from 'mcp-ui-kit/server';

const server = new McpServer({ name: 'my-server', version: '1.0.0' });

const dashboardUI = createUI('my-dashboard', import.meta.resolve('./Dashboard.tsx'));

server.registerTool(
  'dashboard',
  { description: 'Interactive dashboard', _meta: dashboardUI.meta },
  async () => ({
    content: [
      { type: 'text', text: 'Dashboard loaded' },
      await dashboardUI.component({ props: { title: 'Hello' }, frameSize: ['700px', '500px'] })
    ]
  })
);

使用输入模式

import { z } from 'zod';
import { createUI } from 'mcp-ui-kit/server';

const stockUI = createUI('stocks', import.meta.resolve('./StockDashboard.tsx'));

server.registerTool(
  'stock_portfolio',
  {
    description: 'View stock portfolio',
    _meta: stockUI.meta,
    inputSchema: {
      symbols: z.array(z.string()).default(['AAPL', 'GOOGL']),
      timeframe: z.enum(['1D', '1W', '1M', '1Y']).default('1M'),
    },
  },
  async ({ symbols, timeframe }) => ({
    content: [
      { type: 'text', text: `Showing ${symbols.join(', ')} for ${timeframe}` },
      await stockUI.component({ props: { symbols, timeframe } })
    ]
  })
);

客户端使用情况

文件传递给 createUI() 必须将组件渲染到 #root 元素：

// StockDashboard.tsx
import { createRoot } from 'react-dom/client';
import { sendPrompt, callTool, useProps } from 'mcp-ui-kit/ui';

function StockDashboard() {
  const { symbols, timeframe } = useProps({ symbols: ['AAPL'], timeframe: '1M' });

  return (
    

      
Stock Portfolio ({timeframe})

      {symbols.map(symbol => (
        

          {symbol}
           sendPrompt(`Analyze ${symbol} over ${timeframe}`)}>
            Analyze
          
           callTool('get_stock_price', { symbol })}>
            Refresh
          
        

      ))}
    

  );
}

// Render to DOM
createRoot(document.getElementById('root')!).render();

API

服务器(mcp-ui-kit/server)

createUI(name, componentPath) --创建UI组件

• componentPath：通往a的道路 .tsx 渲染到的文件 #root
• 退货 { meta, component(opts?) }
• opts.props：数据通过以下方式传递到React组件 useProps()
• opts.frameSize: [width, height] 例如 ['700px', '500px']

createUI('dashboard', import.meta.resolve('./Dashboard.tsx'));  // ESM
createUI('dashboard', require.resolve('./Dashboard.tsx'));       // CommonJS

UI(mcp-ui-kit/ui)

• useProps(defaults) --获取从服务器传递的道具
• sendPrompt(message) --向AI聊天室发送消息
• callTool(name, params) --调用MCP工具
• resizeToContent(element?) --请求家长调整iframe的大小以适应内容
• useResizeToContent() --内容大小更改时自动通知父级的钩子

import { useResizeToContent } from 'mcp-ui-kit/ui';

function MyComponent() {
  const containerRef = useResizeToContent();
  
  return (
    

      {/* Content that may change size */}
    

  );
}

发展

npm install
npm run dev:all  # Start demo server + inspector