MCP Tools

VibeReady supports Model Context Protocol (MCP) servers that give your AI coding assistant access to up-to-date library documentation and live browser debugging. Setup takes 2-5 minutes.

---

What You Get

• Context7: Fetches the latest library documentation on demand, ensuring your AI assistant always references current APIs and patterns.
• Chrome DevTools: Enables live browser debugging, network analysis, and performance profiling directly through your AI assistant.

---

Setup

No manual installation is required. The npx command downloads packages automatically when needed.

Claude Code

Add the following to your ~/.claude.json configuration file:

{
  "mcpServers": {
    "context7": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@upstash/context7-mcp"],
      "env": {}
    },
    "chrome-devtools": {
      "type": "stdio",
      "command": "npx",
      "args": ["chrome-devtools-mcp@latest"],
      "env": {}
    }
  }
}

Other IDEs

Check your IDE’s MCP documentation for configuration instructions:

• Cursor: docs.cursor.com/mcp/overview
• Windsurf: docs.codeium.com/windsurf/mcp
• Other IDEs: Use the npx commands shown above.

---

Usage

Context7

Ask your AI assistant to use Context7 when working with external libraries:

Use Context7 to fetch the latest React Query v5 documentation
for data fetching patterns with Next.js App Router.

The assistant fetches the current documentation, combines it with your project patterns, and generates correct implementations.

When to use Context7:

• Implementing features with external libraries (React Query, Prisma, Clerk, etc.)
• When you are unsure about recent API changes
• When you need up-to-date code examples

Chrome DevTools

Ask your AI assistant to inspect and debug your running application:

Navigate to http://localhost:3000/dashboard using Chrome DevTools MCP.
Take a screenshot and inspect the layout. The sidebar is misaligned.

The assistant launches a browser, inspects the DOM and CSS, identifies the issue, and suggests a fix with specific line numbers.

When to use Chrome DevTools:

• Debugging UI issues such as layout, rendering, and visual bugs
• Network debugging for API failures and CORS errors
• Performance profiling for slow page loads and bottlenecks
• Inspecting console errors

---

Verify

Ask your AI assistant to confirm the setup:

List available MCP servers

You should see both context7 and chrome-devtools listed in the response.

---

Related Docs

• LLM Providers — configure AI model access for your application