MCP Catalogs
← 首页chatgpt-app-typescript-template screenshot

chatgpt-app-typescript-template

by pomerium·★ 16·综合分 45

生产就绪的 MCP 应用模板，用于构建带 React UI 小部件的 ChatGPT 风格工具。

ai-llmdeveloper-toolsproductivity
7
Forks
9
活跃 Issue
本月
最近提交
2 天前
收录于

概述

这是一个架构良好的入门模板，演示了使用模型上下文协议 (MCP) 和 React 小部件构建 MCP 应用的最佳实践。它提供了完整的开发环境，包括 TypeScript、Tailwind CSS v4、Pino 日志记录、Storybook 和 Vitest。模板包含带有示例 Echo 工具的 MCP 服务器，展示 MCP 应用 API 的 React 小部件，支持多种显示模式（内联、画中画、全屏）以及 UI 功能协商。

试试问 AI

装完之后，这里有 5 个你可以让 AI 做的事：

你:为 ChatGPT 构建具有交互式 UI 的自定义 AI 工具
你:使用 React 前端创建 MCP 应用程序
你:开发与各种 MCP 主机（如 Claude Desktop 和 VS Code）集成的工具
你:这个模板支持哪些 MCP 主机？
你:如何向我的应用添加自定义工具？

什么时候选它

当需要具有 React 组件的丰富 UI 和结构良好的生产就绪代码库时，选择此模板开始新的 MCP 应用。

什么时候不要选它

如果您需要不带 UI 组件的简单工具，或者您的技术栈不使用 TypeScript 和 React，请避免使用。

此 server 暴露的工具

从 README 抽取出 1 个工具
  • echo

    Example tool that displays messages and demonstrates UI binding

可对比工具

mcp-server-templatereact-mcp-startermcp-typescript-boilerplate

安装

安装与设置

git clone https://github.com/pomerium/chatgpt-app-typescript-template your-chatgpt-app
cd your-chatgpt-app
npm install
npm run dev

ChatGPT 连接

  1. 使用 [Pomerium 的 SSH 隧道](https://www.pomerium.com/docs/tcp/ssh) 创建公共隧道：

``bash ssh -R 0 pom.run ``

  1. 在终端输出中找到您的公共 URL
  2. 在 ChatGPT 中，转到 **设置 → 连接器 → 添加连接器**
  3. 输入您的远程 URL + /mcp，例如 https://您的唯一URL.pom.run/mcp
  4. 保存连接器并测试您的工具

FAQ

这个模板支持哪些 MCP 主机？
此模板支持任何支持 MCP 应用规范的 MCP 主机，包括 ChatGPT、Claude Desktop、VS Code 等。
如何向我的应用添加自定义工具？
将工具架构添加到 server/src/types.ts，在 server/src/server.ts 中注册工具，并在 widgets/src/widgets/ 目录中创建相应的小部件。

Hacker News 讨论

开发者社区最近的相关讨论。

chatgpt-app-typescript-template 对比

chatgpt-app-typescript-template vs ultimate_mcp_serverchatgpt-app-typescript-template vs mcp-server-chartchatgpt-app-typescript-template vs everythingchatgpt-app-typescript-template vs filesystemchatgpt-app-typescript-template vs time
GitHub →

最后更新于 · 由 README + GitHub 公开数据自动生成。