🤖

MCPサーバーをVibe Codingで作ってみたら意外と動いた話

に公開
Cloudflare
Claude Code
Vibe Coding
MCP サーバー
tech

はじめまして、まっちゃてぃーです👋

第一作目の記事は、MCPサーバーをVibe Codingで作ってみたら意外と動いた話 です🥳

なんでVibe CodingでMCPサーバーを作ろうと思ったのか

会社で使っているナレッジや情報を読んで回答してくれたり、コードを書いてくれたりする仕組みがほしいな〜と思ったのがきっかけです。
ちょうどClaude Codeを初めて触る機会だったので、試しにMCPサーバーを作ってみました！

Vibe Codingとは？

AIに任せて、雰囲気でコードを書くスタイルです🥴

準備したものと環境

  • Claude Proプラン
  • Claude Code
  • 気合い
  • Cloudflareアカウント

これがあれば、どうにかできます。

どういうものを使ってるの？

使用してる技術

  • agents
    • WorkersでMCPサーバーを構築するためのフレームワーク？的なもの
    • 必須。
  • MCP SDK
    • MCPの中核。
    • 大体はREADMEを読めば理解できますが、Resources周りが理解しづらかったので、別途調べてまとめる予定です。
    • 無論、必須。
  • @cloudflare/workers-oauth-provider
    • これを使用して、OAuthの認可が実装されています。
    • OAuthを実装したい場合、必須。
  • hono
    • 接続方法の説明用のページと、/sseなどのMCPとして使用するための先とをルーティングするために使用しています。
  • Zod V3
    • registerToolの際に、inputSchema,outputSchemaを設定するのに使用します。
    • 必須。
  • @biomejs/biome
    • フォーマット/リンター 軽い。

インフラ周り

  • Cloudflare Workers
    • これでMCPサーバーが動いてる。
    • 無料。
    • すごい
  • Cloudflare Durable Objects
    • MCPでリアルタイムの通信をするために使用されています。
    • 多分/sseとか
    • 確か最近無料になった
  • Cloudflare Workers KV
    • OAuthのセッションの管理とかに使ってる。
    • 無料。

Vibe Codingでの開発フロー

まず調査

まずはMCP Server + Cloudflareについて調査しました。
ニーズは以下の通りです。

  • Cloudflare Workersでランニングコスト0で始めたい
  • Cloudflare のWAFで社外からのIPを防ぎたい
  • APIトークン取得は面倒なので、MCPサーバーにOAuthでログインしたい

そこで、Cloudflare公式ドキュメントに記載されている
OAuth認証対応のGitHub MCPサーバーをベースに作成しました。

実際に使用したプロンプトとか

このプロンプトで作成したのは、タスク管理ツールのMCPサーバーです。
ご参考程度に。

このテンプレートをベースに、OAuthで認証出来るxxxxのMCPサーバーを作成してください。

の様にすべてを適当にぶん投げると、当たり前ですが動くものが出てきませんでした。
なので、ドキュメントなどを明示的に指定して、何をしてほしいかを書きます。

(APIドキュメントのURL)を読んで、APIの使用方法や、OAuthの認証を確認して、間違っていたら修正してください。

これである程度動くようなものが出てきたので、ツールを詳細に指示して作ってもらいましょう。

下記のようなツールを作ってください。
また、ツールの種別毎にファイルは分けてください。
例えば、タスク管理は `tasks.ts`の様にするべきです。
また、inputSchemaやoutputSchema等もZodを使用して記載してください。

# タスク管理
- タスクを見る(概要などは含まない)ためのツール
- タスクの担当者を変更するツール
- タスクを詳細に確認するツール
    -サブタスクや、アクティビティなども含める
- タスクを検索するツール

# アカウント管理
- ログインされているアカウントを確認するツール

の様に指示します。
いい感じになってきたので、ツールの説明を埋めさせましょう。

下記のテンプレートを使用して、ツールの説明を埋めてください。

# 概要
[何をするtoolか]
# 用途
[どういうときに使うの？]
# 使用場面
[どういう指示されたら使うの？]
# こういう風に出力できるといいね
- 絵文字を使って視覚的にわかりやすく
- タスク期限が迫っていたら期限を強調する

のようにします。
そうすると、いい感じなものができるので、あとはいい感じにCloudflare WorkersでDeployして動作確認するだけです！

ハマったポイントと解決方法

1. Claude Codeは自主的にWeb検索しない

Claude Codeは自分からWeb検索をほとんどしません。
解決策として、Claude.mdなどにAPIドキュメントのURLを明示的に入れるとスムーズでした。

2. OAuthが動かない

OAuthのベースURLなどが違うだけで、実は上と同じ解決策が有効です。
APIドキュメントURLを指定してあげましょう。

3. Outputの型が適当

undefinedになるはずの場所でも.optional()が付いていないことがあります。
これは気合いで修正しました。

4. Toolの説明が適当

説明があいまいだとAIの判断ミスに繋がります。
以下のテンプレートを使うと精度が上がると思います👀

# 概要
[何をするtoolか]
# 用途
[どういうときに使うの？]
# 使用場面
[どういう指示されたら使うの？]
# こういう風に出力できるといいね
- 絵文字を使って視覚的にわかりやすく
- タスク期限が迫っていたら期限を強調する

5. Zodのバージョンでエラーが出ることがある

執筆時点(2025/08/14)では、MCP TypeScript SDKのZodのバージョンが3です。
これで1日溶かしました😭
3.25.76を使えば安定します。

やってみてわかったこと

AIは万能ではありませんでした。
昔よりは自立して動けるようになったものの、かなり具体的に指示しないと望む動作にならないことが多いです。
この部分が改善されれば、Vibe Codingで作れる物の完成度はもっと上がるはずです。

次にやってみたいこと

Claude Opus 4.1はリファクタリング精度がかなり向上しているようなので注目しています👀
また、Serena MCPやAtlas MCPを使って、
1つのプロダクトを丸ごとVibe Codingで作ってみたいと考えています🤯🤯🤯

Discussion