MCP UI Kit

Build interactive React UIs for MCP tools.

Installation

npm install @mcp-ui-kit

Server Usage

Create UI components that bundle on-demand:

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

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

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

Client Usage

Helper functions for your React components:

import { sendPrompt, callTool, useProps } from '@mcp-ui-kit/react';

function MyComponent() {
  const { title } = useProps({ title: 'Default' });
  
  return (
    <div>
      <h1>{title}</h1>
      <button onClick={() => sendPrompt('Analyze this data')}>
        Ask AI
      </button>
      <button onClick={() => callTool('get_data', { id: 123 })}>
        Fetch Data
      </button>
    </div>
  );
}

API

Server (`@mcp-ui-kit/server`)

createUI(name, entryUrl) - Creates a UI component

name: Component identifier
entryUrl: Path to the component entry file
Returns: { component(opts?) } where opts: { props?, frameSize? }

The entryUrl parameter accepts both formats:

// ESM (recommended) - using import.meta.resolve()
// Requires "type": "module" in package.json
createUI('dashboard', import.meta.resolve('./MyComponent.tsx'));

// CommonJS - using require.resolve() or absolute paths
createUI('dashboard', require.resolve('./MyComponent.tsx'));
createUI('dashboard', path.join(__dirname, './MyComponent.tsx'));

The library automatically converts file:// URLs to file paths, so both approaches work seamlessly.

UI (`@mcp-ui/library/ui`)

useProps(defaults) - Get props passed from the server
sendPrompt(message) - Send a message to the AI chat
callTool(name, params) - Invoke an MCP tool

Development

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

2.0 KiB Raw Blame History