MCP 技術紹介

この章で学ぶこと

Model Context Protocol (MCP) の概要と、実際に MCP サーバー・クライアントを動かして体験します。

MCP とは

MCP (Model Context Protocol) は、AI アプリケーションと外部データソースやツールを接続するためのオープンスタンダードです。

Anthropic 社が提唱し、AI エージェントがさまざまなサービスやデータにアクセスできるようにするための共通プロトコルとして開発されました。

Function Calling との違い

基礎編で学んだ Function Calling と似ていますが、大きな違いがあります。

Function Calling の場合:

ツール定義をクライアントコードに直接記述する
定義を使い回すにはコピペが必要
変更があると全クライアントを修正する必要がある
OpenAI 独自の仕組み

MCP の場合:

ツール定義はサーバー側で管理
同じサーバーを複数クライアントから使える
変更があってもサーバー側だけ修正すればよい
Anthropic提唱、各社が採用する標準プロトコル

一度サーバーを作れば、どのクライアントからも使えるのが MCP の価値です。

MCP の公式リソース

公式ドキュメント

MCP 公式サイト
- https://modelcontextprotocol.io/
Model Context Protocol SDK
- https://modelcontextprotocol.io/docs/sdk

TypeScript SDK

TypeScript/JavaScript で MCP を使いたい場合は、公式の TypeScript SDK が便利です。

TypeScript SDK
- https://github.com/modelcontextprotocol/typescript-sdk

10言語でSDKが提供されています:

TypeScript, Python, Go, Kotlin, Swift, Java, C#, Ruby, Rust, PHP

今回は TypeScript SDK を使ったサンプルで MCP を体験します。

Codespace で MCP を体験してみよう

TypeScript SDK で作ったサンプルが Codespace に用意されています。実際に動かしてみましょう。

環境準備

ターミナルで mcp-example ディレクトリに移動します。

cd mcp-example

依存関係をインストールします。

npm install

コードの中身を見てみよう

mcp-server.ts（MCPサーバー）

エクスプローラから mcp-example/mcp-server.ts をダブルクリックしてエディタで開きます。

このファイルでは以下のことを行っています:

Server でMCPサーバーを作成
ListToolsRequestSchema でツール一覧を返すハンドラを登録
CallToolRequestSchema でツール実行のハンドラを登録
ツール定義（名前、説明、入力スキーマ）と実装が一緒に書かれている

// 利用可能なツール一覧を返すハンドラ
server.setRequestHandler(ListToolsRequestSchema, async () => {
  return {
    tools: [
      {
        name: "add",
        description: "2つの数値を足し算します",
        inputSchema: {
          type: "object",
          properties: {
            a: { type: "number", description: "1つ目の数値" },
            b: { type: "number", description: "2つ目の数値" },
          },
          required: ["a", "b"],
        },
      },
    ],
  };
});

// ツール実行のハンドラ
server.setRequestHandler(CallToolRequestSchema, async (request) => {
  if (request.params.name === "add") {
    const a = Number(request.params.arguments?.a);
    const b = Number(request.params.arguments?.b);
    const result = a + b;

    return {
      content: [{ type: "text", text: `${a} + ${b} = ${result}` }],
    };
  }
});

Function Calling と違って、サーバー側でツール定義が完結しています。

mcp-execute.ts（MCPクライアント - 会話固定版）

次に mcp-example/mcp-execute.ts をダブルクリックしてエディタで開きます。

OpenAI API キーの設定場所

// OpenAI API キー（ここに自分のAPIキーを入力してください）
const OPENAI_API_KEY = "OPENAI_API_KEY";

// OpenAI クライアント初期化
const openai = new OpenAI({
  apiKey: OPENAI_API_KEY,
});

MCP サーバーからツール一覧を取得

const toolsResult = await client.listTools();  // ← サーバーに問い合わせ

Function Calling と違って、クライアント側でツール定義を書きません。サーバーから自動取得します。

ChatGPT API に質問

const response = await openai.chat.completions.create({
  model: "gpt-4o-mini",
  messages: [{ role: "user", content: question }],
  tools: toolsResult.tools.map((tool) => ({ ... })),  // ← サーバーから取得したツールを使う
});

Function Calling のような長いツール定義がないので、プロンプトが少量で済みます。

動作確認（会話固定版）

OpenAI API キーを設定

mcp-execute.ts の先頭部分を編集します。

// OpenAI API キー（ここに自分のAPIキーを入力してください）
const OPENAI_API_KEY = "OPENAI_API_KEY";  // ← ここに API キーを入力

"OPENAI_API_KEY" のダブルクオーテーションは残して OpenAI 社の API キーを入力します。

ファイルを保存します（Ctrl+S / Cmd+S）。

実行してみよう

ターミナルで以下のコマンドを実行します。

npx tsx mcp-execute.ts

以下のような結果が表示されます:

利用可能なツール一覧が表示される
質問「5と3を足してください」が実行される
ChatGPT がツールを選択し、MCP サーバーで実行
結果「5 + 3 = 8」が表示される

自由に質問してみよう（CLI手入力版）

mcp-client.ts は、CLI で自由に質問できるバージョンです。

これは GUI に近い体験で、Claude Desktop や Cline での利用に近く、自分で質問を入力できます。

OpenAI API キーを設定

mcp-client.ts の先頭部分を編集します。

// OpenAI API キー（ここに自分のAPIキーを入力してください）
const OPENAI_API_KEY = "OPENAI_API_KEY";  // ← ここに API キーを入力

ファイルを保存します。

実行してみよう

ターミナルで以下のコマンドを実行します。

npx tsx mcp-client.ts

プロンプトが表示されたら、質問を入力してみましょう。

3+2は？

AI が自動的にツールを呼び出しているのが実感できます。

終了するには Ctrl+C を押してください。

だいたいわかりましたね

ここまでで MCP の基本的な仕組みが理解できました。

サーバー側でツール定義
クライアント側はサーバーに問い合わせるだけ
プロンプトがシンプル

IoT デバイス制御も試してみよう

基礎編で学んだライトオンオフも、MCP サーバー化できます。

mcp-server-iot.ts（IoT制御サーバー）

エディタで mcp-server-iot.ts を開いてみましょう。

このファイルでは以下のことを行っています:

turn_on_light と turn_off_light の2つのツールを登録
コメントに実際の IoT デバイスへの fetch コードが書いてある
今回はシミュレーションで返答のみ

// 実際のIoTデバイスに送信する処理は以下のように書く:
//
// const response = await fetch('https://your-iot-device.example.com/api/light', {
//   method: 'POST',
//   headers: { 'Content-Type': 'application/json' },
//   body: JSON.stringify({ command: 'on' })
// });

mcp-client.ts でIoTサーバーを使う

mcp-client.ts のサーバー指定部分を変更します。

// 【変更前】
const transport = new StdioClientTransport({
  command: "npx",
  args: ["tsx", "mcp-server.ts"],  // ← 足し算サーバー
});

// 【変更後】
const transport = new StdioClientTransport({
  command: "npx",
  args: ["tsx", "mcp-server-iot.ts"],  // ← IoTサーバーに変更
});

ファイルを保存します。

実行してみよう

npx tsx mcp-client.ts

プロンプトが表示されたら:

デバイスをオンにして

ね、違うのが発動したでしょ？いいよね！

同じクライアントコードで、サーバーを切り替えるだけで違うツールが使えます。

Cline のデモ（時間があれば）

Cline は VSCode 拡張機能の AI エージェントで、MCP を完全サポートしています。

Cline とは

VSCode 拡張機能
OpenAI API キー対応
MCP 完全サポート
GUI で AI エージェントが動く

Cline のインストール

VSCode の拡張機能マーケットプレイスで Cline を検索してインストールします（1クリック）。

サイドバーに Cline アイコンが表示されます。

マーケットプレイス:

https://marketplace.visualstudio.com/items?itemName=saoudrizwan.claude-dev

API 設定

Cline の設定画面（⚙️アイコン）から以下を設定します：

API Provider: OpenAI を選択
OpenAI API Key: 基礎編で取得した API キーを入力
Model: gpt-4o を選択（推奨）

最新のモデルでは動作しない場合があるため、gpt-4o を使用してください。

MCP サーバーの登録

Cline の設定画面から MCP Servers セクションを開き、以下の JSON を追加します。

{
  "mcpServers": {
    "addition": {
      "command": "npx",
      "args": ["tsx", "/workspaces/wktn-2025-chatgpt-workshop-codespace/mcp-example/mcp-server.ts"]
    },
    "iot": {
      "command": "npx",
      "args": ["tsx", "/workspaces/wktn-2025-chatgpt-workshop-codespace/mcp-example/mcp-server-iot.ts"]
    }
  }
}

足し算サーバー（addition）とIoTサーバー（iot）を同時に登録しています。

Codespaces では /workspaces/wktn-2025-chatgpt-workshop-codespace/ から始まる絶対パスで指定します。

Claude Desktop も同じ JSON 形式で設定できます。設定方法は公式ドキュメントを参照してください:

https://modelcontextprotocol.io/quickstart/user

デモしますね！Cline のインストール、MCP の登録はもう済んでます！

（講師によるデモ）

公開 MCP サーバーリンク集

世界中で MCP サーバーが公開されています。すぐ使えるものもあります。

公式サーバー一覧

MCP Servers リポジトリ:

https://github.com/modelcontextprotocol/servers
- @modelcontextprotocol/server-filesystem: ファイルシステム操作
- @modelcontextprotocol/server-github: GitHub 連携
- @modelcontextprotocol/server-postgres: PostgreSQL データベース連携
- @modelcontextprotocol/server-slack: Slack 連携

ヒントにはなるかも

既存の MCP サーバーを参考にして、自分のプロジェクトに合わせて作ることができます。

でも自作のほうがハッカソンで作りたいものには合います。API みたいなもんだし、自分のサービスに特化したツールを作れて、ハッカソンでオリジナリティを出せます。

参考リンク

MCP 公式
- https://modelcontextprotocol.io/
TypeScript SDK
- https://github.com/modelcontextprotocol/typescript-sdk
MCP サーバー一覧
- https://github.com/modelcontextprotocol/servers
Cline 公式
- https://docs.cline.bot/

MCP 技術紹介

MCP 技術紹介

この章で学ぶこと

MCP とは

Function Calling との違い

MCP の公式リソース

公式ドキュメント

TypeScript SDK

Codespace で MCP を体験してみよう

環境準備

コードの中身を見てみよう

mcp-server.ts（MCPサーバー）

mcp-execute.ts（MCPクライアント - 会話固定版）

OpenAI API キーの設定場所

MCP サーバーからツール一覧を取得

ChatGPT API に質問

動作確認（会話固定版）

OpenAI API キーを設定

実行してみよう

自由に質問してみよう（CLI手入力版）

OpenAI API キーを設定

実行してみよう

だいたいわかりましたね

IoT デバイス制御も試してみよう

mcp-server-iot.ts（IoT制御サーバー）

mcp-client.ts でIoTサーバーを使う

実行してみよう

Cline のデモ（時間があれば）

Cline とは

Cline のインストール

API 設定

MCP サーバーの登録

公開 MCP サーバーリンク集

公式サーバー一覧

ヒントにはなるかも

参考リンク

results matching ""

No results matching ""