项目简介

'openai-apps-sdk-examples' 仓库旨在展示如何使用Model Context Protocol (MCP) 和Apps SDK构建与ChatGPT集成的应用。它包含多个示例MCP服务器（使用Python或Node.js实现）以及配套的UI组件，这些服务器将UI组件作为LLM可调用的工具暴露出来，从而在ChatGPT对话中渲染丰富的用户界面。

主要功能点

多语言MCP服务器实现: 提供Python (使用FastMCP) 和Node.js (使用官方TypeScript SDK) 两种语言的MCP服务器实现，作为构建自身LLM后端服务的参考。
工具注册与调用: 服务器定义并注册一系列工具，LLM可以通过JSON-RPC协议调用这些工具，执行特定功能（例如，获取披萨信息、展示太阳系模型）。
资源管理: 托管和管理UI组件（Widget）作为资源，这些组件以HTML形式嵌入在MCP响应中，供Apps SDK客户端渲染。
交互式UI集成: 展示LLM如何利用这些工具，在对话中动态生成并显示丰富的、交互式的UI组件，增强用户体验。
传输协议支持: 服务器支持通过SSE (Server-Sent Events) 或流式HTTP进行通信。

安装步骤

克隆仓库:

git clone https://github.com/openai/openai-apps-sdk-examples.git
cd openai-apps-sdk-examples

安装项目依赖:
- Node.js/pnpm: 确保已安装Node.js 18+ 和 pnpm (推荐)。
```
pnpm install
pre-commit install
```
- Python: 确保已安装Python 3.10+。Python服务器的依赖将在后续启动时安装到虚拟环境中。
构建UI组件: 运行以下命令将UI组件打包成独立的静态资产文件，供MCP服务器使用。
```
pnpm run build
```
这将在 'assets/' 目录下生成 '.html', '.js', '.css' 文件。
启动静态文件服务器: 所有MCP服务器都需要本地静态文件服务器来提供UI组件的HTML、JS和CSS文件。
```
pnpm run serve
```
此命令会在 'http://localhost:4444' 启动一个带有CORS功能的静态文件服务器。

服务器配置

MCP服务器与LLM客户端（如ChatGPT连接器）进行通信。以下提供一个示例JSON配置，说明了如果MCP客户端需要启动并连接到本地Pizzaz Python MCP服务器时，可能需要提供的基本信息。此配置信息仅为演示客户端如何识别和启动服务器，在实际将MCP服务器连接到ChatGPT时，通常是提供一个可访问的URL。

{
  "server_name": "pizzaz-python",
  "description": "提供披萨主题工具和UI组件的MCP服务器",
  "command": "python",
  "args": [
    "-m",
    "uvicorn",
    "pizzaz_server_python.main:app",
    "--port",
    "8000"
  ],
  "annotations": {
    "启动命令说明": "此命令使用Python解释器启动uvicorn服务，该服务运行位于 'pizzaz_server_python/main:app' 的FastMCP应用。",
    "端口说明": "服务器将在本地8000端口监听请求。",
    "前置条件": "运行此命令前，您需要在项目根目录执行 'python -m venv .venv'，激活虚拟环境 'source .venv/bin/activate'，并安装Pizzaz Python服务器的依赖 'pip install -r pizzaz_server_python/requirements.txt'。",
    "连接端点": "服务器成功启动后，MCP客户端（例如通过ngrok暴露给ChatGPT）应连接到此服务器提供的 '/mcp' 端点。"
  }
}

基本使用方法

启动MCP服务器: 选择一个MCP服务器并启动。例如，启动Pizzaz Python服务器：

# 在项目根目录
python -m venv .venv
source .venv/bin/activate
pip install -r pizzaz_server_python/requirements.txt
uvicorn pizzaz_server_python.main:app --port 8000

或启动Pizzaz Node服务器：

# 在 pizzaz_server_node 目录
cd pizzaz_server_node
pnpm start

服务器将在指定端口（例如8000）启动。

暴露本地服务器到公网 (for ChatGPT): 由于ChatGPT无法直接访问您的本地服务器，您需要使用 'ngrok' 等工具将其暴露到互联网。
```
ngrok http 8000
```
'ngrok' 将提供一个公共URL (例如 'https://<custom_endpoint>.ngrok-free.app')。MCP服务器的完整端点通常是 'https://<custom_endpoint>.ngrok-free.app/mcp'。
在ChatGPT中连接:
- 在ChatGPT中启用开发者模式。
- 进入"设置" > "连接器" (Connectors)，添加您的公共URL作为连接器。
- 在ChatGPT对话中，选择您添加的连接器，然后通过提问来调用服务器提供的工具。例如，对于Pizzaz应用，您可以问："What are the best pizzas in town?"。

下一步

您可以修改服务器代码，连接到自己的数据源，或者创建新的UI组件并将其集成到MCP服务器中。

关键词

项目简介

主要功能点

安装步骤

服务器配置

基本使用方法

下一步

信息