天桥入门
用于构建具有小部件渲染的ChatGPT和MCP应用程序的最小TypeScript模板。
入门指南
先决条件
- Node.js 24+
- HTTP隧道，例如 吸烟
本地开发
1.安装
npm install
# or
yarn install
# or
pnpm install
# or
bun install2.启动本地服务器
从根目录运行开发服务器：
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev此命令在端口3000上启动Express服务器。此服务器打包：
- MCP端点位于
/mcp（应用程序后端） - Vite HMR开发服务器上的React应用程序（要在主机中显示的UI元素）
3.连接到ChatGPT
- ChatGPT要求连接器可公开访问。要在Internet上公开服务器，请运行：
ngrok http 3000- 在ChatGPT中，导航到 设置→ 连接器→ 创建 并添加ngrok提供的转发URL，后缀为
/mcp（例如。https://3785c5ddc4b6.ngrok-free.app/mcp)
创建您的第一个小部件
1.添加一个新的小部件
- 在中注册小部件
server/server.ts具有唯一的名称（例如。，my-widget) - 在以下位置创建匹配的React组件
web/src/widgets/my-widget.tsx。文件名必须与小部件名称完全匹配
2.使用热模块替换（HMR）编辑小部件
在中编辑和保存组件 web/src/widgets/ --更改会立即显示在主机中
3.编辑服务器代码
修改文件 server/ 并在中重新加载您的ChatGPT连接器 设置→ 连接器→ \[您的连接器\]→ 重新加载
部署到生产
- 使用 Alpic 将您的OpenAI应用程序部署到生产环境
- 在ChatGPT中，导航到 设置→ 连接器→ 创建 并添加您的MCP服务器URL（例如。，
https://your-app-name.alpic.live)