Isolating MCP Context in Claude Code with Slash Commands

The Problem: MCP Tool Definitions Eat Your Context

When you use MCP (Model Context Protocol) tools in Claude Code, the tool definitions themselves consume massive amounts of context before you even use them. Chrome DevTools MCP? 20,000 tokens just to load the tool definitions. Add a few more MCP servers and you’re starting every conversation with 50% of your context window already gone.

Then the output floods in: console logs, network traces, DOM snapshots, performance data. You end up with:

• 20k tokens: Chrome DevTools tool definitions
• 200 lines: console output from debugging
• 50 lines: network request details
• Your actual code question: buried and competing for the remaining context

This isn’t just messy - it’s cognitive overload. Claude is working with a bloated context window where most tokens are MCP overhead, not your actual task. And it gets worse: research shows language models perform significantly worse on information buried in the middle of long contexts (the “lost in the middle” problem). Your actual code question gets sandwiched between MCP definitions and debug output, exactly where Claude’s attention degrades.

The solution: isolate MCP tools in separate Claude instances. Keep your main conversation clean, spawn specialized agents when needed.

The Solution: Slash Commands

Claude Code supports custom slash commands that can spawn isolated Claude instances with their own MCP configs. Here’s a working example for Chrome DevTools:

# ~/.claude/commands/chrome.md
---
allowed-tools:
  - Bash(claude:*)
description: Launch Chrome DevTools agent for browser debugging
---

Execute this command using the Bash tool:

claude --mcp-config ~/.claude/.mcp.chrome.json --strict-mcp-config --allowed-tools "mcp__chrome-devtools" --print -p "debug: $*"

This spawns a new Claude instance with Chrome MCP tools, runs the task, and returns results. Clean separation of concerns.

Specialized tools should run in specialized contexts. Your main conversation is for coding, not for storing browser automation tool schemas.

— The principle of context isolation

Why This Matters Beyond Chrome

The pattern isn’t specific to Chrome DevTools. Every MCP server adds tool definition overhead before you even use it:

• Database MCP: Tool definitions + query results consume context
• API Testing MCP: HTTP method definitions + network logs bloat the window
• File System MCP: File operation definitions + directory listings compete for tokens
• Custom MCP servers: Your tool schemas load before any actual work happens

The real problem: tool definition weight. Loading 3-4 MCP servers can consume 50k+ tokens just from their schemas, leaving limited context for your actual coding task.

The Setup

Here’s the complete setup for Chrome DevTools isolation:

1. Create the MCP config (~/.claude/.mcp.chrome.json):

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "@executeautomation/chrome-devtools-mcp"]
    }
  }
}

2. Create the system prompt (~/.claude/chrome-prompt.md):

# Chrome DevTools Agent

You are a specialized agent for debugging web applications using Chrome DevTools via MCP.

## Instructions

1. **Be Specific**: Provide concrete observations with line numbers, network timings, or console errors
2. **Use Screenshots**: Take screenshots to verify UI state when needed
3. **Analyze Performance**: For slow pages, record traces and identify bottlenecks
4. **Be Concise**: Report findings clearly without verbose explanations

## Authentication

When testing authenticated pages:
- Check `.env.local` for test credentials (TEST_USER, TEST_PASSWORD, TEST_EMAIL, etc.)
- Automatically handle login flows: navigate to /login, fill credentials, submit, wait for redirect
- If credentials aren't found, report what you looked for

## Context

You are launched from the main Claude Code instance to keep Chrome DevTools MCP isolated. Focus on browser debugging tasks and report findings back efficiently.

3. Create the slash command (~/.claude/commands/chrome.md):

---
allowed-tools:
  - Bash(claude:*)
  - Bash(curl:*)
  - Bash(pnpm:*)
  - Bash(npm:*)
description: Launch Chrome DevTools agent for browser debugging
---

Intelligently test or debug the web application by invoking claude with the Chrome MCP config.

## Steps:

1. **Gather context:**
   - What files are currently being edited (check git status)
   - What project this is (check AGENTS.md, CLAUDE.md, or package.json)
   - What specific page/feature is relevant to the user's request

2. **Determine dev server port:**
   - Astro: 4321 (or check package.json dev script)
   - Next.js: 3000
   - Vite/React: 5173
   - Other: Check package.json dev script for --port flag

3. **Check if dev server is running:**
   - Use curl to check if localhost:[port] responds
   - If not running, start it with the appropriate command (pnpm dev, npm run dev, etc.)
   - Wait a few seconds for it to start

4. **Execute with full context:**
   - Construct a detailed description including the specific file/page and URL
   - Execute: claude --mcp-config ~/.claude/.mcp.chrome.json --strict-mcp-config --allowed-tools "mcp__chrome-devtools" --print -p "SYSTEM_INSTRUCTION: @~/.claude/chrome-prompt.md

USER_INPUT: [detailed description] at localhost:[port]"

USER REQUEST: $*

4. Reload Claude Code to pick up the new slash command.

Using the Slash Command

Once configured, invoke the isolated Chrome agent with /chrome:

/chrome test the blog article I'm working on

/chrome check the homepage for errors

/chrome test the dashboard and verify widgets load

/chrome analyze performance of the about page

The slash command intelligently handles everything:

1. Gathers context: Checks git status to see you’re editing claude-code-mcp-context-isolation.mdx
2. Determines project type: Reads package.json to see it’s Astro (port 4321)
3. Starts dev server if needed: Checks if localhost:4321 responds, runs pnpm dev if not
4. Executes with full context: Invokes the isolated Claude instance with the Chrome MCP config and your specific test instructions

Each command is self-contained: Chrome launches, completes all requested tasks, returns results, then closes. Authentication is handled automatically by reading credentials from .env.local.

Benefits:

• Chrome MCP context stays isolated
• Main conversation remains clean
• Context is added intelligently based on what you’re working on
• Dev server auto-starts if needed
• Results come back concisely
• No 20k token overhead in your coding session
• Permissions are explicitly constrained via --allowed-tools flag

Real Example

Here’s what it looks like when you use /chrome test the blog article I'm working on:

# 1. Check what files are being edited
$ git status
modified:   src/content/blog/claude-code-mcp-context-isolation.mdx

# 2. Verify dev server is running
$ curl -s -o /dev/null -w "%{http_code}" http://localhost:4321
200

# 3. Execute claude with the Chrome MCP config and full context
$ claude --mcp-config ~/.claude/.mcp.chrome.json \
  --strict-mcp-config \
  --allowed-tools "mcp__chrome-devtools" \
  --print \
  -p "SYSTEM_INSTRUCTION: @~/.claude/chrome-prompt.md

USER_INPUT: test the claude-code-mcp-context-isolation blog article at localhost:4321 -
verify all MDX components (Note and Quote) render correctly,
check for console errors, and take a screenshot"

## Test Results: claude-code-mcp-context-isolation blog article

✓ MDX Components Rendering:
- Note components: 5 found and rendering correctly
- Quote component: 1 found and rendering correctly

✓ Console Output:
- No errors
- Only Vite HMR debug messages (connection status)

✓ Visual Rendering:
- All components display with proper cyberpunk styling
- Code blocks render with syntax highlighting
- Layout is clean and responsive

The entire workflow happens automatically. You get concise results without Chrome DevTools MCP bloating your main conversation context.

Try It Yourself

The pattern is simple to adapt for any MCP tool:

1. Create an MCP config JSON for your specialized tool
2. Write a focused system prompt for the agent’s role
3. Create a slash command (or shell function) that calls claude --mcp-config
4. Reload Claude Code (or source your shell config)

You now have isolated, specialized Claude agents that keep your main context clean.

Examples:

• /db - Database queries and schema inspection
• /api - API testing and endpoint validation
• /files - File system operations and search
• /perf - Performance analysis and profiling