AI导哈

MCP应用开发工具

一个完整的SEP-1865 MCP应用实现，展示所有API和功能，用于开发交互式小部件。

  • by MCPJam
  • TypeScript
  • 本地部署
  • 1 星标
  • 更新于
在 GitHub 查看 MCPJam/mcp-apps-everything

使用说明

MCP应用程序一切

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

特性

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

小部件 工具 API演示
柜台 show-counter tools/call -从小部件调用MCP工具
天气 show-weather ui/open-link -打开外部URL
注意事项 show-notes resources/read -阅读MCP资源
聊天 show-chat ui/message -发送消息聊天

快速开始

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原料药

小部件→ 主机请求

方法 说明
ui/initialize 初始化小部件并获取主机上下文
tools/call 调用服务器上的MCP工具
resources/read 读取MCP资源
ui/message 向聊天室发送消息
ui/open-link 在浏览器中打开外部URL

小部件→ 主机通知

方法 说明
ui/notifications/initialized 小部件已完全初始化
ui/size-change 小部件请求更改大小

Host → 小部件通知

方法 说明
ui/notifications/tool-input 执行前的工具参数
ui/notifications/tool-result 执行后的工具结果
ui/host-context-change 主题或显示模式已更改
ui/tool-cancelled 用户已取消该工具
ui/resource-teardown 正在删除小部件

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<CallToolResult>
    readResource,     // (uri) => Promise<ReadResourceResult>
    sendMessage,      // (text) => Promise<void>
    openLink,         // (url) => Promise<void>

    // 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

许可证

麻省理工学院

相关 MCP