個人開発アプリにMCP/DXT統合を実装してClaude Desktopから操作できるようにした感動体験

個人開発しているノートサービス REVELUP.dev に、MCP（Model Context Protocol）を実装し、DXT（Desktop Extension）を使ってClaude Desktopから直接操作できるようにしました。Claudeに「下書きを作って」とお願いするだけで、自分のアプリに記事が作成される瞬間の感動は想像以上でした。

REVELUP.devとは

REVELUP.devは、プライベートなメモから始めて、知り合いだけに見せるメモ、そして最終的には公開記事へと段階を踏んで技術アウトプットできるサービスです。気軽にメモを貯めながら、徐々に公開レベルを上げていける仕組みになっています。

元々は、アプリ内で貯めたメモを集めて記事にする機能を実装しようと考えていました。しかし、MCPの登場により、アプリ内での開発を待たずに、この記事化の流れを実現できるのではないかと思い立ちました。

サーバーサイドでのMCP実装

まず、REVELUP.devのAPIサーバー側にMCPサーバーを実装しました。@modelcontextprotocol/sdkを使用して、既存のAPIエンドポイントをMCPプロトコルでラップする形で実装しています。

import { Server } from "@modelcontextprotocol/sdk/server/index.js";

export const RevelupMCPServer = (context: McpApiUserContext) => {
  const server = new Server(
    {
      name: "revelup-dev-api",
      version: "0.0.1",
      description: "MCP server for Revelup.dev API",
    },
    {
      capabilities: {
        tools: { listChanged: true },
        resources: { subscribe: true, listChanged: true },
        prompts: { listChanged: true },
        logging: {},
      },
    },
  );

  setToolsCallHandler(server, context);
  setToolsListHandler(server, context);

  return server;
}

FastifyプラグインとしてHTTPエンドポイント /mcp を公開し、StreamableHTTPServerTransportを使用してMCPクライアントからのリクエストを処理します。

import { StreamableHTTPServerTransport } from "@modelcontextprotocol/sdk/server/streamableHttp.js";

export const mcpHttpPlugin: FastifyPluginAsync<McpHttpPluginOptions> = async (fastify, options) => {
  fastify.post(endpoint, async (req, reply) => {
    // 認証とレート制限のチェック
    const context = await createMcpContext(req);

    if (!mcpRateLimiter.isAllowed(context.sessionId)) {
      // レート制限の処理
    }

    const server = await createServer(context);
    const transport = new StreamableHTTPServerTransport({
      sessionIdGenerator: undefined,
    });

    await server.connect(transport);
    await transport.handleRequest(req.raw, reply.raw, req.body);
  });
};

実装したツールは3つです：

createarticledraft: Markdownから記事の下書きを作成
create_note: メモを作成
search_notes: メモを検索

例えば、記事の下書き作成は以下のように実装しています：

export const CreateArticleDraft: Tool<Params> = {
  info: {
    name: 'create_article_draft',
    description: 'Create an article draft from markdown content',
    inputSchema: {
      type: 'object',
      properties: {
        title: { type: 'string' },
        markdown: { type: 'string' },
      },
      required: ['title', 'markdown'],
    },
  },
  call: async (args, context) => {
    const htmlString = new showdown.Converter().makeHtml(args.markdown);
    const notes = await context.db.article.create({
      data: {
        title: args.title,
        userProfileId: context.currentUser.userProfile.id,
        content: htmlString,
        editorVersion: "0.0.0",
        published: false,
      },
    })
    return {
      content: [{
        type: 'text' as const,
        text: 'Article draft created',
      }]
    }
  },
};

DXTを使ったClaude Desktop統合

サーバーサイドのMCP実装ができたら、次はClaude DesktopからアクセスできるようにDXT（Desktop Extension）を作成しました。DXTは、リモートのMCPサーバーとClaude Desktopを橋渡しするプロキシサーバーとして動作します。

class RevelupMCPServer {
  private apiKey: string;
  private baseUrl: string = "https://api.revelup.dev";

  private async callAPI(endpoint: string, method: string = 'GET', body: any = null): Promise<any> {
    const url = `${this.baseUrl}${endpoint}`;

    const options: RequestInit = {
      method,
      headers: {
        'Authorization': `Bearer ${this.apiKey}`,
        'Content-Type': 'application/json',
        'Accept': 'application/json, text/event-stream'
      }
    };

    // APIコールの実装
  }

  async run(): Promise<void> {
    const server = new Server(
      {
        name: "revelup-dev",
        version: "0.0.1"
      },
      {
        capabilities: {
          tools: {}
        }
      }
    );

    // リモートのMCPサーバーへツールリストをプロキシ
    server.setRequestHandler(
      ListToolsRequestSchema,
      async () => {
        const mcpRequest = {
          jsonrpc: "2.0",
          id: Date.now(),
          method: "tools/list",
          params: {}
        };

        const response = await this.callAPI('/mcp', 'POST', mcpRequest);
        return { tools: response.result.tools };
      }
    );

    const transport = new StdioServerTransport();
    await server.connect(transport);
  }
}