Zoho MCP小部件（JavaScript阶段）
此目录包含Zoho MCP客户端的JavaScript实现，旨在打包为Zoho Widget。
📚 Zoho小部件要求
基于 Zoho文档:
- 结构：小部件必须是包含条目HTML文件的ZIP文件（默认值
widget.html). - 包装：必须使用Zoho CLI(
zet pack)以创建有效的ZIP。 - 局限性:
- 最大总大小为10MB。 - 最多250个文件。 - 小部件本身不运行服务器端代码（Node.js）；它只是客户端。
🏗️ 建筑
该架构反映了Python原型，但适用于浏览器：
User Interface (HTML/CSS)
↓
Agent (JS)
- Calls Claude API (via Proxy/Direct*)
↓
MCP Client (JS)
- Calls Zoho MCP Server (HTTP)
↓
Zoho MCP Server⚠️ 安全警告: 如果直接存储在代码中，则客户端小部件会公开API密钥。
- 发展：我们可以使用本地代理或临时密钥。
- 生产：您应该使用Zoho创建者函数或安全的后端代理来保存Claude API密钥。
📂 项目结构
Zoho_MCP_JS/
├── app/
│ ├── index.html # Entry point
│ ├── css/
│ │ └── style.css # Styles
│ └── js/
│ ├── app.js # Main UI logic
│ ├── agent.js # Claude AI Agent (claude-sonnet-4-6)
│ ├── mcp-client.js # MCP Client
│ └── config.js # Configuration
├── proxy_server.py # CORS proxy for Claude API & Zoho MCP
├── package.json
├── plugin-manifest.json
└── README.md🚀 如何在当地跑步
你需要 两个终端：一个用于CORS代理，一个用于web服务器。
- 启动CORS代理 （从浏览器调用Claude API和Zoho MCP时需要）：
python proxy_server.py这继续 http://localhost:8083 具有两个端点：
- /anthropic -将请求代理到Claude API - /zoho --将请求代理到Zoho MCP服务器
- 启动web服务器:
npm start开放时间： http://localhost:8000.
> 从同一网络上的其他设备访问？ 使用 http://192.168.x.x:8000。注意：您需要重新输入设置，因为localStorage是特定于浏览器/源的。
- 配置凭据 在浏览器中：
- 点击 设置 在应用程序中。 - 输入你的 API密钥. - 输入你的 Zoho MCP URL （例如。 https://crm-data-metadata-mcp-server-906941038.zohomcp.com/mcp//message). - 单击“保存”。
- 开始聊天--试试 *“给我最新的5条线索”*.
📦 如何为Zoho打包
- 安装Zoho命令行界面：
npm install -g zoho-extension-toolkit - 跑
zet pack在目录中。 - 将生成的ZIP上传到Zoho Creator/CRM。