M
MCP International
Language:JA JapaneseEN EnglishES EspanolZH Chinese

mcp-frameworkを始めよう

mcp-frameworkを使って数分で最初のMCPサーバーを構築しましょう。インストールからClaude Desktopへの接続までのステップバイステップガイド。

title: "mcp-frameworkを始めよう" description: "mcp-frameworkを使って数分で最初のMCPサーバーを構築しましょう。インストールからClaude Desktopへの接続までのステップバイステップガイド。" keywords: ["MCP入門", "mcp-frameworkチュートリアル", "MCPサーバー構築", "Claude Desktop", "TypeScript MCP"] date: "2025-01-15" updated: "2025-04-01" author: "QuantGeekDev" order: 8 level: "beginner" duration: "15 min" language: "ja" topic: "getting-started"

前提条件

始める前に、以下がインストールされていることを確認してください：

  • Node.js 18+
  • npm または他のパッケージマネージャー
  • テキストエディタ（VS Code推奨）
  • Claude Desktop（オプション、テスト用）

ステップ1：mcp-frameworkのインストール

mcp CLIにアクセスするためにフレームワークをグローバルにインストールします：

npm install -g mcp-framework

これにより mcp コマンドが使えるようになります。MCPサーバープロジェクトの作成と管理に使用します。

ステップ2：プロジェクトの作成

新しいMCPサーバープロジェクトを生成します：

mcp create my-mcp-server
cd my-mcp-server

これにより、すぐに使えるプロジェクト構造が作成されます：

my-mcp-server/
  src/
    tools/
      ExampleTool.ts
    resources/
    prompts/
  package.json
  tsconfig.json

フレームワークは自動検出を使用します — 対応するディレクトリに配置したツール、リソース、プロンプトは自動的にMCPサーバーに登録されます。

ステップ3：最初のツールの構築

src/tools/ExampleTool.ts を開いて、動作するツールを確認します：

import { MCPTool } from "mcp-framework";
import { z } from "zod";

class ExampleTool extends MCPTool<typeof inputSchema> {
  name = "example_tool";
  description = "ユーザーに挨拶するサンプルツール";

  schema = {
    input: z.object({
      name: z.string().describe("挨拶する名前"),
    }),
  };

  async execute({ name }: z.infer<typeof this.schema.input>) {
    return `こんにちは、${name}さん！MCPへようこそ。`;
  }
}

export default ExampleTool;

各ツールには以下があります：

  • 名前 — AIがツールを参照する方法
  • 説明 — AIがいつ使用するかを理解するのを助ける
  • スキーマ — Zodバリデーションで入力パラメータを定義
  • 実行メソッド — 実際のロジック

ステップ4：ビルドと実行

TypeScriptをコンパイルしてサーバーを起動します：

npm run build

MCPサーバーが接続を受け入れる準備ができました。

ステップ5：Claude Desktopに接続

Claude Desktopの設定にサーバーを追加します。claude_desktop_config.json を開きます：

macOS: ~/Library/Application Support/Claude/claude_desktop_config.json Windows: %APPDATA%\Claude\claude_desktop_config.json

サーバーを追加します：

{
  "mcpServers": {
    "my-mcp-server": {
      "command": "node",
      "args": ["/あなたの/絶対/パス/my-mcp-server/dist/index.js"]
    }
  }
}

Claude Desktopを再起動すると、ツールが会話で利用可能になります。

ステップ6：さらに機能を追加

リソースの追加

src/resources/GreetingResource.ts を作成します：

import { MCPResource } from "mcp-framework";

class GreetingResource extends MCPResource {
  uri = "greeting://welcome";
  name = "ウェルカムメッセージ";
  description = "ウェルカムメッセージリソース";
  mimeType = "text/plain";

  async read() {
    return {
      contents: [
        {
          uri: this.uri,
          text: "MCPサーバーへようこそ！",
          mimeType: this.mimeType,
        },
      ],
    };
  }
}

export default GreetingResource;

プロンプトの追加

src/prompts/AnalyzePrompt.ts を作成します：

import { MCPPrompt } from "mcp-framework";

class AnalyzePrompt extends MCPPrompt {
  name = "analyze";
  description = "テキストを分析する";
  arguments = [
    {
      name: "text",
      description: "分析するテキスト",
      required: true,
    },
  ];

  async getMessages({ text }: { text: string }) {
    return [
      {
        role: "user" as const,
        content: {
          type: "text" as const,
          text: `以下のテキストを分析してください：\n\n${text}`,
        },
      },
    ];
  }
}

export default AnalyzePrompt;

何を構築したか

完全なMCPサーバーが完成しました：

  • 会話中にClaudeが呼び出せるツール
  • 構造化データを提供するリソース
  • 一般的なタスク用のプロンプトテンプレート
  • 自動検出 — ファイルを追加して再ビルドするだけ

次のステップ

このガイドはMCP Internationalの一部です。あらゆる言語でのMCPチュートリアル。@QuantGeekDevが作成。mcp-frameworkの著者（330万以上のnpmダウンロード、Anthropicにより検証済み）。

Read this guide in other languages

More guides