これはMCPクライアント入門使用チュートリアルシリーズの第四弾: 《MCPクライアント入門使用チュートリアル - Traeのインストールと設定》です。

本チュートリアルでは、Trae IDEのインストール方法とMCPサービスの設定方法を紹介し、TraeとMCPの組み合わせ使用を素早く習得し、AIプログラミングの効率を向上させるのをお手伝いします。

一、MCPとTraeとは何か

1.1 MCPの概要

MCP（Model Context Protocol）は、Anthropic社が開発したオープン標準プロトコルで、大規模言語モデル（LLMs）が外部データソースやツールとやり取りするための標準化されたインターフェースを提供することを目的としています。MCPの主要な機能は以下の通りです。

• ツール呼び出し（Tools） ：AIモデルが外部サービスやAPIを呼び出せるようにします。
• リソースアクセス（Resources） ：構造化および非構造化データへのアクセス機能を提供します。
• プロンプトテンプレート（Prompts） ：事前定義されたワークフローで、繰り返しのタスクを簡素化します。

MCPを通じて、AIモデルは学習データに制限されることなく、最新の情報をリアルタイムで取得し、様々なツールやサービスを呼び出し、より複雑なタスクを実行できます。

1.2 Traeの概要

Trae（発音：/treɪ/）は、バイトドングが開発したAI駆動の統合開発環境（IDE）で、Cursorに似た、中国語に対応した強力なプログラミングツールです。AIと深く統合されており、インテリジェントな質問応答、コード自動補完、エージェントベースのAI自動プログラミング機能を提供します。TraeはWindowsとmacOSオペレーティングシステムをサポートし、現在は無料で利用でき、ClaudeやGPT - 4oなどの先進的なAIモデルが組み込まれています。

最新バージョンのTraeはMCP機能をサポートしており、組み込みのMCPマーケットを通じて、様々なMCPサービスを素早く追加および設定でき、IDEの機能と柔軟性が大幅に向上します。

二、Traeのインストール手順

2.1 Traeのダウンロード

1. Traeの公式サイトにアクセスします：https://www.trae.com.cn/
2. 公式サイトでは自動的にお使いのオペレーティングシステムを検出し、対応するダウンロードボタンを表示します。

手動で選択する場合は、すべてのダウンロードオプションをクリックして、お使いのオペレーティングシステムに適したバージョンを選択できます。

2.2 Traeのインストール

ダウンロードが完了したら、インストールパッケージをダブルクリックし、指示に従ってインストールを行います。

1. ライセンス契約に同意します。
2. インストール場所を選択します（デフォルトはCドライブのプログラムフォルダです）。
3. デスクトップショートカットを作成するかどうかを選択できます。
4. 「インストール」をクリックして、インストールプロセスを開始します。

2.3 初期設定

インストールが完了したら、Traeを起動すると、初回起動時に初期設定ページに入ります。

1. 「開始」ボタンをクリックして、初期設定フローに入ります。

2.テーマを選択します：ダーク、ライト、ダークブルーが選択肢としてあり、個人の好みに合わせて選択できます。

3.表示言語を選択します：簡体字中国語とEnglishが選択肢としてあり、お使い慣れた言語を選択してください。

4.「続ける」ボタンをクリックして、テーマと言語の選択を完了します。

2.4 設定のインポート（オプション）

以前にVS CodeやCursorを使用していた場合、既存の設定をインポートすることができます。

1. 「VS Codeからインポート」または「Cursorからインポート」ボタンをクリックします。
2. システムが対応するIDEからプラグイン、設定、ショートカットキーなどの情報を自動的に取得します。

2.5 アカウントへのログイン

TraeのAI機能を使用するには、アカウントにログインする必要があります。

1. 携帯電話番号を使用してTraeにログインします。
2. 認証フローを完了します。
3. ログインが成功すると、TraeのAIサービスを利用できます。

三、TraeでのMCPサービスの設定

3.1 Traeを最新バージョンに更新する

MCP機能は比較的新しいバージョンに追加されているため、Traeが最新バージョンであることを確認してください。

1. Traeを開き、左下の設定アイコンをクリックします。
2. 「更新を確認」を選択します。
3. 更新がある場合、指示に従ってアップグレードを完了します。

3.2 MCP設定ページにアクセスする

1. 左下の設定アイコンをクリックします。
2. 設定メニューで「MCP」オプションを選択します。

3.3 MCPマーケットを閲覧する

MCP設定ページに入ると、MCPサーバー管理画面が表示されます。

1. 「追加」ボタンをクリックして、MCPマーケットに入ります。
2. マーケットで利用可能な様々なMCPサービスを閲覧します。

現在、TraeのMCPマーケットでは、ウェブページ自動化、データ処理、コード生成など、さまざまな分野の数百種類のサービスが提供されています。

3.4 MCPサービスを追加する

方法一、MCPマーケットから直接追加する

Puppeteer（ウェブページ自動化ツール）を追加する場合を例に説明します。

1. MCPマーケットでPuppeteerサービスを見つけます。
2. サービス名をクリックして詳細情報を確認します。
3. 「+」ボタンをクリックして、このサービスを追加します。

「OK」をクリックすると、追加が完了します。ほとんどのサービスでは、Traeが自動的に設定を完了するため、手動での介入は必要ありません。

追加が成功すると、「追加済み」というメッセージが表示されます。

方法二、MCPサービスを手動で設定する

特定の設定が必要なMCPサービス（APIキーが必要なサービスなど）の場合は、手動で設定する必要があります。

1. MCPマーケットで設定が必要なサービスを見つけます。
2. 「+」ボタンをクリックし、「手動設定」を選択します。

3.設定ウィンドウに、APIキー、サービスアドレスなどの必要な情報を入力します。

4.「確認」をクリックして設定を完了します。ここで説明しておく必要がありますが、TraeのMCPマーケットに付属のサーバーがあなたのニーズを満たさない場合は、サードパーティのマーケットからMCPサービスのJSONパラメータを取得し、コードフィールドをコピーして貼り付けることができます。

たとえば、AIbaseでfetchを使用してウェブページを取得するサービスが必要な場合は、魔塔のMCP広場からJSONフィールドを取得できます。

その後、フィールドパラメータをコピーして貼り付け、「確認」をクリックすると、追加が成功します。

3.5 MCPサービスの状態を確認する

追加が完了したら、MCPサーバーリストに戻り、サービスの状態が「使用可能」であることを確認します。

この時点で、追加したMCPサービスはTraeの組み込みインテリジェントエージェントに正常に追加されており、ダイアログで使用できます。

同じ方法で、AIbaseでは複数のMCPサービスを設定しています。音声生成「minmax」、画像生成「fal - ai - iamge」などです。次に、TraeでMCPサービスを使用する方法を引き続き説明します。

四、MCPサービスの使用方法

4.1 インテリジェントエージェントを選択する

MCPサービスを設定した後、これらのサービスを呼び出すには、インテリジェントエージェントを有効にする必要があります。

Traeのダイアログパネルで、MCP機能を持つインテリジェントエージェントを選択できます。

1. TraeのAIパネルを開き、ドロップダウンメニューから「Builder with MCP」インテリジェントエージェントを選択します。選択すると、現在利用可能なMCPツールのリストが表示されます。

2.ドロップダウンメニューから「インテリジェントエージェントを作成」を選択することもできます。

インテリジェントエージェントを作成するページで、名前、指示語を入力し、呼び出す必要のあるMCPツールを選択します。これにより、インテリジェントエージェントはあなたの指示に従って適切なMCPツールを自動的に選択して呼び出すことができます。

2.使用する必要のあるMCPサービスを選択します。

4.3 実例デモ

AIbaseでは、インテリジェントエージェントを作成してウェブページ取得と音声生成のMCPサービスを呼び出す例をデモンストレーションします。

1. 音声アシスタントインテリジェントエージェントを作成し、ダイアログボックスにインテリジェントエージェントのプロンプトを入力し、使用する必要のあるウェブページ取得fetchと音声生成minimaxのMCPサービスにチェックを入れます。

「URLの内容を100文字の文案にまとめ、そのテキストを音声に変換する」

2.次に、Traeのチャットウィンドウで@音声アシスタントインテリジェントエージェントを選択し、URLページを入力すると、インテリジェントエージェントが自動的にfetch、minimaxの2つのサービスを呼び出します。まずページの内容をまとめ、次に音声を生成します。

たとえば、AIbaseが「https://www.chinaz.com/ainews/17477.shtml」このリンクを入力すると、インテリジェントエージェントが自動的に100文字で要約します。

「ナノAIがMCP万能ツールボックスを発表。100以上のサービスと18個のAPIキーがプリセットされ、マルチモーダル生成と深度検索をサポート。MCP設定プロセスを簡素化。このツールはコンテンツ作成、企業自動化、教育などの分野に適し、現在は内部テスト段階。」

最後に、100文字の文案が自動的に音声に変換され、以下のような効果が得られます。

t2a_ナノAI発表MCP万_20250424_145044.mp3

4.5 上級：Figma MCPサービスを追加する

Figma MCPサービスは、開発者がデザイン原稿から迅速にコードに変換するのに役立ちます。

1. MCPマーケットでFigma AI Bridgeを見つけます。
2. 追加をクリックし、「簡単設定」を選択します。
3. Figmaの個人ホームページで個人アクセストークンを生成します（ページの指示に従って操作すれば取得できます）。
4. トークンを設定画面に貼り付け、「確認」をクリックします。

設定が完了したら、以下の手順で使用できます。

1. 「Builder with MCP」インテリジェントエージェントを選択します。
2. 「私のFigmaデザイン原稿からフロントエンドコードを生成する」などの指示を入力します。
3. インテリジェントエージェントがFigmaのデザイン情報を取得し、対応するコードを生成します。

五、MCPの一般的な問題と解決策

5.1 MCPサービスに接続できない

問題の説明 ：MCPサービスを追加した後、状態が「オフライン」または「接続できません」と表示されます。

解決策 ：

1. ネットワーク接続が正常であることを確認します。
2. MCPサービスの設定が正しいことを確認します。
3. Traeアプリケーションを再起動してみます。
4. ファイアウォール設定を確認し、MCPサービスの通信がブロックされていないことを確認します。

5.2 MCPサービスの呼び出しが失敗する

問題の説明 ：MCPサービスを使用する際にエラーが発生するか、応答がない場合があります。

解決策 ：

1. 「自動ツール呼び出し」が有効になっていることを確認します。
2. 使用する指示が明確かつ具体的であることを確認します。
3. 他のAIモデル（例：DeepSeek - v3）を試してみます。
4. 複雑なタスクの場合は、複数の単純な手順に分解して試してみます。

5.3 MCPサービスの更新が必要である

問題の説明 ：MCPサービスのバージョンが古く、機能が制限されています。

解決策 ：

1. MCPサービスリストで更新が必要なサービスを見つけます。
2. サービスの右側にある「更新」ボタンをクリックします。
3. 指示に従って更新プロセスを完了します。

六、まとめと展望

6.1 現在のMCPの制限

MCPは強力な機能を持っていますが、現在はいくつかの制限があります。

1. 利用可能なMCPサービスの数が限られています（現在、Traeに付属しているのは約100以上です）。
2. 異なるAIモデルがMCPをサポートする程度が異なります。
3. 複雑なタスクの実行成功率はまだ向上の余地があります。
4. 特定の分野のMCPサービスはまだ開発されていません。

6.2 MCPの将来の発展

MCPはAIと外部世界とのやり取りの標準プロトコルとして、将来的な発展の可能性が広がっています。

1. より多くのサードパーティ開発者がMCPエコシステムに参加するでしょう。
2. サービスの種類と質が継続的に向上します。
3. AIモデルがMCPを理解し、使用する能力が強化されます。
4. ユーザーが独自のMCPサービスを作成することがより簡単になります。

6.3 ベストプラクティスの提案

MCPの可能性を最大限に引き出すには、以下のことをおすすめします。

1. Traeを常に最新バージョンに保ちます。
2. さまざまなAIモデルを試して、特定のタスクに最適なモデルを見つけます。
3. 複雑なタスクの場合は、段階的な指示を使用します。
4. 定期的にMCPマーケットを閲覧し、新しいサービスを確認します。
5. コミュニティの議論に参加し、使用経験やテクニックを共有します。

参考資料

1. Trae公式ドキュメント
2. MCPプロトコル仕様
3. Figma APIドキュメント

MCPクライアント入門使用チュートリアルシリーズ

《初心者向けのMCP入門ガイド、この記事を読めば0基礎でMCPサービスの使用方法がわかります》

《MCPクライアント入門使用チュートリアル - Cherry Studioのインストールと設定》

《MCPクライアント入門使用チュートリアル - ChatWiseのインストールと設定》

《MCPクライアント入門使用チュートリアル - Cursorのインストールと設定》

《MCPクライアント入門使用チュートリアル - Traeのインストールと設定》

《MCPクライアント入門使用チュートリアル - Claudeのインストールと設定》