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.jsonis 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?