DEV Community

mehmet akar
mehmet akar

Posted on

4

Context7 MCP Tutorial

#context7 #mcp #cursor #ai

Context7 and its tool Context7 MCP is so popular in AI-Vibe Coding world, nowadays. I want to mention it and create an article about it.

Context7 MCP is a tool that supercharges AI prompts with real-time, version-specific documentation and code examples. Whether you're using Claude, Cursor, VS Code, or another Model Context Protocol (MCP) client, Context7 helps eliminate hallucinated APIs and outdated examples by injecting live data into your LLM interactions.

We can see their popularity on github star graphics:

Star History Chart

🌟 Why Use Context7?

❌ Without Context7:

  • Outdated examples based on old training data.
  • AI hallucinations about APIs that don’t exist.
  • Generalized help for outdated package versions.

✅ With Context7:

  • Accurate, live documentation and examples pulled from the actual library.
  • Instant, relevant answers based on real packages and versions.
  • All you have to do is add use context7 to your prompt.

Examples: 

Create a basic Next.js project with app router. use context7
Enter fullscreen mode Exit fullscreen mode 
Create a script to delete the rows where the city is "" given PostgreSQL credentials. use context7
Enter fullscreen mode Exit fullscreen mode

🛠️ Getting Started

Requirements

  • Node.js ≥ v18.0.0
  • One of the following MCP clients:
    • Cursor
    • Windsurf
    • Claude Desktop
    • VS Code
    • Docker (optional)

📦 Installation Methods

1. Install via Smithery (for Claude Desktop) 

npx -y @smithery/cli install @upstash/context7-mcp --client claude
Enter fullscreen mode Exit fullscreen mode

🧭 Installation for Specific Clients

📍 Cursor

Steps:

  1. Go to: Settings → Cursor Settings → MCP → Add new global MCP server
  2. Or directly update ~/.cursor/mcp.json: 
{
  "mcpServers": {
    "context7": {
      "command": "npx",
      "args": ["-y", "@upstash/context7-mcp@latest"]
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

Alternative Runtimes:

Using Bun

{
  "mcpServers": {
    "context7": {
      "command": "bunx",
      "args": ["-y", "@upstash/context7-mcp@latest"]
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

Using Deno

{
  "mcpServers": {
    "context7": {
      "command": "deno",
      "args": ["run", "--allow-net", "npm:@upstash/context7-mcp"]
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

🌊 Windsurf

Add to your windsurf.mcp.json:

{
  "mcpServers": {
    "context7": {
      "command": "npx",
      "args": ["-y", "@upstash/context7-mcp@latest"]
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

🧩 VS Code / VS Code Insiders

Install via VS Code MCP Docs

{
  "servers": {
    "Context7": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@upstash/context7-mcp@latest"]
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

Install buttons:

🧠 Claude Code 

claude mcp add context7 -- npx -y @upstash/context7-mcp@latest
Enter fullscreen mode Exit fullscreen mode

💻 Claude Desktop

Update claude_desktop_config.json:

{
  "mcpServers": {
    "Context7": {
      "command": "npx",
      "args": ["-y", "@upstash/context7-mcp@latest"]
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

🐳 Using Docker

1. Dockerfile

Create a file named Dockerfile:

FROM node:18-alpine

WORKDIR /app

RUN npm install -g @upstash/context7-mcp@latest

CMD ["context7-mcp"]
Enter fullscreen mode Exit fullscreen mode

2. Build the Docker Image 

docker build -t context7-mcp .
Enter fullscreen mode Exit fullscreen mode

3. Configure MCP Client

Example client_mcp_settings.json:

{
  "mcpServers": {
    "Context7": {
      "autoApprove": [],
      "disabled": false,
      "timeout": 60,
      "command": "docker",
      "args": ["run", "-i", "--rm", "context7-mcp"],
      "transportType": "stdio"
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

Note: The tag context7-mcp should match your docker build tag.

🧰 Available Tools

resolve-library-id

Resolves a general library name into a Context7-compatible ID.

  • libraryName (required)

get-library-docs

Fetch docs using Context7 ID.

  • context7CompatibleLibraryID (required)
  • topic (optional): e.g., "routing", "hooks"
  • tokens (optional, default 5000)

⚙️ Development

Clone the repo and install dependencies:

bun i
Enter fullscreen mode Exit fullscreen mode

Build the project:

bun run build
Enter fullscreen mode Exit fullscreen mode

Local config example:

{
  "mcpServers": {
    "context7": {
      "command": "npx",
      "args": ["tsx", "/path/to/folder/context7-mcp/src/index.ts"]
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

🔬 Test with MCP Inspector 

npx -y @modelcontextprotocol/inspector npx @upstash/context7-mcp@latest
Enter fullscreen mode Exit fullscreen mode

🧯 Context7 Troubleshooting

ERR_MODULE_NOT_FOUND?

Switch from npx to bunx:

{
  "mcpServers": {
    "context7": {
      "command": "bunx",
      "args": ["-y", "@upstash/context7-mcp@latest"]
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

Context7 MCP Errors?

  1. Remove @latest from package name.
  2. Try bunx.
  3. Try deno.

Top comments (0)

👋 Kindness is contagious

If this article connected with you, consider tapping ❤️ or leaving a brief comment to share your thoughts!

Okay