ChemCP

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

RDKit.js を使用して、SMILES 表記からインタラクティブな2D分子構造図を描画する MCP アプリ です。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 の設定ファイルを開きます：

OS	パス
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（Web）— 実験的

⚠️ 実験的：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. Settings > Connectors に移動します
4. Add custom connector をクリックします
5. トンネルの URL に /mcp を付けて貼り付けます（例：https://random-name.trycloudflare.com/mcp）
6. 「ChemCP」などの名前を付けます
7. 保存します

Step 4: 試してみる

新しいチャットを開始し、Claude に分子を表示するよう依頼します。

• 「イブプロフェンの構造を表示して」
• 「ベンゼンはどのような形ですか？レンダリングしてください」
• 「SMILES をレンダリングして：CN1C=NC2=C1C(=O)N(C(=O)N2C)C」

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

---

プロンプトの例

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

プロンプト	動作
「アスピリンを表示して」	アスピリンの 2D 構造と特性をレンダリングします
「SMILES をレンダリングして：CCO」	SMILES コードからエタノールをレンダリングします
「テストステロンの構造は？」	Claude が SMILES を提示し、レンダリングします
「カフェインとテオブロミンの構造を比較して」	2 つの分子を並べてレンダリングします

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 を使用してください。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 の bin エントリーポイント
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 — より複雑な分子の操作に使用できます