AI导哈

React UI开发工具包

MCP UI Kit是一个简化构建交互式React UI组件的工具包，专为MCP工具设计，支持AI聊天中的直接渲染。

  • by fredjens
  • TypeScript
  • 本地部署
  • 7 星标
  • 更新于
在 GitHub 查看 fredjens/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 (
    <div>
      <h1>Stock Portfolio ({timeframe})</h1>
      {symbols.map(symbol => (
        <div key={symbol}>
          <span>{symbol}</span>
          <button onClick={() => sendPrompt(`Analyze ${symbol} over ${timeframe}`)}>
            Analyze
          </button>
          <button onClick={() => callTool('get_stock_price', { symbol })}>
            Refresh
          </button>
        </div>
      ))}
    </div>
  );
}

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

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 (
    <div ref={containerRef}>
      {/* Content that may change size */}
    </div>
  );
}

发展

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

相关 MCP