土曜日, 8月 16, 2025
土曜日, 8月 16, 2025
- Advertisment -
ホームニューステックニュースDiscord MCPを使って一撃でバイブコーディングするBot開発術

Discord MCPを使って一撃でバイブコーディングするBot開発術


最近 Discord の Bot 開発を行っているのですが、Claude Code などで実装する際、どうしても Discord 周りの実装精度が上がらず困ってました。

モデルの性能もあると思うのですが、本質的には外部サービスで実際の動きをチェックできていないことに帰結すると考えています。

実際の動作確認を行わず実装し切ることは、実装者(人)がその実装方法を理解していたとしても意外と難しいことであり、(現状の)AI も同様だと考えています。

なので今回は、Discord の MCP サーバーを導入し、一撃のプロンプトで実装し切ってもらえるような状況を検証しました。

プチ宣伝

最近 Discord 好きが集まる『Discorders Cafe』を始めました。Discord に関連する勉強会を定期的に行う予定です。

今回の記事をテーマとした勉強会は 2025 年 8 月 15 日 21 時 から開催予定ですので、よかったらご参加ください。

実装テーマ

今回 Claude Code で実装させる Discord Bot は「Yahoo!デベロッパーネットワーク」を利用して、郵便番号から様々な情報を得る Bot を作成します。

具体的には、ユーザーが指定したチャンネルに郵便番号を投稿すると、その投稿に対し標高を絵文字リアクションで反応し、その住所の情報をメッセージでレスポンスします。

実装イメージ

「Yahoo!デベロッパーネットワーク」について

Yahoo! がさまざまな Web API を提供していて、今回は Yahoo! Open Local Platform(YOLP)を利用して、地図・地域情報を取得します。

無料で利用できるので、ぜひ知っておくと良い API です。

前提

  • 使用ツール: Claude Code(Opus 4.1)
  • 使用言語: TypeScript
  • MCP サーバー: mcp-discord
  • 必要なトークン: DISCORD_BOT_TOKEN / DISCORD_TEST_USER_TOKEN / YAHOO_CLIENT_ID
  • 対象チャンネル: 投稿権限・リアクション権限が付与されていること

今回利用したプロンプト

Yahoo!デベロッパーネットワークを利用する。
以下の仕様で Discord Bot を実装する。

## 仕様

1. ユーザーが郵便番号を 7 桁の数字で指定したチャンネルに投稿。
2. 郵便番号検索 API を使って郵便番号から緯度経度を取得。
3. その緯度経度を使って標高 API を利用して、その住所の標高を取得。
4. その標高を絵文字で反応。例えば標高が 64m の場合、 `:six:` `:four:` の絵文字を投稿した人のメッセージに付与する。
5. 場所情報 API の結果を可能な限りリッチにしてレスポンスする。

## .env について

- `DISCORD_CHANNEL_ID` は反応するチャンネル ID として利用
- `DISCORD_BOT_TOKEN` は実際のレスポンスや絵文字反応用の Discord BOT として利用
- `DISCORD_TEST_USER_TOKEN` は投稿する Discord ユーザーとして見立てて利用
- `YAHOO_CLIENT_ID` は Yahoo!デベロッパーネットワークの CLIENT_ID として利用

## 注意点

- 作業は日本語で行うこと。
- Discord MCP には `DISCORD_TEST_USER_TOKEN` がセットされてるので、投稿はそれを利用すること。
- TypeScript で実装すること。
- https://developer.yahoo.co.jp/attribution/ に従って、クレジット表記を忘れずに。

## テスト項目

- 実装時に Discord MCP を利用して正常に動作するかチェックすること。
- リアクションが正しくされるかを検証すること。
- 入力された郵便番号から正しい情報が出力されるかチェックすること。
  - 例:`1690074`は東京都新宿区北新宿、標高は 25.5m

今回、投稿する人(テストでは Bot)と反応する Bot を分けたかったので、 DISCORD_BOT_TOKENDISCORD_TEST_USER_TOKEN の 2 つの Bot を用意しています。

また、今回のキモは 「実装時に Discord MCP を利用して正常に動作するかチェックすること」 です。実際に MCP サーバーを利用しないケースと利用するケースを比較していきます。

なお、今回は話をシンプルにするため、導入する MCP サーバーは Discord MCP のみとします。

MCP サーバーを利用しないケース

まずは、MCP サーバーを利用しなかった場合、どのような実装結果になるのか見ていきます。先ほどのプロンプトから「実装時に Discord MCP を利用して正常に動作するかチェックすること」を省き、それを README.md に記載し、Claude Code に「@README.md に従って実装して」と指示を送ります。

MCP サーバーを利用しないケースのClaude Code

数分待つと実装が完了し、実際にサーバーを起動しメッセージを送信すると、以下の結果が得られます。

MCP サーバーを利用しないケースの結果

スクショの通り、実装に漏れがあることが分かります。ここから、何回かやり取りをすると何とか正しい挙動にまでたどり着けるのですが、今回の目的である「一撃で実装する」には程遠いです。

これを Discord MCP を使うことで実装の精度を高めていきます。

MCP サーバーを利用するケース

今回導入する MCP サーバーは以下を拝借します。env の渡し方が少し気になったので fork して修正しても良いかもしれませんが、今回はそのまま利用します。

導入自体は簡単で、クローンとビルドをして、以下のような .mcp.json をプロジェクトルートに配置するだけです。

{
  "mcpServers": {
    "discord": {
      "command": "node",
      "args": ["/mcp-discord/build/index.js", "--config", ""]
    }
  }
}

このファイルを配置した状態で Claude Code を起動することで、Discord MCP が利用可能となります。この状態で、同じく Claude Code に「@README.md に従って実装して」と指示を送ります。

MCP サーバーを利用するケースの結果

数分待つと実装が完了するのですが、今回は Discord MCP を利用しているため、指定したチャンネルに Claude Code が検証した痕跡が残ります。

Discordのスクショ

重要なのは、 Discord MCP を導入することで、外部の API レスポンスをしっかりとパースできているかも含めてテストをしてくれている点 です。

スクショでは MCP 経由で何度か郵便番号を送信した形跡が残っていますが、要するにレスポンスが正常に返ってきていないため、自律的に修正を試みている様子が伺えます。

Claude Codeのログ

このように、Discord MCP を導入するだけで、実装の精度が上がります。特に外部のサービスと連携しなければいけない実装の場合、MCP は強力な武器となることが分かるでしょう。

まとめ

今回は Discord MCP を利用して、ワンショットの精度を高める方法を紹介しました。Discord Bot 開発以外でも同様のことが言えると思うので、ぜひ有効活用してみてください。

また、Discorders Cafe で様々な Discord に関する情報や Bot 開発のコミュニティとして育てていこうと思っていますので、よかったらご参加ください。

Discorders Cafe のポータルサイト

X で Discord の発信をしていきますので、よかったらフォローお願いします。



Source link

Views: 0

RELATED ARTICLES

返事を書く

あなたのコメントを入力してください。
ここにあなたの名前を入力してください

- Advertisment -