mcpField
M
MCP Server Hands on

MCP Server Hands on

ローカル
github.com/KeisukeKudo開発ツール078 週間前に更新

MCP Server Hands on について

プログラミング初学者向けに、PokéAPIからポケモンの名前とゲーム内テキストを取得するMCPサーバーの作り方を学ぶ教材です。概念からツール実装、Claude Desktopへの接続までを6段階で扱います。

主な機能

  1. 016段階のハンズオン
  2. 02MCPサーバーの基礎解説
  3. 03PokéAPIによるポケモン検索
  4. 04MCPツールの実装と公開
  5. 05Claude Desktopへの接続

活用シーン

  1. 01初学者によるMCPサーバーの学習
  2. 02JavaScript/TypeScriptとNode.jsの練習
  3. 03PokéAPI検索ツールの作成

MCP 対応

MCPサーバーの仕組みを解説し、IDからポケモン名とゲーム内テキストを取得するサーバーの実装を案内します。Claude Desktopへの接続方法も扱います。

設定

ローカルサーバーの設定はどのクライアントでも共通です。コピーしてクライアントの MCP 設定ファイルに貼り付けてください。

インストール方法は未掲載です

このサーバーのパッケージやリモートエンドポイントはまだ取得できていません。プロジェクトの README の手順に従ってください。

リポジトリ

ツール

ツール一覧はまだ取得されていません

ローカルサーバーのツールはマシン上で起動して初めて取得できます。メンテナーはまだツール一覧を提供していません。

詳細

プロジェクトの README より

MCP Server Hands on

2025 年 4 月 にソウルドアウト株式会社東京オフィスで開催された社内勉強会の資料です。

背景と目的

近年、生成 AI の進歩は非常に速く、学んだ知識が短期間で陳腐化してしまうことが課題となっています。このような変化の激しい時代において重要なのは、特定の技術や知識そのものではなく、物事を「理解」、「分解」、「論理的に再構築」する考え方やアプローチを身につけることです。

本ハンズオンでは、プログラミングを通じてそのような考え方を獲得するきっかけを提供することを目指しています。プログラミングは、複雑な問題を小さく分解し、解決策を構築するプロセスを体験するのに最適な手段です。このハンズオンを通じて、問題解決のための普遍的なスキルを身につけるきっかけになれば嬉しいです。

今回作成するもの

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

警告


あくまでも有志が作成した API です。必要以上に API を実行したり。権利者の権利を侵害するような用途には使わないようにしてください。

ハンズオンのゴール
  1. MCP サーバーの仕組みをなんとなく理解する
  2. JavaScript/TypeScript の構文をなんとなく理解
  3. コードを書きながらサーバーを動かし、ツールを追加・公開する流れを習得する
進め方
  • 全 6 ステップで、小さな成果物を完成させながら進行
  • 疑問はチャットや口頭で随時解消
自己学習する際に押さえておくといいかもしれない知識
  • JavaScript/TypeScript の基本構文・型システム
  • Node.js 環境でのスクリプト実行経験
  • コマンドライン(CLI)の基本操作
  • HTTP リクエスト(GET/POST)の仕組み

目次

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

  1. Step 1: MCP/MCP サーバーとは何か?どんなことができるのか?
    1.1 MCP(Model Context Protocol)
    1.2 MCP サーバー
    1.3 なぜ MCP が必要か?
    1.4 一般的なアーキテクチャ
    1.5 MCP サーバーの活用

  2. Step 2: Node.js モジュールの説明とインストール
    2.1 Node.js モジュール・ライブラリとは?
    2.2 package.json の内容解説
    2.3 ハンズオンに必要なモジュールをインストールする

  3. Step 3: import 構文の解説
    3.1. 使用するモジュールの解説

  4. Step 4: MCP サーバーのツール実装
    4.1 サーバーのインスタンス化
    4.2 ツール(エンドポイント)の定義
    4.3 PokéAPI からデータを取得
    4.4 日本語のフレーバーテキストと名前を抽出
    4.5 レスポンス形式の組み立て
    4.6 サーバー起動
    4.7 ビルドと動作確認

  5. Step 5: ツールのメタ情報の定義
    5.1 メタ情報を定義する意味
    5.2 ツール一覧要求(ListTools)用のハンドラを登録
    5.3 定義した情報を確認する

  6. Step 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 リクエスト
    クライアントからサーバーへの要求。主に GET(取得)と POST(送信)がある。

コメント

MCP は初めてですか?

プロトコルの概要から最初のサーバーの導入まで、よくある疑問にまとめて答えます。

AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。