MCP Server Hands On

🚀 MCP サーバーの実践的なハンズオン

近年、生成型人工知能の発展速度は非常に速く、学んだ知識が短期間で陳腐化するという問題が生じています。このような急速に変化する時代において、重要なのは特定の技術や知識そのものではなく、物事を理解、分解、論理的に再構築する思考方法と手法です。

今回のハンズオンでは、プログラミングを通じてこのような思考方法を身につける機会を提供することを目指しています。プログラミングは、複雑な問題を小さな部分に分解し、解決策を構築する過程であり、このようなプロセスを体験するのに最適です。このハンズオンを通じて、問題解決のための汎用的なスキルを習得することができれば幸いです。

今回作成する内容

今回は、有志によって開発されたポケモン情報を取得するオープンソースプロジェクト PokéAPI を使用して、MCP サーバーを作成します。ポケモンの ID（1 - 151）を入力すると、名前とゲーム内の flavor テキストを取得できます。

⚠️ 重要提示

これは有志によって開発された API です。API を過度に呼び出さないようにし、関係者の権利を侵害しないように注意してください。

ハンズオンの目標

1. MCP/MCP サーバーの基本概念を理解する
2. JavaScript/TypeScript の構文を理解する
3. コードを書いてサーバーを実行し、ツールの追加と公開の流れを習得する

進行方法

• 合計 6 つのステップに分かれており、段階的に小さな成果を達成します
• いつでもチャットや口頭での交流を通じて問題を解決します

自己学習時に習得すべき重要な知識

• JavaScript/TypeScript の基本構文と型システム
• Node.js 環境でのスクリプト実行の経験
• コマンドライン（CLI）の基本操作
• HTTP リクエスト（GET/POST）の仕組み

📚 目次

以下は、添付の README.md をもとに作成した目次です：

1. 第 1 ステップ：MCP/MCP サーバーとは？何ができる？
   1.1 MCP（モデルコンテキストプロトコル）
   1.2 MCP サーバー
   1.3 なぜ MCP が必要なのか？
   1.4 一般的なアーキテクチャ
   1.5 MCP サーバーの用途

2. 第 2 ステップ：Node.js モジュールと CLI の基本概念
   2.1 Node.js モジュール
   2.2 コマンドラインインターフェイス（CLI）

3. 第 3 ステップ：Node.js と TypeScript を使用して MCP サーバーを作成する
   3.1 プロジェクトを初期化し、依存関係をインストールする
   3.2 TypeScript を設定する
   3.3 基本的なサーバーコードを書く

4. 第 4 ステップ：HTTP リクエスト機能を統合する
   4.1 Axios を使用して HTTP リクエストを処理する
   4.2 PokéAPI との通信を実装する

5. 第 5 ステップ：MCP サーバーを設定して実行する
   5.1 環境変数を設定する
   5.2 サーバーを起動し、初期テストを行う

6. 第 6 ステップ：Claude Desktop から MCP サーバーに接続する
   6.1 Claude Desktop の設定を開く
   6.2 開発者設定ファイルを編集する
   6.3 MCP サーバーを登録する
   6.4 Claude Desktop で機能を検証する

📖 補足説明

• JavaScript/TypeScript
  Web やサーバーサイドのスクリプト言語です。TypeScript は JavaScript の型付きバージョンです。
• Node.js
  サーバー上で動作する JavaScript スクリプトの実行環境です。
• CLI（コマンドラインインターフェイス）
  テキストベースの操作インターフェイスで、コマンドを直接入力して操作できます。
• HTTP リクエスト
  クライアントがサーバーに送信するリクエストです。主な HTTP メソッドには、GET（取得）と POST（送信）があります。