🤝

リモートMCPサーバーをデプロイしてChatGPTと連携する【Vercel x Hono】

に公開
Vercel
Model Context Protocol
Hono
ChatGPT
MCP サーバー
tech

リモートMCPサーバーというのもあくまで俗称ですが、本記事ではHonoでStreamable HTTP対応のMCPサーバーを作りVercelにデプロイしてブラウザ版のChatGPTと連携するまでの手順を解説します。これが一番楽だと思います。

Vercel CLIのインストール

npm install -g vercel

MCPサーバーの作成

Honoのプロジェクトを作成します。
今回はtemplateはvercel、package managerはnpmを選択します。

npm create hono@latest remote-mcp-sample
cd remote-mcp-sample

必要なpackageをインストールします。

npm install @vercel/mcp-adapter zod

mcp-adapterはStreamable HTTP対応のMCPサーバーを簡単に実装できるパッケージです。

今回はサンプルとして文字列の置換を行うMCPサーバーを作成してみます。
index.tsを以下に書き換えます。

index.ts
import { Hono } from 'hono'
import { createMcpHandler } from 'mcp-handler'
import { z } from 'zod'

const app = new Hono()

const handler = createMcpHandler(
  (server) => {
    server.tool(
      'replace-string',
      'Replace text with a new string',
      {
        text: z.string().describe('The text to perform replacement on'),
        before: z.string().describe('The string to find and replace'),
        after: z.string().describe('The string to replace with'),
      },
      async ({ text, before, after }) => {
        const result = text.replaceAll(before, after)
        return {
          content: [{ type: 'text', text: result }],
        }
      }
    )
  },
  {},
  {
    basePath: '/',
    maxDuration: 60,
    verboseLogs: true,
  }
)

app.all('/mcp/*', async (c) => {
  return await handler(c.req.raw)
})

export default app

ローカルでの動作確認

動作確認は以下でサーバーを起動し

vc dev

mcp inspectorを使用するのが便利です。

 npx @modelcontextprotocol/inspector

このようにUI上から動作確認を行うことができます。

Vercelへのデプロイ

vc deploy --prod
Vercel CLI 48.6.0
🔍  Inspect: https://vercel.com/auhulus-projects/remote-mcp-sample/GEto3gEGxPNEBb41mbsT9LffUB7s [1s]
✅  Production: https://remote-mcp-sample-8ivujneke-auhulus-projects.vercel.app [1s]

Vercel CLIのわかりにくいところなのですがここで表示されるURLはプレビュー用で実際ProductionとしてデプロイされているURLは別なので注意しましょう。自分はコンソールで確認しています。

ChatGPTと連携

ChatGPTの 設定/アプリとコネクター/高度な設定 から開発者モードをオンにします

アプリとコネクターから「作成する」ボタンが表示されるようになるのでMCPサーバーのURLを入力します。
今回は/mcp配下に作成したのでそこまでのパスを入力します
認証を「認証なし」に設定し「作成する」を押すと連携されます。

（今回は簡単のため認証については割愛します）

ChatGPTで動作確認

では質問してみます。

うまくいきましたね！

リポジトリはこちら
https://github.com/auhulu/remote-mcp-sample

Discussion