AI导哈

GPT应用代理服务

MCP GPT Proxy是一个无需修改现有MCP服务器即可为ChatGPT工具响应添加丰富UI小部件的代理服务。

  • by axite-ai
  • TypeScript
  • 本地部署
  • 1 星标
  • 更新于
在 GitHub 查看 axite-ai/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<MyData>();

  if (!data) return <div>Loading...</div>;

  return (
    <div className="p-4 rounded-xl border border-default bg-surface">
      <h2 className="heading-lg">{data.title}</h2>
      <ul className="mt-4 space-y-2">
        {data.items.map((item, i) => (
          <li key={i}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

5.运行代理

pnpm dev

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

可用挂钩

useWidgetProps<T>()

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

const data = useWidgetProps<WeatherData>();

useThemeSync()

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

useThemeSync(); // Automatically applies theme to document

useTheme()

读取主题而不自动应用：

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

小部件配置选项

选项 类型 描述
toolName string 要增强的MCP工具名称
widgetPath string 小部件的路径（例如，“/widgets/weather”）
description 弦？ 模型的小部件描述
prefersBorder 布尔值？ 带边框渲染（默认值：true）
invokingText 弦？ 工具运行时的状态文本
invokedText 弦？ 工具完成后的状态文本
csp 对象？ 外部获取的内容安全策略

使用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

相关项目

许可证

麻省理工学院

相关 MCP