IDEにTestSprite MCPサーバーをセットアップする方法
Zeshi Du
これは数分で完了する一度限りのセットアップです。完了すれば、IDEのチャットに一文を入力するだけでプロジェクトのテストが実行できるようになります。実際のセットアップ手順、各ステップの内容、接続に問題が生じた場合の確認事項を以下で説明します。
MCPサーバーが実際に行うこと
TestSprite MCPサーバーは、AIを搭載したIDEにおけるTestSpriteの開発者向けインターフェースです。テスト自体を実行するわけではなく、IDEのAIアシスタントがチャットから直接TestSpriteのテストエンジンを呼び出せるようにする橋渡し役です。設定が完了すれば、「このプロジェクトをTestSpriteでテストしてください」と入力するだけで、検出 → 計画 → 生成 → 実行 → 分析 → 修復 → レポートの全ループが、エディタを離れることなく実行されます。
Model Context Protocolに対応しているため、Cursor、Claude Code、Windsurf、VS Code、GitHub Copilot、Traeをサポートしています。
ステップ1：TestSpriteアカウントを作成する
testsprite.comでサインアップしてください。無料プランはクレジットカード不要で、毎月自動更新される150クレジットが付与されます。有料プランを検討する前に、セットアップを実際に試すのに十分な量です。
ステップ2：APIキーを取得する
どのインストール方法を選んでも、まずTestSprite APIキーが必要です。サインアップ後、アカウントダッシュボードで確認できます。次のステップでIDEのMCP設定に貼り付けるので、手元に準備しておいてください。
ステップ3：MCPサーバーパッケージをインストールする
MCPサーバーはnpmパッケージとして配布されています。インストール方法は2つあります：
# グローバルインストール（推奨）
npm install -g @testsprite/testsprite-mcp@latest
# グローバルインストールなしで直接実行する場合
npx @testsprite/testsprite-mcp@latest
グローバルインストールは、実行のたびにパッケージを再解決する手間がなく、より安定した方法として一般的に推奨されます。ただし、グローバルインストールを避けたい場合はnpxでも問題なく動作します。
ステップ4：IDEのMCP設定にTestSpriteを追加する
IDEによって設定ファイルの場所やメニューのパスは若干異なりますが、設定内容はほぼ同じです。多くのIDEでは、MCPの設定ファイルに以下のようなエントリを追加します：
{
"mcpServers": {
"TestSprite": {
"command": "npx",
"args": ["@testsprite/testsprite-mcp@latest"],
"env": {
"API_KEY": "your-api-key"
}
}
}
}
CursorまたはClaude Codeの場合：エディタのエージェントパネルのドロップダウンからMCPストアを開き、「Manage MCP Servers」→「View raw config」の順に選択して、上記の設定をmcp_config.jsonに貼り付け、your-api-keyをステップ2で取得したキーに置き換えてください。なお、Claude CodeでこのようにインストールするとTestSpriteのスコープは現在のプロジェクトディレクトリに限定されます。複数のプロジェクトディレクトリで作業する場合は、各ディレクトリで再度追加するか、Claude Code公式のMCPドキュメントに従ってグローバルに設定する必要があります。
VS Codeの場合：形式が若干異なり、mcpServersの代わりにserversキーを使用します：
{
"servers": {
"testsprite": {
"command": "npx",
"args": ["-y", "@testsprite/testsprite-mcp@latest"],
"env": { "API_KEY": "your-api-key" }
}
}
}
Traeの場合：AI Sidebar > AI Managementに移動し、MCP > Add > Add from Marketplaceを選択して「TestSprite」を検索すると、設定ファイルを手動で編集することなく直接追加できます。
ステップ5：サーバーを起動する
設定を保存したら、設定ファイル内のTestSprite MCPエントリの横にある起動ボタンをクリックしてください（CursorおよびClaude Codeの場合）。お使いのクライアントが新しいサーバーを反映するためにIDEの再起動が必要な場合は、IDEを再起動してください。接続が完了すると、IDEのサーバー一覧にTestSpriteがアクティブなMCPサーバーとして表示されます。
ステップ6：アプリが起動していることを確認する
TestSpriteはソースファイルではなく、実際に動作しているアプリケーションをテストします。最初のセッションを開始する前に、開発サーバー（またはステージング環境）が実際に起動していることを確認してください：
# フロントエンド（React、Vue、Angularなど）
npm run dev # 通常はポート 3000、5173、または 8080
# バックエンド（Node.js、Pythonなど）
node index.js # 通常はポート 8000、3001、または 4000
python app.py # Flask/FastAPI、通常はポート5000または8000
ステップ7：実際のプロンプトで接続を確認する
IDEのAIアシスタントパネルで新しいチャットを開き、「Help me test this project with TestSprite.」と入力してください。すべて正しく接続されていれば、ブートストラップステップが開始され、フルパイプラインが実行される前にプロジェクトの詳細を確認するためのTesting Configurationページがブラウザで開きます。
接続できない場合
まず以下の点を確認してください：Node.jsのバージョンが互換性を満たしているか（node --versionを実行して確認してください。古いバージョンではnpxコマンドがエラーなく失敗することがあります）、APIキーに余分な空白が含まれずに貼り付けられているか、また設定保存後にIDEを再起動またはリロードしたかどうかです。ほとんどのクライアントはMCPサーバーの変更をリアルタイムで反映しないため、再起動が必要です。
複数プロジェクトにまたがる作業
複数のコードベースを頻繁に切り替える場合は、TestSpriteをプロジェクトごとにスコープするか、グローバルに利用可能にするかを最初に決めておくことをお勧めします。必要な場面で気づくより、事前に決めておく方が確実です。Claude Codeでは、上記の設定を行うとサーバーのスコープが現在のプロジェクトディレクトリに限定されるため、2つ目や3つ目のプロジェクトにはそれぞれ設定エントリを追加する必要があります（Claude Code公式のMCPドキュメントに従ってグローバルスコープで設定する場合を除く）。CursorやWindsurfも同様の挙動を示す傾向があります。単一の設定ですべての作業をカバーできると思い込む前に、お使いのクライアントのMCP設定がワークスペースレベルかユーザーレベルかを確認してください。
個人開発者向けの現実的なデフォルト設定：所有するすべてのプロジェクトを一度に設定しようとするのではなく、実際に使い始めるタイミングでプロジェクトごとに設定することをお勧めします。5分程度のセットアップコストは低く、必要に応じて設定しても大きな手間にはなりません。
初回実行時に起こること
あるプロジェクトで初めてTestSpriteを実行するセッションは、その後のセッションより時間がかかる傾向があります。これはTestSpriteがアプリの構造を探索し、キャッシュされた情報ではなく、初めて内部PRDを構築するためです。初回の実行が予想より長くかかっても、設定に問題があるとは限りません。問題を疑う前に、ブートストラップと探索ステップが完了するまで数分お待ちください。
まとめ
MCPサーバーのセットアップは、APIキーさえあれば5分で完了します。npmパッケージをインストールし、IDEのMCP設定に構成を追加して、最初のプロンプトを入力する前にアプリが起動していることを確認するだけです。あとは、コードを書くときに使っているチャットウィンドウに一文入力するだけで、プロジェクトのテストが始まります。まだアカウントをお持ちでない方は、TestSpriteの無料プランから始めて、上記の手順に従ってください。