入门指南
先决条件
- Node.js和pnpm（或npm/yarn）
- 一个OpenAI API密钥
- 用于OAuth-enabled财务数据访问的财务数据集API帐户
- Thesys API密钥（从 https://console.thesys.dev/keys)
安装
- 克隆存储库：
git clone
cd genui-mcp-demo- 安装依赖项：
pnpm install配置
- 获取Thesys API密钥
访问 https://console.thesys.dev/keys 获取您的Thesys API密钥。
- 注册金融数据集MCP访问
在以下网址创建帐户 https://www.financialdatasets.ai/ 获取OAuth-auth-authenticated金融数据服务的API密钥。
- 运行应用程序:
pnpm dev- 配置应用程序:
- 打开浏览器并导航到 http://localhost:5173/ - 点击 “显示设置” - 输入您的 Thesys API密钥 - 输入MCP服务器URL： https://mcp.financialdatasets.ai/mcp - 保存设置
测试应用程序
在聊天界面中尝试以下示例查询，以测试财务数据集成：
Comprehensive comparison of Bitcoin and Tesla stock performance from 2020 to October 2025助理将使用MCP工具获取实时财务数据并提供详细分析。
项目结构
src/components/：包含UI的React组件。
- ChatMessages.tsx：显示聊天记录。 - ChatInput.tsx：用于发送消息的输入字段。 - SettingsPanel.tsx：用于配置API密钥和服务器URL的面板。 - AuthCallback.tsx：处理OAuth 2.0回调。
src/lib/：包含应用程序的核心逻辑。
- auth.ts：为MCP实现OAuth 2.0客户端提供程序。 - mcp-client.ts：与MCP服务器交互的客户端（列出/调用工具）。 - openai-client.ts：用于与OpenAI API交互的客户端，包括工具调用处理。
src/App.tsx：将所有内容联系在一起的主要应用程序组件。