trade detail

交易详情-ChatGPT股价显示应用程序

ChatGPT应用程序构建于 模型上下文协议（MCP） 它以精美的轮播和小部件格式显示股票价格和指数数据。使用Python（FastAPI）后端和TypeScript/React前端组件构建。

⚡ MCP协议支持

✅ SSE传输（服务器发送事件） -完全符合MCP 1.0\ ✅ ChatGPT兼容 -适用于自定义MCP连接器\ ✅ JSON-RPC 2.0 -标准协议实施

连接URL: https://your-app-name.onrender.com/mcp

📖 完整的MCP测试和连接指南→

特性

• 📊 实时股票价格：显示实时更新的当前股价
• 📈 索引数据：跟踪主要市场指数（Nifty 50、Nifty Midcap、Nift Smallcap）
• 🎠 旋转视图：在优雅的旋转木马中浏览多只股票
• 📱 小部件格式：紧凑的小部件显示屏，便于快速浏览
• 🚀 轻松部署：单击部署即可渲染
• 💬 ChatGPT集成：使用自然语言查询股票数据

建筑

此应用程序遵循 模型上下文协议（MCP） 规范：

• 后端：带MCP SSE传输的Python FastAPI服务器
• 前端：使用Tailwind CSS的Types/React组件
• 小部件：预构建的UI组件作为嵌入式资源
• 运输：通过HTTPS的SSE（服务器发送事件）
• 协议：mcp1.0+JSON-RPC 2.0
• 部署：已准备好使用自动构建进行渲染

项目结构

trade_detail/
├── src/                          # Frontend React components
│   ├── stock-carousel/          # Carousel widget for stocks
│   ├── stock-widget/            # Individual stock widget
│   ├── index-widget/            # Market indices widget
│   └── utils/                   # Shared utilities
├── server/                       # Python MCP server
│   ├── main.py                  # FastAPI + MCP integration
│   ├── mcp_server.py            # MCP server with SSE transport
│   ├── stock_data.py            # Stock data fetching logic
│   └── requirements.txt         # Python dependencies
├── assets/                       # Built widget bundles (generated)
├── MCP_TESTING.md               # MCP testing & connection guide
├── build-all.mts                # Build orchestrator
└── render.yaml                  # Render deployment config

快速开始

先决条件

• Node.js 18+
• Python 3.10+
• pnpm（推荐）或npm

安装

# Clone repository
git clone https://github.com/vikkysarswat/trade_detail.git
cd trade_detail

# Install dependencies
pnpm install
python -m venv .venv
source .venv/bin/activate  # Windows: .venv\Scripts\activate
pip install -r server/requirements.txt

# Build frontend
pnpm run build

# Start servers
pnpm run serve                              # Terminal 1: Assets (port 4444)
uvicorn server.main:app --reload --port 8000  # Terminal 2: MCP server

访问 http://localhost:8000 验证服务器是否正在运行。

部署以渲染

一键部署

1. 分叉此存储库
2. 首选 渲染仪表板
3. 点击“新建+”>“Web服务”
4. 连接您的GitHub存储库
5. 渲染自动检测 render.yaml 并部署

设置环境变量

BASE_URL = https://your-app-name.onrender.com

验证部署

curl https://your-app-name.onrender.com/health
# Should return: {"status": "healthy"}

连接到ChatGPT

步骤1：启用开发人员模式

• 转到ChatGPT设置
• 启用“开发人员模式”

步骤2：添加自定义MCP连接器

连接器URL:

https://your-app-name.onrender.com/mcp

步骤3：测试

将连接器添加到您的聊天中，然后尝试：

• “显示RELIANCE的当前价格”
• 显示TCS、Infosys和Wipro的股价
• “Nifty 50指数在做什么？”

📖 详细的连接指南和故障排除→

MCP工具

发展

本地测试MCP

# Install MCP inspector
npm install -g @modelcontextprotocol/inspector

# Test your server
mcp-inspector http://localhost:8000/mcp

添加新小部件

1. 在中创建组件 src/your-widget/
2. 添加入口点 src/your-widget/main.tsx
3. 构建会自动检测到它

自定义库存数据

编辑 server/stock_data.py 与以下内容集成：

• 雅虎财经（默认）
• 阿尔法Vantage
• NSE印度API
• 您的自定义数据源

API终点

• /mcp -ChatGPT的MCP SSE端点
• /health -健康检查
• / -服务器信息

技术栈

• 后端：Python 3.11、FastAPI、Uvicorn、MCP SDK
• 前端：TypeScript、React 18、Vite
• 样式：顺风CSS
• 协议：带SSE的模型上下文协议（MCP）
• 部署：渲染

故障排除

ChatGPT中“404未找到”

• ✅ 验证URL: https://your-app.onrender.com/mcp （无尾随斜线）
• ✅ 检查健康端点是否正常工作
• ✅ 确保启用了HTTPS

无法渲染的小部件

• ✅ 集 BASE_URL 环境变量
• ✅ 构建资产： pnpm run build
• ✅ 检查可访问的资产

连接超时

• ✅ 检查渲染日志是否有错误
• ✅ 验证服务器是否正在运行： curl /health
• ✅ 首先在当地与MCP检查员进行测试

📖 完整的故障排除指南→

文档

• MCP测试和连接指南 -全面的测试说明
• 部署指南 -部署选项和配置
• 贡献指南 -如何做出贡献

贡献

欢迎投稿！请看 贡献.md 作为指导方针。

许可证

MIT许可证-请参阅 许可证 详细信息文件

支持

• 问题:
• 电子邮件: vikky.sarswat@gmail.com

致谢

• 内置于 模型上下文协议（MCP）
• 源于 OpenAI应用SDK示例
• 使用官方 MCP Python SDK

______________________________________________________________________

准备好部署了吗？ → 渲染仪表板\ 需要帮助？ → MCP测试指南