关键词

ChatGPT插件LLM应用后端AI工具集成自定义UI组件TypeScript开发

项目简介

'apps-sdk-template' 是一个基于 TypeScript 和 Express 的应用后端模板，专门为构建兼容 OpenAI ChatGPT Apps SDK 的 Model Context Protocol (MCP) 服务器而设计。它提供了一个功能完整的 MCP 服务器实现，能够向 ChatGPT 客户端暴露可调用的工具和可访问的资源，并支持在 ChatGPT 界面中渲染自定义的用户界面（Widgets）。项目集成了 Vite 进行前端部件开发，支持热模块替换 (HMR)，极大地简化了开发流程。

主要功能点

  • MCP 服务器核心功能： 实现了 Model Context Protocol (MCP) 的核心功能，处理来自 LLM 客户端（如 ChatGPT）的请求和响应。
  • 工具 (Tools) 注册与执行： 支持注册各种功能性工具，例如在示例中实现的“pokemon”工具用于查询宝可梦信息，以及“capture”工具用于模拟捕获宝可梦。LLM 可以通过 MCP 调用这些工具来执行特定任务。
  • 资源 (Resources) 托管： 能够托管和管理各种资源，尤其用于提供自定义的用户界面组件（Widgets）所需的 HTML、CSS 和 JavaScript 内容。
  • ChatGPT UI 组件渲染 (Widgets)： 特别支持在 ChatGPT 对话界面中原生渲染由 React 构建的自定义 UI 组件。这些组件与 MCP 工具紧密集成，允许模型在需要时展示丰富的数据或交互界面。
  • 开发便利性： 结合 Vite 实现了 React UI 组件的热模块替换 (HMR) 功能，开发人员可以在实时查看修改效果。
  • 生产部署支持： 提供使用 Alpic 平台进行生产部署的指导，简化了上线流程。

安装步骤

  1. 克隆仓库： 
    git clone https://github.com/alpic-ai/apps-sdk-template.git
cd apps-sdk-template
  2. 安装依赖： 确保您已安装 Node.js 22+ (建议使用 'nvm install' 或查看 '.nvmrc' 文件) 和 'pnpm' ('npm install -g pnpm')。 然后运行： 
    pnpm install
  3. 启动开发服务器： 
    pnpm dev
    这将同时启动 Express 服务器（包含 MCP 服务器，监听 3000 端口）和 Vite 开发服务器（用于 React UI 组件，支持 HMR）。
  4. 暴露本地服务器： 在新终端中，使用 ngrok 暴露您的本地服务器到公网： 
    ngrok http 3000
    复制 ngrok 输出中的“Forwarding”URL，例如：'https://xxxxxx.ngrok-free.app'。

服务器配置 (用于 MCP 客户端)

此 MCP 服务器配置允许 MCP 客户端连接并使用其提供的工具和资源。

{
  "name": "alpic-openai-app",
  "command": "pnpm",
  "args": ["dev"],
  "env": {
    "NODE_ENV": "development"
  },
  "description": "一个兼容ChatGPT应用的MCP服务器，提供宝可梦信息查询和捕获工具，以及交互式UI组件。",
  "capabilities": {
    "http_transport": {
      "url": "https://<your-ngrok-url>/mcp"
    }
  }
}
  • 'name': MCP服务器的唯一名称，此处为 'alpic-openai-app'。
  • 'command': 启动MCP服务器的命令。在开发环境中，这是 'pnpm'。
  • 'args': 传递给 'command' 的参数。这里是运行开发脚本的参数 'dev'。
  • 'env': 环境变量，'NODE_ENV' 设置为 'development' 以启用开发模式。
  • 'description': 对MCP服务器功能的简短描述。
  • 'capabilities.http_transport.url': MCP服务器的公开访问URL。在本地开发时，请替换 '<your-ngrok-url>' 为您通过 ngrok 获取到的转发地址。生产环境中会是部署后的正式URL。

基本使用方法

  1. 连接到 ChatGPT：
    • 在 ChatGPT 客户端中，前往 设置 → 连接器 → 高级 → 开发者模式 并开启。
    • 前往 设置 → 连接器 → 创建。
    • 输入您的 ngrok URL 加上 '/mcp' 路径 (例如：'https://xxxxxx.ngrok-free.app/mcp')。
    • 点击 创建。
  2. 测试集成：
    • 在 ChatGPT 中开始新对话。
    • 通过 + → Plus → 您的连接器 选择您刚创建的连接器。
    • 尝试向模型提问，例如：“Show me pikachu details” 或 “capture a pokemon”。
    • 当请求“pikachu details”时，MCP 服务器将返回一个自定义的 UI 组件（Widget）来展示宝可梦信息。

信息

分类

AI与计算

访问项目