CodeSandbox MCP Server
クラウドIDEのCodeSandboxをClaudeから直接操作・管理
npx @codesandbox/mcp-server概要
CodeSandbox MCP Serverの設定方法と使い方。
ブラウザベースのクラウド開発環境「CodeSandbox」をClaudeから操作できるMCPサーバー。
サンドボックスの作成・管理、コードの編集、テンプレートの利用、実行環境の操作が可能。
ClaudeとCodeSandboxのMCP連携により、コードのプロトタイピングやデモ環境の構築を自然言語で素早く実行できる。
チームコラボレーションも強化できる。
料金・APIキー情報
APIキー
🔑 必要🔑 APIキーの取得方法
- 1
CodeSandbox（https://codesandbox.io）にログインする
- 2
右上のアバターアイコンから「Account Settings」を開く
- 3
「API Tokens」セクションに移動して「Generate New Token」をクリックする
- 4
トークン名を入力して生成されたAPIキーをコピーして環境変数に設定する
こんな使い方ができます
ClaudeにCodeSandboxで新しいReactプロジェクトを自動作成させてプロトタイピングを高速化できる
既存のサンドボックスのコードをClaudeに修正・改善させてブラウザ上でリアルタイム確認できる
Claudeにテンプレートからサンドボックスを生成させてコードデモ環境を素早く準備できる
CodeSandboxのサンドボックス一覧をClaudeで管理してプロジェクトの整理・共有を効率化できる
セットアップ手順
- 1
CodeSandboxにログインしてAccount SettingsからAPIトークンを生成する
- 2
claude mcp add codesandbox -e CODESANDBOX_API_KEY=your-key -- npx -y @codesandbox/mcp-server
設定ファイル
コピー前に確認
CodeSandboxアカウント、APIキーの取得が必要。Node.jsのインストールが必要
claude mcp add codesandbox -e CODESANDBOX_API_KEY=your-codesandbox-api-key -- npx -y @codesandbox/mcp-server