mcp-app-typescript-template
活跃·★ 21·Apache-2.0·更新于 2026-10-21
该模板提供了一个精心设计的启动项目，用于使用React组件构建交互式AI应用（MCP Apps），并利用TypeScript、Tailwind CSS和Vite等现代Web技术。它展示了与ChatGPT等MCP主机集成的最佳实践，为服务器端工具和动态UI组件提供了全面的功能。
#MCP#React#TypeScript#Node.js#AI应用#前端开发#开发者工具#组件开发
01
功能特性
01带有应用助手的MCP服务器：使用`McpServer`和MCP应用助手的Node.js服务器，用于强大的后端开发。
02带有App API演示的React组件：交互式React组件演示了MCP Apps `App` API，用于与主机通信。
03UI能力协商：服务器自动检测主机能力并调整响应，支持UI和纯文本客户端。
04内联组件资源：支持针对iframe沙盒主机（如Claude.ai）或远程共享的自包含HTML模式。
05用于测试的模拟应用：包含`createMockApp()`辅助函数，用于在没有实时MCP连接的情况下进行本地测试和Storybook开发。
02
兼容性
Node.js
运行时
已通过文档验证
npm
包管理器
已通过文档验证
TypeScript
语言
已通过文档验证
React
框架
已通过文档验证
Docker
部署
已通过文档验证
macOS
操作系统
已通过文档验证
03
快速开始
1
$ git clone https://github.com/pomerium/mcp-app-typescript-template your-mcp-app
2
$ cd your-mcp-app
3
$ npm install
4
$ npm run dev
04
使用场景
↳为ChatGPT、Claude.ai和VS Code等MCP主机构建自定义交互式AI应用。
↳在AI聊天界面中将服务器端工具与动态前端组件集成。
↳使用强大的现代Web开发堆栈进行MCP应用的快速原型设计和开发。
↳使用`createMockApp()`和MCP Inspector等专用工具进行MCP应用功能的本地测试和调试。
↳使用多阶段Docker构建和全面的生产清单部署生产就绪的MCP应用。
05
同类工具
评论
登录后发表评论
暂无评论，来发表第一条吧