MCP Apps Everything

MCP应用程序一切

完整实施SEP-1865 MCP应用程序-展示所有API和功能。

特性

此演示服务器包括 4个交互式小部件 展示所有SEP-1865 API：

快速开始

npm install
npm run build   # Build widget to dist/
npm start       # Start MCP server

服务器运行于 http://localhost:4001/mcp

发展

npm run dev     # Run server + vite dev (hot reload)

项目结构

├── server/
│   └── index.ts         # MCP server with all tools & resources
├── widget/
│   ├── App.tsx          # Main app with tabbed interface
│   ├── main.tsx         # Entry point
│   ├── globals.css      # Global styles
│   ├── components/
│   │   └── ui/          # Reusable UI components
│   │       ├── badge.tsx
│   │       ├── button.tsx
│   │       ├── card.tsx
│   │       ├── input.tsx
│   │       └── textarea.tsx
│   ├── hooks/
│   │   └── useApp.ts    # React hook for all SEP-1865 APIs
│   ├── lib/
│   │   └── utils.ts     # Utility functions
│   └── widgets/
│       ├── ToolCallWidget.tsx    # tools/call demo
│       ├── OpenLinkWidget.tsx    # ui/open-link demo
│       ├── ReadResourceWidget.tsx  # resources/read demo
│       └── MessageWidget.tsx     # ui/message demo
├── shared/
│   └── types.ts         # Complete SEP-1865 type definitions
├── dist/                # Built widget (single HTML file)
├── index.html           # Root HTML file
├── vite.config.ts       # Vite configuration
├── tsconfig.json        # TypeScript configuration
└── package.json         # Dependencies and scripts

SEP-1865原料药

小部件→ 主机请求

小部件→ 主机通知

Host → 小部件通知

MCP服务器工具

带UI的工具

• show-counter -互动式反演示 tools/call
• show-weather -天气显示演示 ui/open-link
• show-notes -Notes浏览器演示 resources/read
• show-chat -聊天界面演示 ui/message

实用工具

• increment -递增计数器（由计数器小部件调用）
• create-note -创建新笔记

MCP服务器资源

UI资源(ui://)

• ui://main -主控件HTML（文本/HTML+mcp）
• ui://counter -传统计数器资源（向后兼容）

与MCPJam检查器一起使用

1. 启动服务器： npm start
2. 打开MCPJam检查器
3. 连接到 http://localhost:4001/mcp （流式HTTP）
4. 转到“工具”选项卡并运行任何工具
5. 交互式小部件将替代原始JSON进行渲染

小工具开发

这 useApp() 钩子提供所有SEP-1865 API：

import { useApp } from "./hooks/useApp";

function MyWidget() {
  const {
    // State
    isConnected,
    hostContext,      // { theme, displayMode, ... }
    toolInput,        // Arguments passed to tool
    toolResult,       // Result from tool execution
    isCancelled,
    isTearingDown,

    // Request APIs
    callTool,         // (name, args) => Promise
    readResource,     // (uri) => Promise
    sendMessage,      // (text) => Promise
    openLink,         // (url) => Promise

    // Notification APIs
    resize,           // (width, height) => void
  } = useApp();

  // Use hostContext.theme for theming
  const isDark = hostContext?.theme === "dark";

  // ...
}

技术细节

工具UI链接

工具通过以下方式声明其UI资源 _meta:

server.registerTool("show-counter", {
  _meta: { "ui/resourceUri": "ui://main" },
  // ...
});

安全

该小部件在沙盒iframe中运行。主机控制：

• 可以调用哪些工具
• 可以读取哪些资源
• 可以打开哪些URL

许可证

麻省理工学院