🍖

Context7を使ってAIエージェントに最新ドキュメントを提供する

しろちゃん

2025/10/17に公開

Model Context Protocol

はじめに

Context7とは、AIエージェントに最新のコードドキュメントを提供するMCPサーバーです。
LLMは訓練時点の学習データに依存しているため、最新のバージョンでは廃止されたAPIや、存在しないメソッドを提案したり、古いパッケージバージョンの情報に基づいた回答をしてしまうことがあります。

Context7を利用すれば公式ドキュメントから最新のバージョン固有の情報をリアルタイムで取得し、AIエージェントのプロンプトコンテキストに直接注入することで、より正確で最新の情報に基づいたコード提案が可能になります。

https://context7.com/

https://github.com/upstash/context7

実践

準備

Claude CodeにContext7のmcpサーバーを登録するのはこれだけでOKです。

$ claude mcp add context7 -- npx -y @upstash/context7-mcp

または

claude mcp add --transport http context7 https://mcp.context7.com/mcp

> /mcp
╭───────────────────────────────────────────────────────────────────
│ Manage MCP servers                                        
│                                                           
│ ❯ 1. context7            ✔ connected · Enter to view details

このように表示されていれば、準備完了です。

実践

何も使用しない回答

質問

> 仮想環境を作り生成AIを利用するチャットボットを作成したいです。
RAGの機能も持たせたいと考えています。
どのような技術スタックを採用すべきかいくつか案を出してください。

回答

  推奨案

  初心者または迅速な開発を重視: 案1 (LangChain + OpenAI) または 案2 (Ollama)

  コスト重視でローカル開発: 案2 (Ollama)

  Webアプリとして本格的に開発: 案3 (Next.js + Vercel AI SDK)

長いので回答全文は折りたたんでいます。
以下をクリックしてご覧ください

回答全文

⏺ 生成AIを利用したRAG機能付きチャットボットの技術スタック案をいくつか提案します。
案1: Python + LangChain + OpenAI (標準的な構成)
技術スタック:
フレームワーク: LangChain / LlamaIndex
LLM: OpenAI GPT-4 / GPT-3.5
ベクトルDB: Chroma / FAISS (ローカル) または Pinecone (クラウド)
Webフレームワーク: FastAPI + Streamlit
埋め込みモデル: OpenAI Embeddings / sentence-transformers
メリット:
豊富なドキュメントとコミュニティサポート
素早いプロトタイピングが可能
LangChainのRAGチェーンがすぐに使える
デメリット:
OpenAI APIの利用コストが発生
案2: Python + Ollama (完全ローカル構成)
技術スタック:
LLM: Ollama (Llama 3, Gemma, Mistralなど)
ベクトルDB: Chroma / Qdrant
フレームワーク: LangChain + Ollama連携
Webフレームワーク: Gradio / Streamlit
埋め込みモデル: sentence-transformers (日本語: multilingual-e5)
メリット:
完全無料でプライバシー保護
インターネット接続不要
カスタマイズ性が高い
デメリット:
ローカルでの計算リソースが必要
応答速度がハードウェアに依存
案3: TypeScript/JavaScript + Vercel AI SDK (モダンWeb構成)
技術スタック:
フレームワーク: Next.js + Vercel AI SDK
LLM: OpenAI / Anthropic Claude
ベクトルDB: Supabase (pgvector) / Pinecone
フロントエンド: React + TailwindCSS
埋め込み: OpenAI Embeddings
メリット:
モダンなWebアプリケーション構築
リアルタイムストリーミング対応
Vercelでの簡単デプロイ
デメリット:
Pythonエコシステムより選択肢が少ない
API利用コスト
案4: Python + Azure OpenAI + Azure AI Search (エンタープライズ構成)
技術スタック:
LLM: Azure OpenAI Service
RAG: Azure AI Search (旧Azure Cognitive Search)
フレームワーク: Semantic Kernel / LangChain
Webフレームワーク: FastAPI + React
認証: Azure AD
メリット:
エンタープライズグレードのセキュリティ
コンプライアンス対応
スケーラビリティが高い
デメリット:
コストが高い
セットアップが複雑
案5: Python + Hugging Face + Weaviate (オープンソース重視)
技術スタック:
LLM: Hugging Face Models (Llama, Mistral, Gemma)
ベクトルDB: Weaviate / Milvus
フレームワーク: Haystack / LlamaIndex
Webフレームワーク: FastAPI + Vue.js
埋め込み: Hugging Face sentence-transformers
メリット:
完全オープンソース
柔軟なモデル選択
コミュニティが活発
デメリット:
インフラ管理が必要
チューニングに時間がかかる可能性
推奨案
初心者または迅速な開発を重視: 案1 (LangChain + OpenAI) または 案2 (Ollama)
コスト重視でローカル開発: 案2 (Ollama)
Webアプリとして本格的に開発: 案3 (Next.js + Vercel AI SDK)
どの方向性で進めたいか教えていただければ、具体的なセットアップ手順をサポートします！

context7を使った回答

質問

> context7のMCPサーバーも利用して最新のドキュメントを参照しながら改めて提案してください。

回答

  推奨案（ユースケース別）

  | ユースケース         | 推奨案                              | 理由                            |
  |----------------|----------------------------------|-------------------------------|
  | 迅速なプロトタイピング    | 案1 (LangChain + OpenAI)          | 最も豊富なドキュメントとサンプルコード           |
  | コスト重視・プライバシー重視 | 案2 (LlamaIndex + Ollama)         | 完全無料・ローカル完結                   |
  | モダンWebアプリ      | 案3 (Vercel AI SDK + Next.js)     | TypeScript・ストリーミング・Vercelデプロイ |
  | エージェント機能も必要    | 案4 (LlamaIndex + OpenAI)         | LlamaIndexのエージェント統合が優秀        |
  | 学習・実験用         | 案5 (LangChain + Ollama + Chroma) | すべて無料・ローカル                    |

  ---
  推奨の詳細

  初心者または最短で動かしたい場合:
  - 案2 (LlamaIndex + Ollama) - わずか4行でRAGエンジン構築可能

  本番環境で使いたい場合:
  - 案1 (LangChain + OpenAI) または 案3 (Vercel AI SDK)

log

⏺ 最新のドキュメントを参照しながら、技術スタック案を提案します。主要なライブラリの最新情報を取得しますね。

⏺ context7 - resolve-library-id (MCP)(libraryName: "langchain")
⎿ Available Libraries (top matches):

 Each result includes:
 … +205 lines (ctrl+o to expand)

⏺ context7 - resolve-library-id (MCP)(libraryName: "llamaindex")
⎿ Available Libraries (top matches):

 Each result includes:
 … +199 lines (ctrl+o to expand)

⏺ context7 - resolve-library-id (MCP)(libraryName: "vercel ai sdk")
⎿ Available Libraries (top matches):

 Each result includes:
 … +202 lines (ctrl+o to expand)

⏺ context7 - resolve-library-id (MCP)(libraryName: "ollama")
⎿ Available Libraries (top matches):

 Each result includes:
 … +199 lines (ctrl+o to expand)

⏺ context7 - get-library-docs (MCP)(context7CompatibleLibraryID: "/websites/python_langchain", topic: "RAG retrieval augmented generation", tokens: 3000)
⎿ ### Implement a Basic RAG Workflow with LangChain and OpenAI

 Source: https://python.langchain.com/docs/concepts/rag
 … +365 lines (ctrl+o to expand)

⏺ context7 - get-library-docs (MCP)(context7CompatibleLibraryID: "/run-llama/llama_index", topic: "RAG and indexing", tokens: 3000)
⎿ ### Create a LlamaIndex Query Engine

 Source: https://github.com/run-llama/llama_index/blob/main/docs/examples/evaluation/RAGChecker.ipynb
 … +442 lines (ctrl+o to expand)

⏺ context7 - get-library-docs (MCP)(context7CompatibleLibraryID: "/vercel/ai", topic: "RAG and retrieval", tokens: 3000)
⎿ ### Implement Retrieval Augmented Generation (RAG) with AI SDK and Node.js

 Source: https://github.com/vercel/ai/blob/main/content/cookbook/05-node/100-retrieval-augmented-generation.mdx
 … +431 lines (ctrl+o to expand)

⏺ context7 - get-library-docs (MCP)(context7CompatibleLibraryID: "/ollama/ollama", topic: "getting started and usage", tokens: 2000)
⎿ ### Start Ollama Server

 Source: https://github.com/ollama/ollama/blob/main/README.md
 … +305 lines (ctrl+o to expand)

長いので回答全文は折りたたんでいます。
以下をクリックしてご覧ください

回答全文

⏺ 最新のドキュメントを参照した上で、RAG機能付きチャットボットの技術スタック案を改めて提案します。
案1: Python + LangChain + OpenAI (最も実績が豊富)
技術スタック:
LLMフレームワーク: LangChain (12,000+のコード例)
LLM: OpenAI GPT-4 / GPT-3.5
ベクトルDB: Chroma (軽量・ローカル) / Pinecone (クラウド)
埋め込みモデル: OpenAI Embeddings / sentence-transformers
Webフレームワーク: FastAPI + Streamlit
オーケストレーション: LangGraph (ステートフル管理)
実装例（最新のLangChain）:
from langchain_openai import ChatOpenAI
from langchain_community.vectorstores import Chroma
from langchain_text_splitters import RecursiveCharacterTextSplitter
from langchain_openai import OpenAIEmbeddings
from langgraph.graph import StateGraph

# ドキュメント読み込み & チャンク分割
text_splitter = RecursiveCharacterTextSplitter(
    chunk_size=1000,
    chunk_overlap=200
)
splits = text_splitter.split_documents(docs)

# ベクトルストア作成
vectorstore = Chroma.from_documents(
    documents=splits,
    embedding=OpenAIEmbeddings()
)

# RAGチェーンをLangGraphで構築
def retrieve(state):
    retrieved_docs = vectorstore.similarity_search(state["question"])
    return {"context": retrieved_docs}

def generate(state):
    docs_content = "\n\n".join(doc.page_content for doc in state["context"])
    response = llm.invoke(prompt.format(question=state["question"], context=docs_content))
    return {"answer": response.content}

graph = StateGraph(State).add_sequence([retrieve, generate])
メリット:
最も成熟したエコシステム（12,000+のコード例）
LangGraphによる高度なワークフロー管理
豊富なドキュメントとコミュニティサポート
デメリット:
OpenAI APIの従量課金コスト
案2: Python + LlamaIndex + Ollama (完全ローカル・高性能)
技術スタック:
LLMフレームワーク: LlamaIndex (13,600+のコード例)
LLM: Ollama (Llama 3.2, Gemma 3, Mistralなど)
ベクトルDB: Qdrant / Chroma
埋め込みモデル: sentence-transformers (日本語対応: multilingual-e5)
Webフレームワーク: Gradio / Streamlit
特徴: マルチモーダル対応（画像+テキスト）
実装例（最新のLlamaIndex）:
from llama_index.core import VectorStoreIndex, SimpleDirectoryReader
from llama_index.llms.ollama import Ollama

# ドキュメント読み込み
documents = SimpleDirectoryReader("./data").load_data()

# インデックス作成
index = VectorStoreIndex.from_documents(documents)

# Ollamaと統合したクエリエンジン
llm = Ollama(model="llama3.2")
query_engine = index.as_query_engine(llm=llm, similarity_top_k=3)

# RAG実行
response = query_engine.query("あなたの質問")
print(response)
Ollamaのセットアップ:
# Ollamaインストール後
ollama run llama3.2
メリット:
完全無料・プライバシー保護
LlamaIndexはRAGに特化（インデックス作成が4行で完結）
マルチモーダルRAG対応（画像+テキスト検索）
日本語モデルも利用可能
デメリット:
ローカルGPU推奨（CPU版は遅い可能性）
案3: TypeScript + Vercel AI SDK + Next.js (モダンWeb)
技術スタック:
フレームワーク: Vercel AI SDK (2,249のコード例、Trust Score 10)
LLM: OpenAI / Anthropic Claude
ベクトルDB: Supabase pgvector / Pinecone
フロントエンド: Next.js 15 + React + TailwindCSS
埋め込み: OpenAI Embeddings
ORM: Drizzle ORM
特徴: ストリーミングレスポンス、リアルタイムUI
実装例（最新のVercel AI SDK）:
import { openai } from '@ai-sdk/openai';
import { embed, embedMany, generateText, cosineSimilarity } from 'ai';

// ドキュメントの埋め込み生成
const { embeddings } = await embedMany({
  model: openai.textEmbeddingModel('text-embedding-3-small'),
  values: chunks,
});

// 質問の埋め込み
const { embedding } = await embed({
  model: openai.textEmbeddingModel('text-embedding-3-small'),
  value: question,
});

// コサイン類似度で検索
const context = db
  .map(item => ({
    document: item,
    similarity: cosineSimilarity(embedding, item.embedding),
  }))
  .sort((a, b) => b.similarity - a.similarity)
  .slice(0, 3);

// RAG生成
const { text } = await generateText({
  model: openai('gpt-4o'),
  prompt: `Context: ${context}\n\nQuestion: ${question}`,
});

Next.js API Route（ストリーミング対応）:
export async function POST(req: Request) {
  const { messages } = await req.json();

  const result = streamText({
    model: openai('gpt-4o'),
    messages: convertToModelMessages(messages),
    tools: {
      getInformation: tool({
        description: 'get information from knowledge base',
        inputSchema: z.object({
          question: z.string(),
        }),
        execute: async ({ question }) => findRelevantContent(question),
      }),
    },
  });

  return result.toUIMessageStreamResponse();
}
メリット:
モダンなWebアプリケーション（TypeScript完全対応）
リアルタイムストリーミング
Vercelでのワンクリックデプロイ
AI SDK Toolsによる高度なツール統合
デメリット:
API利用コスト
Pythonエコシステムより選択肢が少ない
案4: Python + LlamaIndex + OpenAI (バランス型)
技術スタック:
LLMフレームワーク: LlamaIndex
LLM: OpenAI GPT-4
ベクトルDB: Qdrant (本番向け) / Chroma (開発向け)
埋め込み: OpenAI Embeddings
Webフレームワーク: FastAPI + React
特徴: エージェント機能統合可能
実装例:
from llama_index.core import VectorStoreIndex, SimpleDirectoryReader
from llama_index.core.agent import FunctionAgent

# RAGインデックス
documents = SimpleDirectoryReader("data").load_data()
index = VectorStoreIndex.from_documents(documents)
query_engine = index.as_query_engine()

# エージェントツールとして統合
async def search_documents(query: str) -> str:
    response = await query_engine.aquery(query)
    return str(response)

# エージェント作成
agent = FunctionAgent(tools=[search_documents])
メリット:
LlamaIndexの高速インデックス作成
OpenAIの高品質な応答
エージェント機能との統合が容易
デメリット:
API利用コスト
案5: Python + LangChain + Ollama + Chroma (コスパ最強)
技術スタック:
LLMフレームワーク: LangChain
LLM: Ollama（完全ローカル）
ベクトルDB: Chroma（完全ローカル）
埋め込み: sentence-transformers
Webフレームワーク: Streamlit
特徴: すべてローカルで完結
実装例:
from langchain_community.llms import Ollama
from langchain_community.vectorstores import Chroma
from langchain_community.embeddings import HuggingFaceEmbeddings

# ローカルLLM
llm = Ollama(model="llama3.2")

# ローカル埋め込み
embeddings = HuggingFaceEmbeddings(model_name="intfloat/multilingual-e5-large")

# ローカルベクトルDB
vectorstore = Chroma.from_documents(
    documents=splits,
    embedding=embeddings,
    persist_directory="./chroma_db"
)

# RAGチェーン
retriever = vectorstore.as_retriever()
メリット:
完全無料
データが外部に出ない（プライバシー保護）
インターネット接続不要
デメリット:
応答品質はハードウェアに依存
推奨案（ユースケース別）


ユースケース
推奨案
理由


迅速なプロトタイピング
案1 (LangChain + OpenAI)
最も豊富なドキュメントとサンプルコード

コスト重視・プライバシー重視
案2 (LlamaIndex + Ollama)
完全無料・ローカル完結

モダンWebアプリ
案3 (Vercel AI SDK + Next.js)
TypeScript・ストリーミング・Vercelデプロイ

エージェント機能も必要
案4 (LlamaIndex + OpenAI)
LlamaIndexのエージェント統合が優秀

学習・実験用
案5 (LangChain + Ollama + Chroma)
すべて無料・ローカル

推奨の詳細
初心者または最短で動かしたい場合:
案2 (LlamaIndex + Ollama) - わずか4行でRAGエンジン構築可能
本番環境で使いたい場合:
案1 (LangChain + OpenAI) または 案3 (Vercel AI SDK)
どの方向性で進めたいか教えていただければ、具体的なセットアップ手順と仮想環境の構築をサポートします！

ユースケース	推奨案	理由
迅速なプロトタイピング	案1 (LangChain + OpenAI)	最も豊富なドキュメントとサンプルコード
コスト重視・プライバシー重視	案2 (LlamaIndex + Ollama)	完全無料・ローカル完結
モダンWebアプリ	案3 (Vercel AI SDK + Next.js)	TypeScript・ストリーミング・Vercelデプロイ
エージェント機能も必要	案4 (LlamaIndex + OpenAI)	LlamaIndexのエージェント統合が優秀
学習・実験用	案5 (LangChain + Ollama + Chroma)	すべて無料・ローカル

比較

2つの回答を見比べてみてどうでしょうか？
Context7を利用した方がより具体的で詳細な回答が得られたと思いませんか？

通常の回答は、AIが持つ一般的な知識から生成された内容です。技術スタックの選択肢を体系的に整理し、それぞれの特徴を説明していますが、あくまで概要レベルの情報提供にとどまっています。これは従来のAIチャットボットでよく見られる「教科書的な回答」の典型例です。

Context7を活用した回答では、より実践的な内容になっています。最新のドキュメントを参照できることで、LangGraphやNext.js 15、マルチモーダルRAGといった最新の技術要素を取り入れた提案が可能になりました。また、各案に実装コードが追加され、LangChainの12,000以上のコード例といった具体的な数値情報も提供されています。これらは開発時の判断材料として役立つ情報です。

まとめ

RAG機能付きチャットボットの技術スタックについて、2つの異なる回答をご覧いただきました。

最も印象的な違いは、推奨案の提示方法でした。
Context7なしでは「初心者向け」「コスト重視」といった簡潔な推奨でしたが、Context7ありでは「迅速なプロトタイピング」「エージェント機能統合」「学習・実験用」など、具体的なユースケースごとに最適な技術スタックを比較表で示されていました。

この違いは、Context7を使うことで回答がより具体的になったことを示しています。通常の回答では技術スタックの概要説明でしたが、Context7版では実装コードや利用実績の数値が追加され、ユースケース別の比較表も用意されています。
基本構成は同じ5つの技術スタック案ですが、Context7によって情報の深さと実用性が向上し、特に開発者にとってはコード例がそのまま使える点が大きな改善となっていました。

MIXI DEVELOPERS Tech Blog

株式会社MIXIのZenn版テックブログです。実務で得た技術知見や個人的に調べたことなどを紹介しています。

はじめに

実践

準備

実践

何も使用しない回答

context7を使った回答

比較

まとめ

Discussion