ChemCP

ChemCP - 分子查看器 MCP App

这是一个 MCP App，可使用 RDKit.js 根据 SMILES 表示法渲染交互式 2D 分子结构图。让 AI 助手为你展示任意分子，ChemCP 就会在聊天中直接显示其结构及计算得出的属性。

你将获得

• 根据任何有效的 SMILES 字符串渲染 2D 结构图
• 分子属性 — 分子量、LogP、氢键供体/受体、TPSA、可旋转键、环等
• 交互式 UI — 输入自己的 SMILES、点击示例分子，无需离开对话
• 由 RDKit 提供支持（制药和生物技术行业使用的同款化学信息学工具包）

如需更多功能，请试试：ChemIllusion

前置条件

• Node.js 18+ — 在此下载
• Claude Desktop（推荐）或付费版 Claude.ai 计划（Pro/Max/Team）——交互式分子查看器需要支持 MCP Apps 的宿主

注意：Claude Desktop 完整支持 MCP Apps。Claude.ai 自定义连接器仍处于实验阶段，可能存在阻止 RDKit.js 加载的 CSP 限制。如果你在 Claude.ai 中看到“RDKit.js failed to load”，请改用 Claude Desktop。

---

设置：Claude Desktop

Claude Desktop 开箱即支持本地 MCP 服务。无需隧道或远程托管。

第 1 步：安装 ChemCP

npm install -g chemcp

验证安装是否成功：

chemcp --help

（这会通过 stdio 启动 MCP 服务——你可以按 Ctrl+C 停止它。）

第 2 步：配置 Claude Desktop

打开 Claude Desktop 配置文件：

操作系统	路径
macOS	~/Library/Application Support/Claude/claude_desktop_config.json
Windows	%APPDATA%\Claude\claude_desktop_config.json

在 mcpServers 部分添加 ChemCP：

{
  "mcpServers": {
    "chemcp": {
      "command": "npx",
      "args": ["chemcp"]
    }
  }
}

提示：如果你已经配置了其他 MCP 服务，只需在现有的 "mcpServers" 对象中添加 "chemcp" 条目即可。

第 3 步：重启 Claude Desktop

退出并重新打开 Claude Desktop。你应该能在 MCP 工具列表中看到 ChemCP（点击聊天输入框底部的锤子图标）。

第 4 步：试用

输入类似这样的消息：

• “显示阿司匹林的分子结构”
• “渲染咖啡因的结构”
• “显示 SMILES：CC(=O)Oc1ccccc1C(=O)O”

Claude 会调用 render_molecule 工具，并在对话中显示交互式分子查看器，其中包含 2D 结构和分子属性。

---

设置：Claude.ai（网页）——实验性

⚠️ 实验性：Claude.ai 自定义连接器对 MCP Apps 的支持仍处于实验阶段。CSP 限制可能会阻止 RDKit.js 加载。为获得最佳体验，请使用 Claude Desktop。

Claude.ai 通过自定义连接器支持远程 MCP 服务。这需要付费 Claude 计划（Pro、Max 或 Team）。

第 1 步：安装并启动服务

npm install -g chemcp

以 HTTP 模式启动：

chemcp --http

这会在 http://localhost:3001/mcp 启动服务。

第 2 步：通过隧道公开服务

在单独的终端中，创建一条通往本地服务的公共隧道：

npx cloudflared tunnel --url http://localhost:3001

复制生成的 URL（例如，https://random-name.trycloudflare.com）。

第 3 步：在 Claude.ai 中添加自定义连接器

1. 前往 claude.ai
2. 点击你的个人资料图片（左下角）
3. 前往设置 > 连接器
4. 点击添加自定义连接器
5. 粘贴隧道 URL + /mcp（例如，https://random-name.trycloudflare.com/mcp）
6. 为其命名，例如“ChemCP”
7. 保存

步骤 4：试用

开始新的聊天，并让 Claude 为你展示一个分子：

• "Show me the structure of ibuprofen"
• "What does benzene look like? Render it for me"
• "Render SMILES: CN1C=NC2=C1C(=O)N(C(=O)N2C)C"

交互式分子查看器会直接在聊天中渲染。

---

示例提示词

连接后，试试这些：

提示词	会发生什么
"Show me aspirin"	渲染阿司匹林的 2D 结构和性质
"Render SMILES: CCO"	根据 SMILES 代码渲染乙醇
"What's the structure of testosterone?"	Claude 提供 SMILES 并渲染分子
"Compare the structures of caffeine and theobromine"	并排渲染这两种分子

SMILES 示例

分子	SMILES
乙醇	CCO
苯	c1ccccc1
阿司匹林	CC(=O)Oc1ccccc1C(=O)O
咖啡因	CN1C=NC2=C1C(=O)N(C(=O)N2C)C
睾酮	CC12CCC3C(C1CCC2O)CCC4=CC(=O)CCC34C
葡萄糖	OC[C@H]1OC(O)[C@H](O)[C@@H](O)[C@@H]1O

---

故障排除

“我看不到分子查看器，只看到文本”

交互式 UI 仅适用于支持 MCP Apps 的宿主：

• Claude Desktop（最新版本）
• Claude.ai（网页端，使用自定义连接器）

如果你使用的是 Claude Code（CLI）或其他不支持 MCP Apps 的 MCP 客户端，工具仍会以文本形式返回 SMILES 数据，但不会显示可视化渲染。

“找不到工具”或未列出 ChemCP

• Claude Desktop：编辑配置文件后，请确保重启了应用。检查 npx chemcp 是否能在终端中运行。
• Claude.ai：确保隧道仍在运行，且连接器 URL 以 /mcp 结尾。

“从 CDN 加载 RDKit.js 失败”

Claude.ai 自定义连接器：使用自定义连接器时，CSP 限制可能会阻止 RDKit.js 加载。解决方案：改用 Claude Desktop，它完整支持 MCP Apps。

Claude Desktop：如果 RDKit.js 加载失败，通常意味着：

• 没有互联网连接（RDKit.js 从 unpkg.com 加载，约 8 MB）
• CDN 被网络防火墙拦截
• 首次加载超时——重新加载聊天并重试

Node.js 版本

ChemCP 需要 Node.js 18 或更高版本。使用以下命令检查：

node --version

---

面向开发者

本地开发

git clone https://github.com/scottmreed/ChemCP.git
cd ChemCP
npm install
npm run build
npm run serve:http    # HTTP mode for testing

项目结构

文件	用途
server.ts	MCP 服务——注册 render_molecule 工具并提供 UI 资源
src/mcp-app.html	HTML 入口点，从 CDN 加载 RDKit.js
src/mcp-app.tsx	React UI——初始化 RDKit WASM，根据 SMILES 渲染 SVG，并计算描述符
bin/chemcp.js	npm 二进制入口点
dist/	构建输出（编译后的服务和打包成单文件的 HTML）

工作原理

1. Claude 使用 SMILES 字符串调用 render_molecule 工具
2. 服务将 SMILES 返回给 MCP App UI
3. UI 在浏览器中加载 RDKit.js（WebAssembly）
4. RDKit 解析 SMILES 并渲染 2D SVG 结构图
5. 在客户端计算分子描述符（MW、LogP、TPSA 等）
6. 所有内容都显示在聊天中的沙盒 iframe 内

使用 basic-host 测试

ext-apps 仓库包含用于 MCP App 开发的测试宿主：

# Terminal 1 — run ChemCP in HTTP mode
npm run serve:http

# Terminal 2 — run the test host
git clone https://github.com/modelcontextprotocol/ext-apps.git
cd ext-apps/examples/basic-host
npm install
SERVERS='["http://localhost:3001/mcp"]' npm start
# Open http://localhost:8080

---

链接

• npm 包
• MCP Registry
• MCP Apps 文档
• RDKit.js
• ChemIllusion — 用于更复杂的分子交互