はじめに

この記事はレコチョク Advent Calendar 2025 の10日目の記事となります。 

こんにちは！フロントエンドエンジニアの坂本です。
最近は寒さから来る眠気と戦うため、w.o.dの『TOKYO CALLING』を聴いてテンションを上げてから仕事を始める日々を送っています。

w.o.d. - TOKYO CALLING [OFFICIAL MUSIC VIDEO]

最近の困りごと

突然ですが、皆さんはコーディングを行う上でAIを使っていますか？（この記事を読もうとした時点で使っていそうですが）
私は使っていなかった頃のことを思い出しづらくなってきた程度には日常的に使っています。

しかし、時折間違った情報をあたかも本当であるかのように提案してくる事象に悩まされることがあります。この記事を読んでくださっているあなたも、同じような目に遭ったことがあるのではないでしょうか？
個人的に困ったのが、StoryBookやESLintといったツールの最新の安定版バージョンを使おうとした際に、AIがそれらを存在しないバージョンとして修正しようとしたことです。

ご存知の方も多いかと思いますが、この現象はハルシネーションと呼ばれています。簡単に説明すると、AIが事実とは異なる情報をあたかも真実であるかのように生成する現象のことです。ハルシネーションの原因はいくつかありますが、そのうちの一つがナレッジカットオフ（学習データの最終更新日）です。

最近は回答の生成時にWeb検索が用いられることで、ナレッジカットオフの影響を受けることが少なくなってきました。しかし、使用するモデルや指示の内容によっては依然この問題に悩まされることもあるでしょう。特にフロントエンド領域ではフレームワークやライブラリ、パッケージの更新頻度が高く、プロンプトに工夫が無いと最新の仕様に追いついていない回答が目立つように感じます。

そうだ、Context7 MCP Serverを使おう

そんな時に役立つのがContext7 MCP Serverです（以下、Context7とします）。

このMCPサーバーを使うことで、AIが最新のドキュメントを参照して回答を行うことが出来るようになります。
※MCPサーバーとは、簡単に説明するとAIと外部システムとを接続する際の中継役のことです。

利用可能なドキュメントの一覧・更新日は下記のページで確認することが出来ます。

Context7 - Up-to-date documentation for LLMs and AI code editors

導入方法はContext7のREADMEにあるのでそちらをご確認ください。Cursor、VSCode、Claude Code、Windsurfといった各ツールに対応したセクションが存在するため、お使いの環境に合わせて参照してください。別個の導入方法について記述すると冗長になるため本記事では割愛します。

なお、上記の導入手順で求められるAPI Keyは以下の手順で発行が可能です。メールアドレスでのアカウント登録が必要ですが、Publicなリポジトリを参照する限りは無料で利用できます（記事執筆時点）。

API Keyの発行方法

Context7のアカウントを登録しサインインした後、ダッシュボードにアクセスします。
API KeysセクションにCreate API Keyボタンがあるので、それを押下します。

するとこのようなモーダルが出てきますので、必要であれば識別名を入力しCreate API Keyを押下します。

API Keyが発行されました。このモーダルを閉じるとコピーできなくなるため、どこかへ控えてからDoneを押しましょう。

あとはContext7のREADMEを参考に、お使いの環境に合わせてAPI Keyをセットするだけで利用可能になります。

まとめ

Context7を導入することで、ハルシネーションを抑えつつ、より効率的にコーディングでAIを活用出来るようになります。
「メジャーバージョンのアップデートをしなきゃいけないけどまだ情報が少ない…」といった場合や、「新しいバージョンで追加された実験的機能をAIのサポートを受けながら試してみたい！」といった場合によりその効力を実感することでしょう。
導入の手間も大きくないので、未体験の方はぜひこの機会に使ってみてはいかがでしょうか。

明日のレコチョク Advent Calendar 2025 は11日目「LibreChatベースのサービス開発で学んだRAGとRAG API入門」です。お楽しみに！

参考にしたもの

この記事はレコチョクのエンジニアブログの記事を転載したものとなります。