MCP Gpt Proxy

MCP GPT代理

将GPT Apps SDK小部件添加到 任何 MCP服务器，无需对其进行修改。

为什么是这个模板？

如果您有一个现有的MCP服务器（或使用第三方服务器，如SQLite或Postgres MCP服务器），并且想在ChatGPT中的工具响应中添加丰富的UI小部件，则此代理允许您在不接触原始服务器的情况下完成此操作。

它是如何工作的：

ChatGPT (OpenAI)
       │
       ▼
┌──────────────────────────────┐
│  MCP GPT Proxy (this app)    │
│  - Forwards MCP requests     │
│  - Injects widget metadata   │
│  - Serves widget HTML        │
└──────────────────────────────┘
       │
       ▼
Your Existing MCP Server

快速开始

1.克隆和安装

git clone https://github.com/your-org/mcp-gpt-proxy.git
cd mcp-gpt-proxy
pnpm install

2.配置环境

cp .env.example .env

编辑 .env 指向您的上游MCP服务器：

MCP_SERVER_URL=http://localhost:3001/mcp

3.添加小部件映射

编辑 src/lib/config/proxy.config.ts 将工具映射到小部件：

export const config: ProxyConfig = {
  mcpServerUrl: process.env.MCP_SERVER_URL || "http://localhost:3001/mcp",

  widgets: [
    {
      toolName: "get_weather",
      widgetPath: "/widgets/weather",
      description: "Displays weather information",
      prefersBorder: true,
    },
    {
      toolName: "query_database",
      widgetPath: "/widgets/data-table",
      description: "Shows query results in a table",
    },
  ],
};

4.创建小部件

在中创建新小部件 src/app/widgets/[name]/page.tsx:

"use client";

import { useWidgetProps } from "@/app/hooks/use-widget-props";
import { useThemeSync } from "@/app/hooks/use-theme";
import { Badge } from "@openai/apps-sdk-ui/components/Badge";
import { Button } from "@openai/apps-sdk-ui/components/Button";

interface MyData {
  title: string;
  items: string[];
}

export default function MyWidget() {
  useThemeSync(); // Sync with ChatGPT theme
  const data = useWidgetProps();

  if (!data) return 
Loading...
;

  return (
    

      
{data.title}

      

        {data.items.map((item, i) => (
          
{item}

        ))}
      

    

  );
}

5.运行代理

pnpm dev

代理运行在 http://localhost:3000.将ChatGPT指向 http://localhost:3000/mcp （或使用ngrok进行外部访问）。

可用挂钩

useWidgetProps()

从ChatGPT上下文中获取工具输出数据：

const data = useWidgetProps();

useThemeSync()

将小部件主题与ChatGPT同步（亮/暗模式）：

useThemeSync(); // Automatically applies theme to document

useTheme()

读取主题而不自动应用：

const theme = useTheme(); // "light" or "dark"

小部件配置选项

使用Apps SDK UI组件

此模板包括 @openai/apps sdk用户界面 用于构建小部件。可用组件：

• Badge -状态指示器
• Button -交互式按钮
• Icon -图标库（日历、复选标记等）
• 还有更多。..

import { Badge } from "@openai/apps-sdk-ui/components/Badge";
import { Button } from "@openai/apps-sdk-ui/components/Button";
import { Calendar } from "@openai/apps-sdk-ui/components/Icon";

部署

维塞尔

vercel

码头工人

FROM node:20-alpine
WORKDIR /app
COPY . .
RUN pnpm install --frozen-lockfile
RUN pnpm build
CMD ["pnpm", "start"]

ngrok（发展）

ngrok http 3000
# Use the ngrok URL in ChatGPT: https://xxx.ngrok.app/mcp

项目结构

src/
├── app/
│   ├── mcp/
│   │   └── route.ts          # Proxy endpoint
│   ├── widgets/
│   │   └── example/
│   │       └── page.tsx      # Example widget
│   ├── hooks/
│   │   ├── use-widget-props.ts
│   │   └── use-theme.ts
│   ├── layout.tsx
│   └── page.tsx              # Landing page
├── lib/
│   ├── config/
│   │   └── proxy.config.ts   # Widget mappings
│   ├── proxy/
│   │   ├── inject-meta.ts    # Metadata injection
│   │   └── widget-server.ts  # Widget serving
│   └── types/
│       ├── mcp.ts            # MCP protocol types
│       └── openai.ts         # window.openai types

相关项目

• axite mcp模板 -完整的MCP服务器+小部件模板（用于从头开始构建）
• OpenAI应用软件开发工具包 -正式文件
• 应用SDK用户界面 -组件库

许可证

麻省理工学院