使用说明
MCP应用软件开发工具包
用于使用与兼容的模型上下文协议（MCP）构建应用程序的开源SDK OpenAI应用软件开发工具包.
此SDK对两种类型的开发人员有用：
- 代理商开发人员 希望将基于MCP的App UI集成到自己的代理中的用户
- MCP应用程序开发人员 他们正在开发基于MCP的应用程序，可以与ChatGPT和其他代理集成
演示视频
https://github.com/user-attachments/assets/7d13d4f8-2da7-40b1-a102-7745a1d5cc95
安装
只需一个命令即可快速开始：
npm install @xalia/mcp-apps-sdk
这将安装构建MCP驱动的应用程序所需的一切！ ✨
包含什么
- MCP客户端 -连接到MCP服务器并与之通信
- 适配器 -与流行的AI框架（OpenAI、Vercel AI SDK）集成
- 小部件组件 -用于渲染MCP应用程序界面的React组件
替代方案：模块化安装
对于想要更小捆绑包大小的高级用户，只安装您需要的东西：
# For agent developers - render MCP app widgets only
npm install @xalia/mcp-apps-widget
# For MCP app developers - client and adapters only
npm install @xalia/mcp-client @xalia/mcp-apps-adapters
包裹
此monorepo包含四个包：
@xalia/mcp应用程序sdk ⭐
完整的SDK -统一包装，包含您所需的一切。安装此软件以进行最简单的设置。
@xalia/mcp应用程序小部件
React组件和实用程序，用于通过PostMessage通信在安全的iframe中呈现MCP应用程序小部件。
@xalia/mcp客户端
TypeScript客户端，用于连接到MCP服务器并与之交互，包括工具发现和执行。
@xalia/mcp应用程序适配器
用于将MCP工具与Vercel AI SDK和OpenAI等流行AI框架集成的适配器。
快速开始
先决条件
- Node.js 18+
- pnpm 10+
- 正在运行的MCP服务器（默认值：
http://localhost:8002/mcp)
安装
# Clone the repository with submodules
git clone --recurse-submodules https://github.com/general-intelligence-labs/mcp-apps-sdk.git
cd mcp-apps-sdk
# Or if you already cloned without submodules
git submodule update --init --recursive
# Install dependencies
pnpm install
# Build all packages
pnpm build
运行示例
聊天机器人示例需要一个MCP服务器和一个用于小部件的静态文件服务器。看 示例/聊天机器人/README.md 有关详细的设置说明。
快速启动：
# Terminal 1: Start static file server
cd examples/openai-apps-sdk-examples
pnpm install && pnpm build
pnpm run serve # Serves on port 4444
# Terminal 2: Start MCP server
cd examples/openai-apps-sdk-examples/solar-system_server_python
python -m venv .venv && source .venv/bin/activate
pip install -r requirements.txt
uvicorn main:app --port 8002
# Terminal 3: Start the chatbot
cd examples/chatbot
pnpm dev
打开 http://localhost:3000 查看聊天机器人与MCP工具的集成。
发展
项目结构
mcp-apps-sdk/
├── packages/
│ ├── mcp-apps-sdk/ # ⭐ Complete SDK (umbrella package)
│ ├── mcp-apps-widget/ # Widget rendering components
│ ├── mcp-client/ # MCP protocol client
│ └── mcp-apps-adapters/ # AI framework adapters
├── examples/
│ ├── chatbot/ # Example Next.js chatbot app
│ └── openai-apps-sdk-examples/ # OpenAI SDK examples (git submodule)
└── package.json # Root package.json
可用脚本
# Build all packages
pnpm build
# Run all packages in development mode
pnpm dev
# Run tests
pnpm test
# Lint code
pnpm lint
# Clean all build artifacts
pnpm clean
📚 用法
简单导入（推荐）
安装完整的SDK并从一个地方导入所有内容：
npm install @xalia/mcp-apps-sdk
import {
createMCPClient,
connectMCPClient,
createVercelAITools,
AssistantAppEmbed
} from '@xalia/mcp-apps-sdk';
// Connect to MCP server
const client = await createMCPClient({ name: 'my-app', version: '1.0.0' });
await connectMCPClient(client, transport);
// Convert MCP tools for use with AI SDKs
const tools = await createVercelAITools(client);
模块化进口（用于优化捆绑尺寸）
当您需要精细控制时，请使用特定的入口点：
// Client only
import { createMCPClient } from '@xalia/mcp-apps-sdk/client';
// Adapters
import { createOpenAIFunctions } from '@xalia/mcp-apps-sdk/adapters/openai';
import { createVercelAITools } from '@xalia/mcp-apps-sdk/adapters/vercel';
// Widget components
import { AssistantAppEmbed } from '@xalia/mcp-apps-sdk/widget';
面向代理开发人员
如果您只需要渲染MCP应用程序小部件：
npm install @xalia/mcp-apps-widget
import { AssistantAppEmbed } from '@xalia/mcp-apps-widget';
function MyApp() {
return (
<AssistantAppEmbed
widgetHtml={widgetHtml}
toolOutput={result}
metadata={metadata}
/>
);
}
社区
加入我们的Discord社区进行讨论、支持和更新：
贡献
我们欢迎捐款！请查看我们的 贡献指南 了解详情。
许可证
MIT许可证-请参阅 许可证 了解详情。
