ホームページ - EY-Office

2025-05-20

AIにコードを書いてもらうならContext7 MCPは必須ですね

カテゴリー：AI

以前に書いたブログに、いつもは素晴らしいコードを生成してくれる Claude 3.7 Sonnet がTailwindCSS 4.0のバージョンアップを知らずに3.X用のコードを生成してしまい残念な結果になってしまった事を書きました。
しかし、最近 Context7 MCP という色々なOSSソフトウェアの最新情報をAIモデルに教えてくれるMCPが現れました。

Context7 Bing Image Creatorが生成した画像を使っています

Context7 MCPの使い方

Context7 MCPの使い方は、GitHubにあるように

MCP Serverのインストール

MCPサーバーはここでは、SmitheryというMCPサーバーのホスティングしてくれるサービスを利用します。利用するためにSmitheryにログインしAPI KeysページでAPIキーを作成しておきます。

$ npx -y @smithery/cli install @upstash/context7-mcp --client claude

インストールの途中でSmitheryのAPIキーを設定します。

Roo Code設定

Roo CodeのMCP Servers画面で設定ファイルに以下を追加します（今回はグローバルMCP mcp_settings.jsonに設定しました）。

{
  "mcpServers": {
    ・・既存の設定・・  ,
    "Context7": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@upstash/context7-mcp@latest"]
    }
  }
}

利用（プロンプト）

プロンプトにuse context7を追加します。

〜〜〜なコードを作って下さい。use context7

Claude 3.7 Sonnetでリトライ

以前に書いたブログのコードをClaude 3.7 Sonnetでリトライしてみましたが、なんと今回はTailwindCSS 4.0用のコードを正しく生成してしまいまいました。😅 何度か試しましたが上手く行きました。なぜ❓

Rooはこのファイルを読みたい:
  janken-app/app/globals.css

グローバルスタイルを確認しました。Tailwind CSSが正しく設定されているようです。次に、レイアウトファイルを確認します。

use context7 の効果

再現出来なかったので、Roo CodeのプロンプトをAskに切り替えて以下の質問をしてみました。またAIモデルも古いClaude 3.5 Sonnetに切り替えて試しました。

ログ（一部省略）

タスク
next.jsの最新バージョンを教えてください

・・・

✔ タスク完了
Next.jsの最新バージョンは14.1.0です（2024年5月現在）。

2024年5月現在という日付はClaude 3.5 Sonnetのリリース日に近いので、Claude 3.5の知っている情報のようですね。

そこで、プロンプトにuse context7を追加して試すと

ログ（一部省略）

タスク
next.jsの最新バージョンを教えてください  use context7

ユーザーからのフィードバックによると、Next.jsの最新バージョンについてContext7を使って調べるよう指示されています。
今回は「version」というトピックで検索しましたが、より具体的な情報を得るために、別のトピックで検索してみることも考えられます。例えば「latest version」や「release」などのトピックで検索してみましょう。

Context7を使用して、Next.jsの最新バージョンについてより詳細な情報を取得します。

・・・

取得したドキュメントから、Next.jsの最新バージョンについての情報を分析します。

・・・

Context7から取得した情報を分析すると、Next.jsの最新バージョンに関する情報が見つかりました。特に重要な情報は以下の通りです：
「Updating Package Dependencies for Next.js」というタイトルのスニペットでは、package.jsonの差分が示されており、Next.jsのバージョンが「15.0.4-canary.43」に更新されていることが分かります。
「Manual Package Installation for Next.js 15」というタイトルのスニペットでは、Next.js 15の手動インストール方法が説明されています。
「Installing Next.js 15 Using Codemod」というタイトルのスニペットでは、コードモッドを使用したNext.js 15へのアップグレード方法が説明されています。

・・・

✔ タスク完了
Next.jsの最新バージョンは15です（2024年5月現在）。

2024年5月現在というのは変ですが、最新のNext.jsはバージョン15.3.2なので最新バージョンは15ですは正解ですね。