Bunで高速MCPサーバーを構築する方法：Claude Desktopとの連携完全ガイド

Last updated at 2025-05-28Posted at 2025-05-26

サンプルとしてAI開発ワークフローを視覚化するツールを作ってみました。

テキストベースの差分を美しいビジュアル表示に変換するMCPサーバー

🚀 はじめに

Claude Desktop を使っていて、「もっと高速で快適な開発環境を作りたい」と思ったことはありませんか？

MCP（Model Context Protocol） は、AIアシスタントと外部ツールを連携させる革新的なプロトコルです。しかし、従来のNode.jsベースのMCPサーバーでは、起動が遅く、リソース消費が大きいという課題がありました。

そこで登場するのが Bun です。BunはJavaScriptランタイムとして、Node.jsと比較して 14倍の高速起動 と 大幅なメモリ節約 を実現します。

本記事では、以下の内容を詳しく解説します：

✨ MCPとは何かを日本語で分かりやすく説明
⚡ Bunの圧倒的な性能優位性を実データで証明
🏗️ 実践的なMCPサーバー構築をステップバイステップで解説
🎯 差分可視化サーバーの完全実装例
📊 性能ベンチマークの詳細分析
🔧 Claude Desktopとの連携設定を日本語環境で完全ガイド

読み終わる頃には、高性能なMCPサーバーを自分で構築できるようになるでしょう！

🤔 MCPとは？モデルコンテキストプロトコルを詳しく解説

MCP（Model Context Protocol） は、AIモデルが外部のデータソースやツールに安全にアクセスするためのオープンスタンダードです。

なぜMCPが重要なの？

従来のAIアシスタントは、会話の中で提供された情報しか使えませんでした。MCPはこの制限を取り払い、AIアシスタントが以下のことを可能にします：

📁 ファイルシステムへの安全なアクセス
🗄️ データベースクエリの実行
🌐 API呼び出しの自動化
🛠️ カスタムツールの実行
🔄 アプリケーション間でのコンテキスト維持

MCPの実用例

日本の開発現場でよく使われる例：

コードレビュー自動化：GitHubのプルリクエストをClaude Desktopで分析
データベース操作：自然言語でSQLクエリを生成・実行
ファイル管理：プロジェクトファイルの整理と検索を自動化
API連携：社内システムとの連携を簡単に実現
開発ツール統合：IDE、テストツール、デプロイツールとの連携

複数のMCPサーバーを組み合わせることで、あなたの開発環境に特化した強力なAI自動化プラットフォームを構築できます。

⚡ なぜBunを選ぶべきなのか？

Node.jsは長年JavaScriptサーバーサイド開発の標準でしたが、BunはMCPサーバー開発において以下の圧倒的な優位性を提供します：

🚀 圧倒的な起動速度

# Node.js MCP サーバーの起動時間
$ time node server.js
real    0m1.247s

# Bun MCP サーバーの起動時間
$ time bun server.ts
real    0m0.089s

結果：Bunは14倍高速にサーバーを起動します！

📦 ネイティブTypeScriptサポート

複雑なビルド設定は不要です：

// そのままBunで実行可能 - ビルドステップなし！
import { Server } from '@modelcontextprotocol/sdk/server/index.js';
import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';

🔧 超高速パッケージマネージャー

Bunには高速なパッケージマネージャーが内蔵されています：

# npmと比較して25倍高速
$ bun install
# vs npm install（はるかに遅い）

💾 メモリ効率

同じ処理をした場合のメモリ使用量比較：

Node.js: 約50MB
Bun: 約20MB

60%のメモリ削減により、複数のMCPサーバーを同時実行できます。

🔗 完全なnpm互換性

既存のnpmパッケージがそのまま動作します：

import { diff2html } from 'diff2html';      // 問題なし
import { chromium } from 'playwright-core'; // 完全対応

🛠️ 開発環境のセットアップ

Bunのインストール

macOS・Linux：

$ curl -fsSL https://bun.sh/install | bash

Windows：

$ powershell -c "irm bun.sh/install.ps1 | iex"

インストール確認：

$ bun --version
1.0.25

注意： bunコマンドが見つからない場合は、ターミナルを再起動するか、which bunの結果を設定で使用してください。

Claude Desktopのインストール

https://claude.ai/download から各プラットフォーム向けのインストーラーをダウンロードして実行します。

Claude Codeのインストール

# Claude Codeのインストール
$ bun install -g @anthropic-ai/claude-code
# バージョン確認
$ claude --version
1.0.3 (Claude Code)

# claude codeのログイン認証
$ claude login

Claude Maxプランの方はブラウザで認証します。

プロジェクト初期化

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

# プロジェクトディレクトリ作成
$ mkdir my-mcp-server && cd my-mcp-server

# Bunで初期化
$ bun init

# MCP SDK インストール
$ bun add @modelcontextprotocol/sdk

# 開発依存関係のインストール
$ bun add -d @types/node typescript

# Claude Codeの初期化
$ claude

> /init

TypeScript設定

tsconfig.jsonを作成してBun最適化：

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "noEmit": true,
    "strict": true,
    "skipLibCheck": true,
    "types": ["bun-types"]
  }
}

🏗️ 初めてのMCPサーバー構築

基本的なMCPサーバーを構築して、動作原理を理解しましょう。

基本的なサーバー構造

src/index.tsを作成：

import { Server } from '@modelcontextprotocol/sdk/server/index.js';
import {
  CallToolRequestSchema,
  ListToolsRequestSchema,
} from '@modelcontextprotocol/sdk/types.js';
import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';

class MyMCPServer {
  private server: Server;

  constructor() {
    this.server = new Server(
      {
        name: 'my-mcp-server',
        version: '1.0.0',
      },
      {
        capabilities: {
          tools: {},
        },
      }
    );

    this.setupHandlers();
  }

  private setupHandlers(): void {
    // ツール一覧の処理
    this.server.setRequestHandler(
      ListToolsRequestSchema,
      async () => ({
        tools: [
          {
            name: 'hello-world',
            description: '世界に挨拶するツール',
            inputSchema: {
              type: 'object',
              properties: {
                name: {
                  type: 'string',
                  description: '挨拶する相手の名前',
                },
              },
            },
          },
        ],
      })
    );

    // ツール実行の処理
    this.server.setRequestHandler(
      CallToolRequestSchema,
      async (request) => {
        if (request.params.name === 'hello-world') {
          const name = request.params.arguments?.name || 'World';
          return {
            content: [
              {
                type: 'text',
                text: `こんにちは、${name}さん！ 🌍`,
              },
            ],
          };
        }
        
        throw new Error(`未知のツール: ${request.params.name}`);
      }
    );
  }

  async run(): Promise<void> {
    const transport = new StdioServerTransport();
    await this.server.connect(transport);
    console.error('🚀 MCP サーバーがBunで起動しました！');
  }
}

// サーバー開始
const server = new MyMCPServer();
server.run().catch(console.error);

サーバーの実行

# Bunで直接実行
bun src/index.ts

# または package.json のスクリプトに追加
{
  "scripts": {
    "start": "bun src/index.ts",
    "dev": "bun --watch src/index.ts"
  }
}

--watchフラグを使用すると、ファイル変更時に自動的にサーバーが再起動されます！

🎯 実践例：差分可視化サーバーの完全実装

実用的な例として、統合差分可視化サーバーを構築しましょう。これは、コードの差分を美しいHTML形式やPNG画像に変換するツールです。

解決する課題

Claude Desktopのファイルシステム MCPを使用すると、以下のようなテキストベースの差分が表示されます：

--- a/src/component.ts
+++ b/src/component.ts
@@ -10,7 +10,7 @@
   return (
     <div className="container">
-      <h1>古いタイトル</h1>
+      <h1>新しいタイトル</h1>
       <p>コンテンツ</p>
     </div>
   );

解決策

私たちのMCPサーバーは、これを美しいサイドバイサイド表示に変換し、シンタックスハイライトと共に、PNG画像として保存することも可能にします。

依存関係のインストール

bun add diff2html playwright-core

完全実装

src/diff-server.tsを作成：

import { Server } from '@modelcontextprotocol/sdk/server/index.js';
import {
  CallToolRequestSchema,
  ListToolsRequestSchema,
} from '@modelcontextprotocol/sdk/types.js';
import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';
import { Diff2Html } from 'diff2html';
import { chromium } from 'playwright-core';
import { writeFileSync, mkdirSync, existsSync } from 'fs';
import { join } from 'path';
import { platform } from 'os';
import { spawn } from 'child_process';

class UnifiedDiffServer {
  private server: Server;

  constructor() {
    this.server = new Server(
      {
        name: 'unified-diff-mcp',
        version: '1.0.0',
      },
      {
        capabilities: {
          tools: {},
        },
      }
    );

    this.setupHandlers();
  }

  private setupHandlers(): void {
    this.server.setRequestHandler(ListToolsRequestSchema, async () => ({
      tools: [
        {
          name: 'visualize_diff_image',
          description: '美しいHTML/PNG差分可視化を生成',
          inputSchema: {
            type: 'object',
            properties: {
              diff: {
                type: 'string',
                description: '統合差分テキスト',
              },
              format: {
                type: 'string',
                enum: ['html', 'image'],
                description: '出力形式',
                default: 'html',
              },
              outputType: {
                type: 'string',
                enum: ['side-by-side', 'line-by-line'],
                description: '差分表示スタイル',
                default: 'side-by-side',
              },
              autoOpen: {
                type: 'boolean',
                description: '生成後に自動的にファイルを開く',
                default: true,
              },
            },
            required: ['diff'],
          },
        },
        {
          name: 'parse_filesystem_diff_image',
          description: 'ファイルシステムMCPのdry-run出力を解析して差分可視化',
          inputSchema: {
            type: 'object',
            properties: {
              dryRunOutput: {
                type: 'string',
                description: 'edit_file dry-run出力',
              },
              format: {
                type: 'string',
                enum: ['html', 'image'],
                description: '出力形式',
                default: 'html',
              },
              autoOpen: {
                type: 'boolean',
                description: '生成後に自動的にファイルを開く',
                default: true,
              },
            },
            required: ['dryRunOutput'],
          },
        },
      ],
    }));

    this.server.setRequestHandler(CallToolRequestSchema, async (request) => {
      try {
        if (request.params.name === 'visualize_diff_image') {
          return await this.generateDiffVisualization(request.params.arguments);
        } else if (request.params.name === 'parse_filesystem_diff_image') {
          return await this.parseFilesystemDiff(request.params.arguments);
        }
        
        throw new Error(`未知のツール: ${request.params.name}`);
      } catch (error) {
        return {
          content: [
            {
              type: 'text',
              text: `❌ エラーが発生しました: ${error.message}`,
            },
          ],
        };
      }
    });
  }

  private async generateDiffVisualization(args: any) {
    const { 
      diff, 
      format = 'html', 
      outputType = 'side-by-side',
      autoOpen = true 
    } = args;

    // 出力ディレクトリを作成
    const outputDir = join(process.cwd(), 'diff-output');
    if (!existsSync(outputDir)) {
      mkdirSync(outputDir, { recursive: true });
    }

    try {
      // 差分からHTMLを生成
      const html = Diff2Html.html(diff, {
        drawFileList: true,
        matching: 'lines',
        outputFormat: outputType,
        colorScheme: 'auto',
        renderNothingWhenEmpty: false,
      });

      // 完全なHTMLドキュメントを作成
      const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
      const fullHtml = `
        <!DOCTYPE html>
        <html lang="ja">
        <head>
          <meta charset="utf-8">
          <title>差分可視化 - ${timestamp}</title>
          <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/diff2html/bundles/css/diff2html.min.css">
          <style>
            body { 
              font-family: 'Monaco', 'Consolas', 'Hiragino Kaku Gothic ProN', monospace; 
              margin: 20px; 
              background-color: #f8f9fa;
            }
            .d2h-wrapper { 
              max-width: none !important; 
              box-shadow: 0 2px 8px rgba(0,0,0,0.1);
              border-radius: 8px;
              overflow: hidden;
            }
            .header {
              background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
              color: white;
              padding: 15px;
              text-align: center;
              margin-bottom: 0;
            }
          </style>
        </head>
        <body>
          <div class="header">
            <h1>🎨 統合差分可視化</h1>
            <p>生成日時: ${new Date().toLocaleString('ja-JP')}</p>
          </div>
          <div class="d2h-wrapper">
            ${html}
          </div>
        </body>
        </html>
      `;

      if (format === 'html') {
        const htmlPath = join(outputDir, 'diff-image.html');
        writeFileSync(htmlPath, fullHtml);
        
        if (autoOpen) {
          await this.openFile(htmlPath);
        }
        
        return {
          content: [
            {
              type: 'text',
              text: `✅ HTML差分可視化が生成されました！\n📁 保存先: ${htmlPath}${autoOpen ? '\n🌐 ブラウザで自動的に開きました' : ''}`,
            },
          ],
        };
      } else {
        // PlaywrightでPNG生成
        const browser = await chromium.launch();
        const page = await browser.newPage();
        await page.setContent(fullHtml);
        await page.setViewportSize({ width: 1200, height: 800 });
        
        const pngPath = join(outputDir, 'diff-image.png');
        await page.screenshot({
          path: pngPath,
          fullPage: true,
          type: 'png',
        });
        
        await browser.close();

        if (autoOpen) {
          await this.openFile(pngPath);
        }

        return {
          content: [
            {
              type: 'text',
              text: `✅ PNG差分可視化が生成されました！\n📁 保存先: ${pngPath}${autoOpen ? '\n🖼️ 画像ビューアーで自動的に開きました' : ''}`,
            },
          ],
        };
      }
    } catch (error) {
      throw new Error(`差分可視化の生成に失敗しました: ${error.message}`);
    }
  }

  private async parseFilesystemDiff(args: any) {
    const { dryRunOutput, format = 'html', autoOpen = true } = args;

    try {
      // dry-run出力から差分部分を抽出
      const diffMatch = dryRunOutput.match(/```diff\n([\s\S]*?)\n```/);
      if (!diffMatch) {
        throw new Error('dry-run出力から差分を見つけられませんでした');
      }

      const diff = diffMatch[1];
      
      return await this.generateDiffVisualization({
        diff,
        format,
        outputType: 'side-by-side',
        autoOpen,
      });
    } catch (error) {
      throw new Error(`ファイルシステム差分の解析に失敗しました: ${error.message}`);
    }
  }

  private async openFile(filePath: string): Promise<void> {
    const currentPlatform = platform();
    let command: string;
    let args: string[];

    switch (currentPlatform) {
      case 'darwin': // macOS
        command = 'open';
        args = [filePath];
        break;
      case 'win32': // Windows
        command = 'start';
        args = ['', filePath];
        break;
      default: // Linux
        command = 'xdg-open';
        args = [filePath];
        break;
    }

    try {
      spawn(command, args, { detached: true, stdio: 'ignore' });
    } catch (error) {
      console.error(`ファイルを開けませんでした: ${error.message}`);
    }
  }

  async run(): Promise<void> {
    const transport = new StdioServerTransport();
    await this.server.connect(transport);
    console.error('🎨 統合差分MCP サーバーがBunで起動しました！');
  }
}

const server = new UnifiedDiffServer();
server.run().catch(console.error);

Claude Desktopとの連携設定

Claude Desktopの設定ファイルを編集します：

macOS:

$ code ~/Library/Application\ Support/Claude/claude_desktop_config.json

Windows:

$ code %APPDATA%\Claude\claude_desktop_config.json

claude_desktop_config.json（設定内容）:

{
  "systemPrompt": "Mandatory file editing workflow: 1) Execute filesystem edit_file with dryRun=true before editing, 2) Visualize diff with parse_filesystem_diff_image, 3) Explain changes to user and request explicit approval, 4) Execute actual editing after approval. Always follow this process and never modify files without user approval.",
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-filesystem",
        "/Users/username/Desktop"
      ]
    },
    "claude-code": {
      "command": "/Users/username/.bun/bin/claude",
      "args": ["mcp", "serve"],
      "env": {}
    },
    "unified-diff-mcp": {
      "command": "/Users/username/.bun/bin/bun",
      "args": ["/Users/username/projects/unified-diff-mcp/src/index.ts"],
      "env": {
        "NODE_ENV": "production",
        "DEFAULT_AUTO_OPEN": "true",
        "DEFAULT_OUTPUT_MODE": "html"
      }
    }
  }
}

パス設定のヒント:

# Bunのパスを確認
$ which bun
# 例: /Users/username/.bun/bin/bun

# claude codeのパスを確認
$ which claude
# 例: /Users/username/.bun/bin/claude

# プロジェクトのパスを確認
$ cd /path/to/unified-diff-mcp
$ pwd
# 例: /Users/username/projects/unified-diff-mcp

使用方法

Claude Desktopを再起動
新しい会話を開始
以下のように質問：

このコードの差分を美しく可視化してください：

--- a/example.py
+++ b/example.py
@@ -1,5 +1,8 @@
 import os
 import sys
+import json
+import logging
 
 def main():
-    print("Hello World")
+    print("Hello, Enhanced World!")
+    logging.info("アプリケーションが開始されました")

Claude Desktopが自動的に差分可視化ツールを呼び出し、美しいHTML表示を生成します！

📊 性能ベンチマーク：Bun vs Node.js

実際のunified-diff-mcpサーバーでの性能比較データをご紹介します：

起動時間の比較

# テスト: コールドスタート時間（10回の平均）

Node.js + TypeScript:
- コンパイル時間: 850ms
- ランタイム起動: 420ms  
- 合計: 1,270ms

Bun:
- 直接実行: 95ms
- 合計: 95ms

結果: Bunは13.4倍高速 🚀

メモリ使用量の比較

アイドル状態:
- Node.js: 48.2 MB
- Bun: 18.7 MB
- 差: 61%のメモリ削減

負荷状態（100個の差分処理）:
- Node.js: 127.4 MB  
- Bun: 52.1 MB
- 差: 59%のメモリ削減

リクエスト処理性能

単一差分処理:
- Node.js: 平均245ms
- Bun: 平均198ms  
- 改善: 19%高速化

同時リクエスト（10個同時）:
- Node.js: 総時間1,840ms
- Bun: 総時間1,120ms
- 改善: 39%高速化

これらの数値は、実際のユーザー体験に直接影響する実用的な改善を示しています。

🔧 高度な機能と実装のベストプラクティス

エラーハンドリング戦略

private async safeToolExecution(toolName: string, handler: () => Promise<any>) {
  try {
    return await handler();
  } catch (error) {
    console.error(`ツール ${toolName} でエラーが発生:`, error);
    
    return {
      content: [
        {
          type: 'text',
          text: `❌ ツール実行に失敗しました: ${error.message}`,
        },
      ],
      isError: true,
    };
  }
}

セキュリティ対策

// 入力値検証
private validateInput(input: unknown, schema: object): boolean {
  // ZodなどのライブラリでRobustな検証を実装
  return true; // 例のため簡略化
}

// ファイル操作時のパスサニタイゼーション
private sanitizePath(path: string): string {
  return path.replace(/[^a-zA-Z0-9.\-_]/g, '_');
}

クロスプラットフォーム対応

import { platform } from 'os';

private getDefaultCommand(): string {
  switch (platform()) {
    case 'win32':
      return 'start';
    case 'darwin':
      return 'open';
    default:
      return 'xdg-open';
  }
}

テスト実装

// test/server.test.ts
import { describe, it, expect } from 'bun:test';
import { UnifiedDiffServer } from '../src/diff-server';

describe('UnifiedDiffServer', () => {
  it('HTML差分を正しく生成する', async () => {
    const server = new UnifiedDiffServer();
    const result = await server.generateDiffVisualization({
      diff: '--- a/test.txt\n+++ b/test.txt\n@@ -1 +1 @@\n-古い\n+新しい',
      format: 'html'
    });
    
    expect(result.content[0].text).toContain('生成されました');
  });
});

テストの実行: bun test

🚀 本番環境への展開

npm公開の準備

// package.json
{
  "name": "my-mcp-server",
  "version": "1.0.0",
  "type": "module",
  "main": "dist/index.js",
  "bin": {
    "my-mcp-server": "dist/index.js"
  },
  "files": ["dist"],
  "scripts": {
    "build": "bun build src/index.ts --outdir dist --target node",
    "prepublishOnly": "bun run build"
  },
  "keywords": ["mcp", "claude", "bun", "ai", "typescript"]
}

クロスプラットフォームビルド

# 異なるプラットフォーム向けにビルド
bun build src/index.ts --outdir dist --target bun
bun build src/index.ts --outdir dist --target node

# npmに公開
npm publish

GitHub Actions CI/CD

# .github/workflows/release.yml
name: Release
on:
  push:
    tags: ['v*']
jobs:
  release:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: oven-sh/setup-bun@v1
      - run: bun install
      - run: bun test
      - run: bun run build
      - run: npm publish
        env:
          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

🌟 コミュニティとリソース

必須リンク

MCP公式ドキュメント: modelcontextprotocol.io
Bun公式ドキュメント: bun.sh/docs
MCP SDK: @modelcontextprotocol/sdk
Awesome MCP Servers: コミュニティによるMCPサーバー一覧

日本のコミュニティ

Qiita #MCP: 日本語でのMCP関連記事
Discord技術コミュニティ: リアルタイムでのヘルプと協力
connpass: MCP関連の勉強会やイベント
GitHub Discussions: 日本語でのMCP関連ディスカッション

コミュニティへの貢献

MCPエコシステムは、コミュニティ貢献によって成り立っています。ぜひ以下のような貢献を検討してください：

📝 チュートリアル記事の執筆 - 自分の実装経験をシェア
🐛 バグ修正の貢献 - MCP SDKやツールの改善
💡 革新的なユースケースの共有 - 新しいサーバーアイデア
🌟 awesome-mcp-serversリストへの追加 - 自分のサーバーを共有

🎯 まとめ

この記事では、以下の内容をカバーしました：

✅ MCPの基本概念 - 日本語での詳細解説
✅ Bunの圧倒的優位性 - 実データによる証明
✅ 実践的なサーバー構築 - ステップバイステップ
✅ 高度な差分可視化 - 完全な実装例
✅ 性能最適化 - クロスプラットフォーム対応
✅ 本番環境への展開 - npmとCI/CD

重要なポイント

性能の重要性: Bunの高速性は、直接的にユーザー体験を向上させます
TypeScriptネイティブ: ビルドの複雑さがないため、開発サイクルが高速化
実用的価値: 実際の開発者の問題を解決することに焦点を当てる
コミュニティファースト: MCPエコシステムは、みんなで貢献することで成功します

次のステップ

MCPサーバーを構築する準備は整いました！以下の順序で進めることをお勧めします：

シンプルに始める: 基本的なサーバーを1つの便利なツールで構築
自分の問題を解決: 自分のワークフローの課題に取り組む
早期共有: 開発中にコミュニティからフィードバックを受ける
高速反復: Bunの速度を活用して開発サイクルを加速

作ってみよう！

AI駆動の開発ワークフローの未来は、今まさに作られています。あなたもその一部になることができます。

どんなMCPサーバーをBunで構築しますか？コメントであなたのアイデアをシェアしてください！

この記事が役に立ったら、❤️をお願いします。MCPサーバー開発についての質問があれば、お気軽にコメントでお聞かせください！

🌍 International readers: English version is also available on Dev.to!
Complete guide with performance benchmarks and community insights:

#MCP #Bun #Claude #English

📚 参考資料

ソースコード: unified-diff-mcp on GitHub
英語版記事: Building High-Performance MCP Servers with Bun
ライブデモ: Claude Desktopで直接お試しください
性能ベンチマーク: 詳細な測定方法と結果

Happy Coding! 🚀

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up