Chemcp

🚀 ChemCP - 分子ビューアMCPアプリ

MCPアプリの一種で、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アプリをサポートするホストが必要です

⚠️ 重要提示

Claude DesktopはMCPアプリを完全にサポートしています。Claude.aiのカスタムコネクタは実験的なもので、CSPの制限によりRDKit.jsの読み込みが妨げられることがあります。Claude.aiで「RDKit.js failed to load」と表示された場合は、Claude Desktopを使用してください。

Claude Desktopでのセットアップ

Claude DesktopはローカルのMCPサーバーをデフォルトでサポートしています。トンネルやリモートホスティングは必要ありません。

ステップ1: ChemCPのインストール

npm install -g chemcp

インストールを確認します。

chemcp --help

（これによりMCPサーバーが標準入出力で起動します。Ctrl+Cで停止できます。）

ステップ2: Claude Desktopの設定

Claude Desktopの設定ファイルを開きます。

mcpServersセクションにChemCPを追加します。

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

💡 使用建议

既に他のMCPサーバーが設定されている場合は、既存の"mcpServers"オブジェクト内に"chemcp"エントリを追加してください。

ステップ3: Claude Desktopの再起動

Claude Desktopを終了して再度開きます。チャット入力欄の下部にあるハンマーアイコンをクリックすると、ChemCPがMCPツールに表示されるはずです。

ステップ4: 試してみる

次のようなメッセージを入力します。

• "Show me the molecule for aspirin"
• "Render the structure of caffeine"
• "Display SMILES: CC(=O)Oc1ccccc1C(=O)O"

Claudeがrender_moleculeツールを呼び出し、会話内にインタラクティブな分子ビューアが表示され、2D構造と分子特性が表示されます。

Claude.ai（Web）でのセットアップ（実験的）

⚠️ 重要提示

Claude.aiのカスタムコネクタは実験的なMCPアプリサポートです。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. Settings > Connectorsに移動します。
4. Add custom connectorをクリックします。
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"

インタラクティブな分子ビューアがチャット内に直接レンダリングされます。

💻 使用例

サンプルプロンプト

接続後、次のプロンプトを試してみてください。

サンプルSMILES

トラブルシューティング

"I don't see the molecule viewer, just text"

インタラクティブなUIはMCPアプリをサポートするホストでのみ機能します。

• Claude Desktop（最新バージョン）
• Claude.ai（Web、カスタムコネクタ付き）

Claude Code（CLI）や他のMCPクライアントでMCPアプリをサポートしていない場合は、ツールはSMILESデータをテキストとして返しますが、視覚的なレンダリングは表示されません。

"Tool not found" または ChemCPがリストに表示されない

• Claude Desktop: 設定ファイルを編集した後にアプリを再起動したことを確認してください。ターミナルでnpx chemcpが動作することを確認してください。
• Claude.ai: トンネルがまだ実行中で、コネクタURLが/mcpで終わっていることを確認してください。

"RDKit.js failed to load from CDN"

Claude.aiのカスタムコネクタ: カスタムコネクタを使用する場合、CSPの制限によりRDKit.jsの読み込みが妨げられることがあります。解決策: Claude Desktopを使用してください。Claude DesktopはMCPアプリを完全にサポートしています。

Claude Desktop: RDKit.jsが読み込めない場合は、通常以下の原因が考えられます。

• インターネット接続がない（RDKit.jsはunpkg.comから読み込まれます、約8MB）
• 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モード

プロジェクト構造

動作原理

1. ClaudeがSMILES文字列を含むrender_moleculeツールを呼び出します。
2. サーバーがSMILESをMCPアプリUIに返します。
3. UIがブラウザでRDKit.js（WebAssembly）を読み込みます。
4. RDKitがSMILESを解析し、2D SVG構造図をレンダリングします。
5. 分子記述子（分子量、LogP、TPSAなど）がクライアント側で計算されます。
6. すべてがチャット内のサンドボックス化されたiframe内に表示されます。

basic-hostを使ったテスト

ext-appsリポジトリには、MCPアプリ開発用のテストホストが含まれています。

# ターミナル1 — ChemCPをHTTPモードで実行
npm run serve:http

# ターミナル2 — テストホストを実行
git clone https://github.com/modelcontextprotocol/ext-apps.git
cd ext-apps/examples/basic-host
npm install
SERVERS='["http://localhost:3001/mcp"]' npm start
# http://localhost:8080を開く

リンク

• npmパッケージ
• MCPレジストリ
• MCPアプリドキュメント
• RDKit.js
• ChemIllusion — より複雑な分子インタラクション用