MCP Server Setup for Claude Code: Complete Guide

Ready to turn Claude Code from a brilliant chatterbox into a full-blown action hero? You've come to the right place. By configuring MCP servers, you're essentially handing Claude the keys to your entire toolkit — databases, design systems, search engines, you name it. Let's make it happen.

Wait, What Actually Is MCP?

MCP stands for Model Context Protocol. Think of it as the universal translator between Claude Code and every external service or tool you love — web search APIs, Postgres databases, UI component libraries, browser dev tools, and way more. Suddenly, your AI assistant goes from just chatting to actually doing things.

flowchart TD
    A[Claude Code Tool Request] --> B{MCP Config ~/.claude.json};
    B -- HTTP URL --> C[External API / Database];
    B -- Bunx Command --> D[Local Node.js Package];
    C --> E[Relevant Data / Action];
    D --> E;
    E --> A;
    style A fill:#3b82f6,color:#fff
    style B fill:#f59e0b,color:#fff
    style C fill:#10b981,color:#fff
    style D fill:#6366f1,color:#fff
    style E fill:#ec4899,color:#fff

Let's Get Our Hands Dirty: The Setup

Time to crack open your config file. Fire up your favorite editor and run one of these commands:

# Open with your preferred editor
zed ~/.claude.json
# or
code ~/.claude.json
# or
nano ~/.claude.json

Now paste in the mcpServers block below — it's your command center for wiring up all the coolest tools in one place:

{
  "mcpServers": {
    "exa": {
      "command": "bunx",
      "args": [
        "--bun",
        "mcp-remote",
        "https://mcp.exa.ai/mcp?tools=web_search_exa,get_code_context_exa,crawling_exa,company_research_exa,linkedin_search_exa,deep_researcher_start,deep_researcher_check&exaApiKey=YOUR_API_KEY"
      ]
    },
    "neon": {
      "type": "http",
      "url": "https://mcp.neon.tech/mcp"
    },
    "shadcn": {
      "command": "bunx",
      "args": ["--bun", "shadcn@latest", "mcp"]
    },
    "context7": {
      "type": "http",
      "url": "https://mcp.context7.com/mcp",
      "headers": { "CONTEXT7_API_KEY": "YOUR_API_KEY" }
    },
    "kibo-ui": {
      "command": "bunx",
      "args": ["--bun", "mcp-remote", "https://www.kibo-ui.com/api/mcp/mcp"]
    },
    "chrome-devtools": {
      "command": "bunx",
      "args": ["--bun", "chrome-devtools-mcp@latest"]
    },
    "Astro docs": {
      "type": "http",
      "url": "https://mcp.docs.astro.build/mcp"
    }
  }
}

warning API Key Alert!

Don't leave YOUR_API_KEY in there like a digital time capsule. Swap those placeholders with your actual keys, or the Exa and Context7 servers will stay locked up tight.

Your MCP Server Command Center

Here's a glance at what each server brings to the table — and the superpower it unlocks for Claude:

MCP Server Quick Reference
Server	Superpower
exa	Search the web, crawl pages, pull code context, research companies, and peek at LinkedIn profiles
neon	Hook directly into Neon PostgreSQL databases
shadcn	Install shadcn/ui components like magic
context7	Instantly search Context7 documentation
kibo-ui	Pull in beautiful Kibo UI components on the fly
chrome-devtools	Debug your app right from the Claude interface using Chrome DevTools
Astro docs	Look up Astro framework docs without leaving your editor

Server Connection Styles (Show Me the Code!)

You've got a few ways to connect your servers — choose the one that fits your vibe. For HTTP, it's clean and direct. Need authentication? Just add headers.

{
  "neon": {
    "type": "http",
    "url": "https://mcp.neon.tech/mcp"
  },
  "context7": {
    "type": "http",
    "url": "https://mcp.context7.com/mcp",
    "headers": { "CONTEXT7_API_KEY": "YOUR_API_KEY" }
  }
}

Prefer working with local packages? Use the Bunx Command style. Need to hit a remote server? Bunx Remote is your friend:

{
  "shadcn": {
    "command": "bunx",
    "args": ["--bun", "shadcn@latest", "mcp"]
  },
  "kibo-ui": {
    "command": "bunx",
    "args": ["--bun", "mcp-remote", "https://www.kibo-ui.com/api/mcp/mcp"]
  }
}

Supercharging shadcn/ui with Community Registries

If you're riding the shadcn/ui wave — and honestly, who isn't? — you can supercharge your components.json with extra registries. This pulls in components from dozens of community libraries, instantly expanding your design system beyond the defaults.

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "base-lyra",
  "rsc": false,
  "tsx": true,
  "tailwind": {
    "config": "",
    "css": "src/index.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "iconLibrary": "lucide",
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "registries": {
    "@reui": "https://reui.io/r/{name}.json",
    "@formcn": "https://formcn.dev/r/{name}.json",
    "@abui": "https://abui.io/r/{name}.json",
    "@better-upload": "https://better-upload.com/r/{name}.json",
    "@assistant-ui": "https://r.assistant-ui.com/{name}.json",
    "@billingsdk": "https://billingsdk.com/r/{name}.json",
    "@coss": "https://coss.com/ui/r/{name}.json",
    "@diceui": "https://diceui.com/r/{name}.json",
    "@hextaui": "https://hextaui.com/r/{name}.json",
    "@kibo-ui": "https://www.kibo-ui.com/r/{name}.json",
    "@kokonutui": "https://kokonutui.com/r/{name}.json",
    "@lucide-animated": "https://lucide-animated.com/r/{name}.json",
    "@magicui": "https://magicui.design/r/{name}",
    "@manifest": "https://ui.manifest.build/r/{name}.json",
    "@plate": "https://platejs.org/r/{name}.json",
    "@react-bits": "https://reactbits.dev/r/{name}.json",
    "@shadcn-editor": "https://shadcn-editor.vercel.app/r/{name}.json",
    "@tour": "https://onboarding-tour.vercel.app/r/{name}.json",
    "@uitripled": "https://ui.tripled.work/r/{name}.json",
    "@wandry-ui": "https://ui.wandry.com.ua/r/{name}.json"
  }
}

Here's what all those registries unlock for you:

@reui – ReUI components
@formcn – Form components
@abui – AB UI components
@better-upload – File upload components
@assistant-ui – AI assistant UI
@billingsdk – Billing components
@coss – COSS UI
@diceui – Dice UI components
@hextaui – Hexta UI components
@kibo-ui – Kibo UI components
@kokonutui – Kokonut UI
@lucide-animated – Animated Lucide icons
@magicui – Magic UI effects
@manifest – Manifest UI
@plate – Rich text editor
@react-bits – React components
@shadcn-editor – Code editor
@tour – Onboarding tours
@uitripled – Tripled UI
@wandry-ui – Wandry UI

Install from Any Registry

Once you've got those registries wired up, installing components is as easy as pointing the CLI to the right namespace. Watch how effortless this is:

# From the default registry
bunx shadcn@latest add button

# From a custom registry
bunx shadcn@latest add @kibo-ui/kanban
bunx shadcn@latest add @magicui/bento-grid
bunx shadcn@latest add @plate/editor

Uh Oh, Something Went Wrong (Troubleshooting)

Ran into a wall? Don't worry — here's how to knock it down.

MCP server not connecting?

Double-check the server URL in your config. Make sure your API keys are correct and haven't expired. And yes, you'll need to restart Claude Code after changing the config — it's one of those things.

Bunx command failing?

First, verify Bun is installed by running bun --version. If it's missing, grab it with:

Registry component not found?

Confirm the registry URL in components.json is exactly right. Check that the component name actually exists in that registry. Then update your shadcn CLI with bun add -g shadcn@latest.

What's Next? The World Is Your Oyster

You've got your MCP servers humming along. Claude is talking to databases, pulling components, searching the web, and debugging like a pro. So what's next? Go deeper. Explore custom plugins. Build your own server. The toolkit is yours now.

Set up custom aliases for faster workflows
Dive into Claude Plugin Development
Contribute your own registry to the community

Bahrul Bangsawan

MCP Server Setup for Claude Code: A Complete Guide