Skip to main content
BB

Bahrul Bangsawan

AvailableMakassar, Indonesia
BB

Bahrul Bangsawan

Growth Hacker at the intersection of Data, Marketing, and Tech. Helping brands scale with data-driven strategies and modern technology.

Available for HireMakassar, Indonesia ๐Ÿ‡ฎ๐Ÿ‡ฉ
Book a Call

Blog ยท Guides

MCP Server Setup for Claude Code: A Complete Guide

This guide walks you through configuring MCP servers for Claude Code by editing ~/.claude.json, including HTTP and bunx connections, API key setup, and shadcn registries.

MCP Configuration4 min read

Get Your MCP Server Setup Rolling

Ready to unlock the full potential of Claude Code? Youโ€™re in the right spot. This guide walks you through configuring MCP (Model Context Protocol) servers by editing ~/.claude.json โ€” and itโ€™s easier than you think.

What Is MCP, Anyway?

MCP stands for Model Context Protocol. Itโ€™s the secret sauce that lets Claude Code talk to external services and tools โ€” think web search, databases, UI components, and way more. Suddenly, your AI assistant has superpowers.

Letโ€™s Set It Up

Time to open that config file. Pick your favorite editor and run:

# 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 all the cool tools:

{
  "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"
      }
    },
    "filesystem-mcp": {
      "command": "bunx",
      "args": [
        "--bun",
        "@sylphlab/filesystem-mcp"
      ],
      "name": "Filesystem (bunx)"
    },
    "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"
    }
  }
}

Heads up: Donโ€™t forget to swap YOUR_API_KEY with your actual keys for Exa and Context7 โ€” otherwise, those servers will stay locked.

MCP Server Quick Reference

Hereโ€™s a glance at what each server can do:

  • exa โ€“ Search the web, crawl, get code context, research companies, peek at LinkedIn
  • neon โ€“ Hook into Neon PostgreSQL databases
  • shadcn โ€“ Install shadcn/ui components like a breeze
  • context7 โ€“ Search Context7 docs instantly
  • filesystem-mcp โ€“ Manage files and folders
  • kibo-ui โ€“ Pull in Kibo UI components
  • chrome-devtools โ€“ Debug right from Claude with Chrome DevTools
  • Astro docs โ€“ Look up Astro framework docs on the fly

Server Connection Styles

HTTP โ€“ Simple and direct

{
  "neon": {
    "type": "http",
    "url": "https://mcp.neon.tech/mcp"
  }
}

Need authentication? Add headers:

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

Bunx Command โ€“ Run local packages

{
  "shadcn": {
    "command": "bunx",
    "args": [
      "--bun",
      "shadcn@latest",
      "mcp"
    ]
  }
}

Bunx Remote โ€“ Connect to remote servers via mcp-remote

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

Shadcn Registries โ€“ Even More Components

If youโ€™re using shadcn/ui, you can supercharge your components.json with extra registries. Add this block to pull in components from dozens of community libraries:

{
  "$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"
  }
}

Registry Roundup

  • @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

Use the shadcn CLI like this:

# 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

Troubleshooting Common Hiccups

MCP server not connecting?

  • Double-check the server URL
  • Make sure your API keys are correct and active
  • Restart Claude Code after changing config (yeah, itโ€™s one of those things)

Bunx command failing?

First, verify Bun is installed:

bun --version

If itโ€™s missing, get it with:

curl -fsSL https://bun.sh/install | bash

Registry component not found?

  • Confirm the registry URL in components.json is spot-on
  • Check that the component name exists in that registry
  • Update shadcn CLI with bun add -g shadcn@latest

Whatโ€™s Next?

Youโ€™ve got your MCP servers humming. Now why not explore more?