Apps SDK 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 ;
}

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 
Loading...
;
  return 
Result: {output.structuredContent.result}
;
}

📚 文档

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

📄 许可证

麻省理工学院