Oikon

Posted on Jun 14

Enhancing Claude Code with MCP Servers and Subagents

#webdev #ai #claude #anthropic

Introduction

I've been using Claude Code daily for personal development projects. However, I've encountered several cases where Claude struggled to solve complex problems dependent on specific library versions during web app development.

After extensive experimentation, I discovered that enabling Model Context Protocol (MCP) servers for Claude Code significantly improves its problem-solving capabilities. This article shares my findings and practical implementation.

Background and Motivation

While Claude Code is powerful, it sometimes lacks current information about rapidly evolving libraries and frameworks. This limitation becomes particularly evident when dealing with:

Version-specific compatibility issues
Recent library updates and breaking changes
Latest best practices and solutions

MCP Servers Used

Context7: Version-specific API documentation retrieval
Brave-Search: Web search functionality

Both are well-established MCP servers. Additionally, I experimented with custom slash commands that leverage subagents with MCP servers for more streamlined workflows.

Understanding Model Context Protocol (MCP)

MCP is a protocol proposed by Anthropic that connects AI systems with external tools. Simply put, it's a standard that enables AI agents to use external tools.

In our setup:

Host with MCP client = Claude Code
MCP server A/C = Context7 MCP server
MCP server C = Brave-Search MCP server

Context7 MCP Server

https://github.com/upstash/context7

Context7, developed by Upstash, is an MCP server that retrieves versioned API documentation. It addresses the common issue where AI models have outdated information about rapidly evolving OSS libraries.

Supported libraries are available at context7.com. The coverage includes most common web development libraries.

Setup for Claude Code:

Remote MCP Server:

claude mcp add --transport sse context7 https://mcp.context7.com/sse

Local MCP Server:

claude mcp add context7 -- npx -y @upstash/context7-mcp

Brave-Search MCP Server

https://github.com/modelcontextprotocol/servers-archived/tree/main/src/brave-search

Brave-Search provides web search functionality as an MCP server. While Claude Code has built-in web search, I found the dedicated MCP server more effective, especially when working with subagents.

The free plan allows up to 2,000 queries per month. Get your API key from the official site.

Setup:

claude mcp add brave-search -s user -- env BRAVE_API_KEY=`YOUR_API_KEY_HERE` npx -y @modelcontextprotocol/server-brave-search

Security Note: While these servers aren't in Anthropic's official repository (Brave-Search is archived), they're widely trusted. Always exercise caution with MCP servers due to potential security risks like tool poisoning.

Claude Code Subagents

Subagents are a default feature in Claude Code that many users overlook. Tasks shown under Task are executed by subagents, particularly for web fetching and file reading operations.

According to Anthropic's official documentation:

This is the part of the workflow where you should consider strong use of subagents, especially for complex problems. Telling Claude to use subagents to verify details or investigate particular questions it might have, especially early on in a conversation or task, tends to preserve context availability without much downside in terms of lost efficiency.

Subagent Characteristics

Lightweight execution
Parallel operation capability
Access to parent agent's available tools
Independent context windows
Task-specific lifecycle (created and destroyed per task)

This architecture enables parent agents to delegate tasks to subagents for execution, with parallel processing capabilities for improved efficiency.

Practical Implementation: Using MCP Servers with Subagents

Without Subagents

When not explicitly specifying subagent usage, Claude Code directly calls Context7 and Brave-Search MCP servers.

CLAUDE.md configuration:

- You can use web search including `use brave-search` MCP to search the latest solution.
- You should check the latest Next.js, Node.js, and other libraries with `use context7` MCP.

Benefits:

Complete context inheritance from Claude Code
Seamless problem-solving with current context

Drawbacks:

Higher context window consumption
Faster rate limit approach

With Subagents

Include "use subagent" or "multiple subagents" in your prompts to delegate tasks to subagents.

Benefits:

Parallel information processing
Clear separation of concerns
Reduced parent context window pressure

Drawbacks:

Minimal context sharing with subagents
Potentially less targeted search results

Pros and Cons Summary

Advantages:

Simple implementation
No RAG system required
Access to latest information

Disadvantages:

Context window consumption
Increased token usage
Claude Code's limited MCP server proficiency

The approach serves as improving the probability of successful code generation rather than a guaranteed solution.

Advanced Usage: Custom Slash Commands

Instead of repeatedly typing use subagent and use Context7, I recommend creating custom slash commands for streamlined bug resolution.

Setup: Place Markdown files in the commands directory:

Global: ~/.claude/commands/ (prefix: /user:)
Project-specific: <project root>/.claude/commands/ (prefix: /project:)

Example - ~/.claude/commands/bugfix.md:

Fix bug from user provided bug description: $ARGUMENTS

1. Understand the bug description and think the root cause. Try to recreate the issue.
2. Fix the issue. Use `context7` and `brave-search` MCP tools to understand the error. 
These MCP tool searching should be done by multiple subagents. Also use native Web search subagent for issue investigation.
3. If there is another error, always repeat this debugging process from 1 to 2.

Usage:

/user:bugfix Next.js Hydration error needs fixing.

Claude Code understands the predefined execution steps and prepares appropriate tasks automatically.

Case Study: Solving Next.js 15 Hydration Errors

In my testing, Claude Code successfully resolved Next.js 15 hydration errors that it previously couldn't handle alone. The combination of:

Context7 for latest Next.js documentation
Brave-Search for recent solution discussions
Subagents for parallel information gathering

This resulted in accurate identification and resolution of Next.js 15 and Material-UI compatibility issues.

Conclusion

This article explored using MCP servers with subagents to address Claude Code's limitation with current library information. While the implementation focused on search-related MCP servers, filesystem and popular Obsidian MCP servers could be equally effective for accessing local documentation.

Key takeaways:

MCP servers enhance Claude Code's problem-solving capabilities
Subagents provide parallel processing and context management benefits
Custom slash commands streamline complex workflows
The approach improves success probability rather than guaranteeing solutions

Future outlook: Subagent parallelization is an active research area. While we implemented basic multiple-subagent search within Claude Code, official improvements to this functionality are likely forthcoming.

The combination of MCP servers and subagents represents a significant step toward more capable AI-assisted development workflows.

DEV Community