Cursor で ExodeUI MCP サーバーをセットアップする方法
Cursor (および Claude Code) での ExodeUI MCP サーバーの段階的なセットアップ: mcp.json エントリ、ツールの確認、最初のプロンプト、および安全なレビュー。
核心
npx で claude-exode-mcp パッケージを実行するエントリをプロジェクトの .cursor/mcp.json に追加し、Cursor をリロードして、exode サーバーとそのツールが Cursor の MCP 設定に表示されることを確認します。次に、Cursor のエージェントに平易な言語でアニメーションを作成または編集するよう依頼し、出荷前に ExodeUI エディタで結果を確認します。
必要なもの
結果をエディターで開きたい場合は、Cursor、Node.js (npx が利用可能)、および ExodeUI アカウント。 ExodeUI MCP サーバーは、npm で claude-exode-mcp として公開されます。 npx を介してローカルで実行されるため、他に手動でインストールするものは何もありません。
ステップ 1: サーバーを mcp.json に追加する
Cursor は、mcp.json ファイルからカスタム MCP サーバーを読み取ります。プロジェクト レベルのファイルは、リポジトリの .cursor/mcp.json にあります。ローカル コマンド ライン サーバーは、コマンドと引数とともにタイプ「stdio」を使用します。 ExodeUI のエントリは、claude-exode-mcp パッケージを使用して npx を実行します (以下のコード ブロックを参照)。
ステップ 2: ツールをリロードして確認する
Cursor をリロードし、その MCP 設定を開き、exode サーバーが実行されていて、そのツールがリストされていることを確認します。起動に失敗した場合は、npx がターミナルで動作すること、および Node.js のバージョンが最新であることを確認してください。
ステップ 3: プロンプト
平易な言葉で質問し、状態や感情について具体的に述べてください。
- 「オン状態とオフ状態のトグルと、その間の柔らかいスプリングを作成します。」
- 「保存ボタンに読み込み状態を追加し、軽く脈動してから成功チェックを行います。」
- 「成功アニメーションを高速化し、オーバーシュートを減らします。」
代わりに Claude Code を使用する
Claude Code では、1 つのコマンド claude mcp add exode npx -y claude-exode-mcp で同じサーバーを追加します。 Claude Code は、.mcp.json ファイルでのプロジェクト レベルの構成もサポートしています。
発送前にレビューしてください
ファイルを編集できるエージェントでも間違いを犯す可能性があります。変更を比較できるように .exode ファイルを Git に保存し、結果を ExodeUI エディタで開いてタイミングとすべての状態を確認し、モーションを減らした動作をテストします。
実装コード例
// .cursor/mcp.json
{
"mcpServers": {
"exode": {
"type": "stdio",
"command": "npx",
"args": ["-y", "claude-exode-mcp"]
}
}
}
# Claude Code alternative
claude mcp add exode npx -y claude-exode-mcp覚えておきたい原則
- サーバーは npm パッケージ claude-exode-mcp で、npx で実行されます。
- Cursor で、stdio サーバーとして .cursor/mcp.json に追加します。
- リロードしてツールが MCP 設定に表示されることを確認します
- 状態と感触をプロンプトで示します。その後番号を調整する
- Git にファイルを保存し、エディターで変更を確認する
よくある質問
出典
- claude-exode-mcp — npm
- Model Context Protocol (MCP) — Cursor ドキュメント
- Connect Claude Code to tools via MCP — Claude Code ドキュメント