MCP: 手を動かして学んだログ

目次

概要を知る

社内デザインシステムをMCPサーバー化したらUI実装が爆速になった

最近、Cursor エディタや GitHub Copilot などのコーディングアシスタントツールが進化し続けていますが、社内固有のデザインシステムとの連携はまだまだ課題が残っていました。そこで社内エンジニアである sosuke とともに、Ubie Vitals というデザインシステムを MCP サーバー化することで、UI 開発の速度と精度が劇的に向上した体験を共有します。

https://zenn.dev/ubie_dev/articles/f927aaff02d618

何はともあれ総本山へ

Introduction - Model Context Protocol

Get started with the Model Context Protocol (MCP)

https://modelcontextprotocol.io/introduction

まずはExampleを

  server.setRequestHandler(
    CallToolRequestSchema,
    async (request: CallToolRequest) => {
      console.error("Received CallToolRequest:", request);
      try {
        if (!request.params.arguments) {
          throw new Error("No arguments provided");
        }

        switch (request.params.name) {
          case "slack_list_channels": {
            const args = request.params
              .arguments as unknown as ListChannelsArgs;
            const response = await slackClient.getChannels(
              args.limit,
              args.cursor,
            );
            return {
              content: [{ type: "text", text: JSON.stringify(response) }],
            };
          }

MCPサーバーを動かしてみる

For Server Developers - Model Context Protocol

Get started building your own server to use in Claude for Desktop and other clients.

https://modelcontextprotocol.io/quickstart/server#node

分かったこと

LLMには事前に params.name のリストとその機能内容が共有されており、LLMが実行したい機能の params.name をMCPサーバーに渡すことで処理が行われている

server.tool(
  "get-forecast",
  "Get weather forecast for a location",
  {
    latitude: z.number().min(-90).max(90).describe("Latitude of the location"),
    longitude: z
      .number()
      .min(-180)
      .max(180)
      .describe("Longitude of the location"),
  },

クライアントについて理解する

For Client Developers - Model Context Protocol

Get started building your own client that can integrate with all MCP servers.

https://modelcontextprotocol.io/quickstart/client#node

this.mcp.connect(this.transport);
    
    const toolsResult = await this.mcp.listTools();
    this.tools = toolsResult.tools.map((tool) => {
      return {
        name: tool.name,
        description: tool.description,
        input_schema: tool.inputSchema,
      };
    });

  const response = await this.anthropic.messages.create({
    model: "claude-3-5-sonnet-20241022",
    max_tokens: 1000,
    messages,
    tools: this.tools,
  });

Tool use with Claude - Anthropic

https://docs.anthropic.com/en/docs/build-with-claude/tool-use/overview

• Function Calling（関数呼び出し）は、AIモデルが外部の関数やAPIを呼び出すための仕組みです。

• Tool Calling（ツール呼び出し）は、AnthropicがFunction Callingを実装した機能の呼び方です。基本的には同じ概念を指します。

• MCP (Model Completion Protocol) は、Anthropicが開発した、より広範なプロトコルで、Tool/Function Callingを含むモデルとのやり取りを標準化するフレームワークです。

1. Function Calling / Tool Calling
• これらは本質的に同じ概念です。AIモデルが外部の関数やAPIを呼び出す機能を指します。
• OpenAIは「Function Calling」、Anthropicは「Tool Calling」という用語を主に使用していますが、機能的には非常に似ています。
• この機能により、AIモデルは自分の知識や能力を超えたタスク（最新の情報検索、計算、外部システムとの連携など）を実行できます。

2. MCP (Model Completion Protocol)
• MCPはAnthropicが開発したより包括的なプロトコルです。
• Tool Callingはこのプロトコルの一部として実装されています。
• MCPは単なるツール呼び出しを超えて、モデルとアプリケーション間のやり取りを標準化し、一貫性のある方法でAIの出力をパースして利用できるようにすることを目指しています。

3. 実装の違い
• OpenAIのFunction Callingは特定のJSON形式で関数を定義します。
• AnthropicのTool Callingも同様にJSONスキーマベースですが、MCPの一部として実装されているため、より広範なコンテキストで機能します。

実践: gas代を取得するMCPサーバー実装

実装

@weather.ts を参考に、ethereumのgas代を取得するMCPサーバーを実装して。RPCのURLはhttps://ethereum-rpc.publicnode.com とします。

{
  "mcpServers": {
      "weather": {
          "command": "node",
          "args": [
              "/Users/foxy/mcp-sandbox/build/weather.js"
          ]
      },
      "gas": {
          "command": "node",
          "args": [
              "/Users/foxy/mcp-sandbox/build/gas.js"
          ]
      }
  }
}

いざ実行

 

まとめ

MCP入門

MCP は、AI アシスタント（チャットボットや自動化エージェントなど）が、さまざまな外部データやツールにアクセスするための 共通のルール（プロトコル） です。

https://zenn.dev/mkj/articles/0ed4d02ef3439c