AI导哈

ChatGPT MCP应用模板

一个轻量级、类型安全的模板，用于使用Next.js和Skybridge构建ChatGPT MCP应用，提供生产就绪的基础设施，包括Next.js App Router结构、Skybridge集成、OAuth 2.1认证和Stripe订阅支持。

  • by axite-ai
  • TypeScript
  • 本地部署
  • 4 星标
  • 更新于
在 GitHub 查看 axite-ai/axite-mcp-template

使用说明

Axite MCP模板

一个轻量级的、类型安全的启动器，用于使用Next.js和Skybridge构建ChatGPT MCP应用程序。

该模板提供了一个简化的、可用于生产的基础，包括：

  • Next.js应用路由器 结构
  • 天桥 类型安全小部件的集成
  • 更好的认证 （OAuth 2.1）
  • 条纹 订阅支持（可选）
  • 淋ORM 使用PostgreSQL

✨ 特性

  • 🚀 类型安全端到端 -从后端工具到前端小部件的自动类型推断。
  • 🔐 OAuth 2.1 -内置身份验证，用于ChatGPT/Claude集成。
  • ⚡ Next.js原生 -小部件是标准的Next.js页面。
  • 🔌 天桥供电 -使用打字挂钩(useCallTool, useToolInfo)而不是原始的SDK调用。

🚀 快速开始

1.安装

pnpm install

2.配置环境

复制 .env.example 到 .env 并填写您的详细信息。

3.运行开发服务器

pnpm dev

您的MCP服务器正在运行 http://localhost:3000/mcp.

🛠️ 创建工具和小部件

1.定义工具和小部件(app/mcp/route.ts)

server.registerWidget(
  "my_tool",
  { title: "My Tool", widgetPath: "/widgets/my-tool" },
  {
    description: "Does something cool",
    inputSchema: z.object({ query: z.string() })
  },
  async ({ query }) => {
    return createSuccessResponse("Done", { result: query });
  }
);

2.创建小部件页面(app/widgets/my-tool/page.tsx)

import MyWidget from "@/src/components/my-widget";

export default function MyToolPage() {
  return <MyWidget />;
}

3.构建小部件组件(src/components/my-widget/index.tsx)

"use client";
import { useToolInfo } from "@/src/mcp-ui-hooks";

export default function MyWidget() {
  // Types are automatically inferred!
  const { output } = useToolInfo();

  if (!output) return <div>Loading...</div>;
  return <div>Result: {output.structuredContent.result}</div>;
}

📚 文档

  • app/mcp/route.ts -主服务器入口点
  • src/mcp-ui-hooks.ts -类型定义和钩子
  • lib/db/schema.ts -数据库架构

📄 许可证

麻省理工学院

相关 MCP