feat: Integrate MCP servers for enhanced capabilities

This commit is contained in:
duthaho
2025-12-06 18:11:48 +07:00
parent 3c224790f9
commit 0ff5ae4082
28 changed files with 1958 additions and 72 deletions
+3 -2
View File
@@ -285,8 +285,9 @@ Optional MCP servers for extended capabilities.
|--------|---------|--------|
| Context7 | Library documentation lookup | Optional |
| Sequential | Multi-step reasoning tools | Optional |
| Puppeteer | Browser automation | Optional |
| Magic | UI component generation | Optional |
| Playwright | Browser automation (Microsoft) | Optional |
| Memory | Persistent knowledge graph | Optional |
| Filesystem | Secure file operations | Optional |
Setup: See `.claude/mcp/README.md`
+30
View File
@@ -180,6 +180,36 @@ After design is complete:
| 4 | 8-10 | Comprehensive |
| 5 | 10+ | Exhaustive, all angles |
## MCP Integration
This command leverages MCP servers for enhanced brainstorming:
### Sequential Thinking - Structured Exploration (Primary)
```
ALWAYS use Sequential Thinking for brainstorming:
- Explore design options systematically
- Track pros/cons for each approach
- Revise conclusions based on user feedback
- Build confidence in final design incrementally
```
### Memory - Design Persistence
```
Store design decisions for continuity:
- Create entities for design concepts
- Store user preferences and constraints
- Recall previous design patterns
- Build knowledge graph of architecture decisions
```
### Context7 - Technology Options
```
When exploring technology choices:
- Fetch current documentation for options
- Compare library capabilities accurately
- Understand trade-offs with real data
```
## When NOT to Use
- Clear "mechanical" processes with known implementation
+41
View File
@@ -200,6 +200,47 @@ git diff --staged
/feature --format=concise "add logging utility"
```
## MCP Integration
This command leverages MCP servers for enhanced capabilities:
### Context7 - Library Documentation
When researching unfamiliar libraries or frameworks:
```
Use Context7's resolve-library-id and get-library-docs tools to fetch
current documentation for any libraries involved in the feature.
```
### Sequential Thinking - Structured Planning
For complex feature breakdowns:
```
Use Sequential Thinking's sequentialthinking tool for step-by-step
analysis when decomposing requirements or designing architecture.
```
### Memory - Context Persistence
Store and recall project context:
```
- Store architectural decisions made during planning
- Recall user preferences from previous sessions
- Remember patterns used in similar features
```
### Filesystem - File Operations
For creating and modifying files:
```
- Use directory_tree to understand project structure
- Use search_files to find related implementations
- Use read_file and write_file for file operations
```
### Playwright - E2E Testing
For features with UI components:
```
Use Playwright for browser-based E2E testing of the implemented feature.
Validate user flows and interactions in real browser environment.
```
<!-- CUSTOMIZATION POINT -->
## Variations
+47
View File
@@ -262,6 +262,53 @@ for item in items:
| `performance` | Speed, memory, efficiency |
| `reliability` | Error handling, edge cases |
## MCP Integration
This command leverages MCP servers for enhanced debugging:
### Sequential Thinking - Root Cause Analysis (Primary)
```
ALWAYS use Sequential Thinking for debugging:
- Trace execution path step-by-step
- Form and test hypotheses systematically
- Track confidence in each potential cause
- Revise understanding as evidence emerges
```
### Memory - Bug Context
```
Store and recall debugging context:
- Remember similar bugs from previous sessions
- Recall fix patterns that worked before
- Store root cause analysis for future reference
- Create relations between bugs and affected components
```
### Playwright - Browser Testing
```
For UI/frontend bugs:
- Reproduce the bug in browser environment
- Test fix across different browsers
- Verify visual regressions are resolved
- Automate regression test for the fix
```
### Context7 - Library Issues
```
When debugging library-related issues:
- Fetch current documentation for correct usage
- Check for known issues or breaking changes
- Find correct patterns and examples
```
### Filesystem - Code Search
```
For tracing bug across codebase:
- Use search_files to find related code
- Use read_file to examine suspicious areas
- Track changes with file history
```
<!-- CUSTOMIZATION POINT -->
## Variations
+22
View File
@@ -120,3 +120,25 @@ After generating the index, inform the user:
2. Number of files indexed
3. Key components discovered
4. Suggest using `/load` to load specific components into context
## MCP Integration
This command leverages MCP servers for enhanced indexing:
### Filesystem - Project Scanning (Primary)
```
ALWAYS use Filesystem for project scanning:
- Use directory_tree for full structure view
- Use list_directory for targeted exploration
- Use search_files to find specific patterns
- Use get_file_info for file metadata
```
### Memory - Project Knowledge
```
Store project structure in knowledge graph:
- Create entities for key modules
- Store component relationships
- Recall structure in future sessions
- Build project understanding over time
```
+38
View File
@@ -285,6 +285,44 @@ Use `/execute-plan [plan-file]` for subagent-driven execution with code review g
| `deep-research` | Complex features needing investigation |
| `implementation` | Quick plans for clear tasks |
## MCP Integration
This command leverages MCP servers for enhanced planning:
### Sequential Thinking - Structured Planning (Primary)
```
ALWAYS use Sequential Thinking for task decomposition:
- Break complex tasks into logical thought sequences
- Track dependencies between steps
- Revise plan as understanding deepens
- Use for risk identification and mitigation planning
```
### Memory - Decision Persistence
```
Store and recall planning context:
- Remember decisions from previous planning sessions
- Recall user preferences for task sizing
- Store architectural patterns for reuse
- Create entities for major features/components
```
### Context7 - Technology Research
```
When planning involves unfamiliar technologies:
- Fetch current documentation for accurate estimates
- Understand API patterns before estimating complexity
- Identify potential integration challenges
```
### Filesystem - Codebase Analysis
```
For accurate file identification:
- Use directory_tree to understand project structure
- Use search_files to find existing patterns
- Identify files to create vs modify
```
<!-- CUSTOMIZATION POINT -->
## Variations
+28
View File
@@ -61,6 +61,34 @@ Research: **$ARGUMENTS**
| 4 | Comprehensive with trade-offs |
| 5 | Exhaustive with citations |
## MCP Integration
This command leverages MCP servers for enhanced research:
### Context7 - Library Documentation (Primary)
```
ALWAYS use Context7 for library/framework research:
1. Use resolve-library-id to find the library ID
2. Use get-library-docs with topic parameter for focused docs
3. Use mode='code' for API references, mode='info' for concepts
```
### Sequential Thinking - Structured Analysis
```
For complex research requiring step-by-step reasoning:
- Use sequentialthinking tool to break down analysis
- Track confidence scores for each finding
- Revise conclusions as new information emerges
```
### Memory - Persistent Research
```
Store research findings for future reference:
- Create entities for researched technologies
- Add observations with pros/cons/recommendations
- Link related technologies with relations
```
## Output
```markdown
+39
View File
@@ -291,6 +291,45 @@ Found **1 critical issue** (security), **2 recommendations**, and **2 suggestion
| `quality` | Readability, maintainability |
| `testing` | Coverage, test patterns |
## MCP Integration
This command leverages MCP servers for enhanced code review:
### Playwright - Visual/UI Review
```
For reviewing UI changes:
- Render and screenshot components
- Compare visual changes across browsers
- Verify responsive behavior
- Check accessibility in real browser
```
### Memory - Review Context
```
Store and recall review context:
- Remember past review decisions
- Recall user's coding standards
- Store patterns approved/rejected previously
- Track recurring issues across reviews
```
### Sequential Thinking - Systematic Analysis
```
For thorough code analysis:
- Step through complex logic systematically
- Track multiple concerns in parallel
- Build comprehensive issue list
- Revise severity as context emerges
```
### Filesystem - Code Access
```
For reviewing file changes:
- Use read_file to examine code
- Use search_files to find related patterns
- Check for similar issues across codebase
```
<!-- CUSTOMIZATION POINT -->
## Variations
+38
View File
@@ -288,6 +288,44 @@ pytest tests/services/auth.test.ts -v
| `jest` | JavaScript |
| `playwright` | E2E (any) |
## MCP Integration
This command leverages MCP servers for enhanced testing:
### Playwright - E2E Testing (Primary for UI)
```
For E2E and browser tests:
- Use Playwright for cross-browser testing
- Automate user flow verification
- Capture screenshots for visual testing
- Test on different device emulations
```
### Filesystem - Test File Management
```
For test file operations:
- Use directory_tree to find test directories
- Use search_files to find existing tests
- Use read_file to check test patterns
- Use write_file to create new test files
```
### Context7 - Testing Best Practices
```
For framework-specific testing:
- Fetch current testing library docs
- Get latest assertions and matchers
- Find recommended testing patterns
```
### Memory - Test Patterns
```
Recall testing context:
- Remember project testing conventions
- Recall mock patterns used previously
- Store common test fixtures
```
<!-- CUSTOMIZATION POINT -->
## Variations
+168 -19
View File
@@ -8,8 +8,9 @@ Model Context Protocol (MCP) servers extend Claude Code capabilities with specia
|--------|---------|--------|
| Context7 | Up-to-date library documentation | Optional |
| Sequential | Multi-step reasoning tools | Optional |
| Puppeteer | Browser automation | Optional |
| Magic | UI component generation | Optional |
| Playwright | Browser automation (Microsoft) | Optional |
| Memory | Persistent knowledge graph | Optional |
| Filesystem | Secure file operations | Optional |
## Installation
@@ -21,14 +22,48 @@ Model Context Protocol (MCP) servers extend Claude Code capabilities with specia
MCP servers are configured in your Claude Code settings:
**Location**: `~/.claude/settings.json` (user) or `.claude/settings.json` (project)
**Location**: `~/.claude/settings.json` (user) or `.mcp.json` (project)
### Quick Setup
1. Copy the desired configuration from the server-specific JSON files
2. Add to your `settings.json` under `mcpServers`
1. Copy the configuration for your platform (see below)
2. Add to your `.mcp.json` or `settings.json` under `mcpServers`
3. Restart Claude Code
## Platform-Specific Configuration
MCP server configuration differs between platforms:
### Linux / macOS
```json
{
"mcpServers": {
"context7": {
"command": "npx",
"args": ["-y", "@upstash/context7-mcp"]
}
}
}
```
### Windows
Windows requires the `cmd /c` wrapper to execute npx:
```json
{
"mcpServers": {
"context7": {
"command": "cmd",
"args": ["/c", "npx", "-y", "@upstash/context7-mcp"]
}
}
}
```
> **Note**: The `.mcp.json` included in this repository uses Windows syntax. Linux/macOS users should use the configurations in this README.
## Server Configurations
### Context7 (Documentation Lookup)
@@ -40,7 +75,7 @@ Provides up-to-date documentation for libraries and frameworks.
"mcpServers": {
"context7": {
"command": "npx",
"args": ["-y", "@context7/mcp-server"]
"args": ["-y", "@upstash/context7-mcp"]
}
}
}
@@ -48,6 +83,10 @@ Provides up-to-date documentation for libraries and frameworks.
**Usage**: Ask about any library and get current documentation.
**Tools**:
- `resolve-library-id` - Find library IDs for documentation lookup
- `get-library-docs` - Fetch documentation for a specific library
### Sequential Thinking
Provides structured reasoning tools for complex problem-solving.
@@ -65,16 +104,19 @@ Provides structured reasoning tools for complex problem-solving.
**Usage**: Complex analysis with step-by-step reasoning.
### Puppeteer (Browser Automation)
**Tools**:
- `sequentialthinking` - Dynamic problem-solving through thought sequences
Enables browser automation for testing and web interaction.
### Playwright (Browser Automation)
Microsoft's browser automation using accessibility tree for fast, LLM-friendly interaction.
```json
{
"mcpServers": {
"puppeteer": {
"playwright": {
"command": "npx",
"args": ["-y", "@modelcontextprotocol/server-puppeteer"]
"args": ["-y", "@playwright/mcp"]
}
}
}
@@ -82,44 +124,149 @@ Enables browser automation for testing and web interaction.
**Usage**: Web testing, screenshots, form automation.
### Magic (UI Generation)
**Key Features**:
- Fast and lightweight - uses accessibility tree, not pixels
- LLM-friendly - no vision models needed
- Supports Chrome, Firefox, WebKit, Edge
- Device emulation and profile management
Generates UI components from descriptions.
**Command-Line Options**:
- `--browser <browser>` - Browser to use (chrome, firefox, webkit, msedge)
- `--headless` - Run browser in headless mode
- `--viewport-size <size>` - Viewport size (e.g., "1280x720")
- `--device <device>` - Device to emulate (e.g., "iPhone 15")
### Memory (Persistent Knowledge Graph)
Maintains persistent memory across sessions using a local knowledge graph.
```json
{
"mcpServers": {
"magic": {
"memory": {
"command": "npx",
"args": ["-y", "@anthropic/magic-mcp-server"]
"args": ["-y", "@modelcontextprotocol/server-memory"]
}
}
}
```
**Usage**: Generate React/Vue components from descriptions.
**Usage**: Remember information across conversations and sessions.
**Tools**:
- `create_entities` - Create new entities in the knowledge graph
- `create_relations` - Create relationships between entities
- `add_observations` - Add observations to entities
- `delete_entities` - Remove entities from the graph
- `delete_observations` - Remove observations
- `delete_relations` - Remove relationships
- `read_graph` - Read the entire knowledge graph
- `search_nodes` - Search for entities
- `open_nodes` - Open specific entities by name
### Filesystem (Secure File Operations)
Enables secure file operations with configurable access controls.
```json
{
"mcpServers": {
"filesystem": {
"command": "npx",
"args": ["-y", "@modelcontextprotocol/server-filesystem", "."]
}
}
}
```
**Usage**: Read, write, and manage files with access controls.
**Tools**:
- `read_file` - Read file contents
- `read_multiple_files` - Read multiple files at once
- `write_file` - Write content to a file
- `edit_file` - Make edits to a file
- `create_directory` - Create a new directory
- `list_directory` - List directory contents
- `directory_tree` - Get directory tree structure
- `move_file` - Move or rename files
- `search_files` - Search for files by pattern
- `get_file_info` - Get file metadata
**Note**: The last argument specifies the allowed directory (`.` for current directory).
## Full Configuration Example
### Linux / macOS
```json
{
"mcpServers": {
"context7": {
"command": "npx",
"args": ["-y", "@context7/mcp-server"]
"args": ["-y", "@upstash/context7-mcp"]
},
"sequential": {
"command": "npx",
"args": ["-y", "@modelcontextprotocol/server-sequential-thinking"]
},
"puppeteer": {
"playwright": {
"command": "npx",
"args": ["-y", "@modelcontextprotocol/server-puppeteer"]
"args": ["-y", "@playwright/mcp"]
},
"memory": {
"command": "npx",
"args": ["-y", "@modelcontextprotocol/server-memory"]
},
"filesystem": {
"command": "npx",
"args": ["-y", "@modelcontextprotocol/server-filesystem", "."]
}
}
}
```
### Windows
```json
{
"mcpServers": {
"context7": {
"command": "cmd",
"args": ["/c", "npx", "-y", "@upstash/context7-mcp"]
},
"sequential": {
"command": "cmd",
"args": ["/c", "npx", "-y", "@modelcontextprotocol/server-sequential-thinking"]
},
"playwright": {
"command": "cmd",
"args": ["/c", "npx", "-y", "@playwright/mcp"]
},
"memory": {
"command": "cmd",
"args": ["/c", "npx", "-y", "@modelcontextprotocol/server-memory"]
},
"filesystem": {
"command": "cmd",
"args": ["/c", "npx", "-y", "@modelcontextprotocol/server-filesystem", "."]
}
}
}
```
## Optional Additional Servers
These servers can be added for extended functionality:
| Server | Package | Purpose |
|--------|---------|---------|
| Fetch | `mcp-server-fetch` (uvx) | Web content fetching |
| Brave Search | `@modelcontextprotocol/server-brave-search` | Web search (requires API key) |
| PostgreSQL | `@modelcontextprotocol/server-postgres` | Database access |
| Sentry | `@sentry/mcp-server` | Error tracking |
| GitHub | `@github/mcp-server` | GitHub API operations |
## Verification
After configuration, verify servers are loaded:
@@ -150,11 +297,13 @@ After configuration, verify servers are loaded:
- MCP servers run with your user permissions
- Review server source before installing
- Puppeteer has browser access - use carefully
- Playwright has browser access - use carefully
- Context7 makes network requests to documentation sources
- Filesystem server restricts access to specified directories
## Resources
- [MCP Protocol Documentation](https://modelcontextprotocol.io/)
- [Available MCP Servers](https://github.com/modelcontextprotocol/servers)
- [Microsoft Playwright MCP](https://github.com/microsoft/playwright-mcp)
- [Claude Code MCP Guide](https://docs.anthropic.com/claude-code/mcp)
+28
View File
@@ -80,6 +80,34 @@ Once I understand these, I can provide better recommendations.
---
## MCP Integration
This mode leverages MCP servers for enhanced brainstorming:
### Sequential Thinking (Primary)
```
ALWAYS use Sequential Thinking in brainstorm mode:
- Explore design options systematically
- Track trade-offs for each approach
- Build confidence in recommendations incrementally
- Allow for revisions and backtracking
```
### Memory
```
Persist design decisions:
- Store design concepts and rationale
- Remember user preferences from previous sessions
- Build project design knowledge over time
```
### Context7
```
For informed technology choices:
- Fetch docs to compare library options
- Ground recommendations in real capabilities
```
## Combines Well With
- `/brainstorm` command
+29
View File
@@ -124,6 +124,35 @@ Or use command flag:
---
## MCP Integration
This mode leverages MCP servers for comprehensive research:
### Sequential Thinking (Primary)
```
ALWAYS use Sequential Thinking in deep-research mode:
- Structure analysis into logical thought sequences
- Track confidence scores for each finding
- Revise conclusions as evidence emerges
- Document reasoning chain for transparency
```
### Context7
```
For library/technology research:
- Fetch current documentation with get-library-docs
- Use mode='info' for conceptual understanding
- Verify findings against authoritative sources
```
### Memory
```
Build persistent research knowledge:
- Store research findings as entities
- Create relations between discovered concepts
- Recall previous research in future sessions
```
## Combines Well With
- `/research` command
+29
View File
@@ -112,6 +112,35 @@ Continuing with [choice]. Let me know if you'd prefer different.
---
## MCP Integration
This mode leverages MCP servers for efficient implementation:
### Filesystem (Primary)
```
ALWAYS use Filesystem in implementation mode:
- Use read_file to check existing code
- Use write_file to create new files
- Use edit_file for modifications
- Use search_files to find patterns to follow
```
### Context7
```
For accurate library usage:
- Fetch current API documentation
- Use mode='code' for API references
- Get correct patterns and examples
```
### Memory
```
Recall implementation context:
- Remember established patterns
- Recall user preferences
- Store decisions for consistency
```
## Combines Well With
- `/execute-plan` command
+37
View File
@@ -137,6 +137,43 @@ Or use command flag:
---
## MCP Integration
This mode leverages MCP servers for thorough review:
### Playwright
```
For UI/frontend reviews:
- Render and verify visual changes
- Test responsive behavior
- Check accessibility
- Capture screenshots for comparison
```
### Sequential Thinking
```
For systematic code analysis:
- Step through logic methodically
- Track multiple concerns
- Build comprehensive issue list
```
### Memory
```
Apply consistent review standards:
- Recall past review decisions
- Remember approved patterns
- Track recurring issues
```
### Filesystem
```
For thorough code examination:
- Use read_file to examine code
- Use search_files to find related patterns
- Check consistency across codebase
```
## Combines Well With
- `/review` command
+2 -36
View File
@@ -23,48 +23,14 @@
],
"deny": []
},
"mcpServers": {
"_comment": "Uncomment servers to enable. See .claude/mcp/README.md for setup.",
"_context7": {
"command": "npx",
"args": ["-y", "@context7/mcp-server"]
},
"_sequential": {
"command": "npx",
"args": ["-y", "@modelcontextprotocol/server-sequential-thinking"]
},
"_puppeteer": {
"command": "npx",
"args": ["-y", "@modelcontextprotocol/server-puppeteer"]
},
"_magic": {
"command": "npx",
"args": ["-y", "@anthropic/magic-mcp-server"]
}
},
"hooks": {
"PostToolUse": [
{
"matcher": {
"tool": "Write",
"files": ["*.py"]
},
"matcher": "Write",
"hooks": [
{
"type": "command",
"command": "ruff check --fix $FILE 2>/dev/null || true"
}
]
},
{
"matcher": {
"tool": "Write",
"files": ["*.ts", "*.tsx"]
},
"hooks": [
{
"type": "command",
"command": "npx eslint --fix $FILE 2>/dev/null || true"
"command": "if [[ \"$FILE\" == *.py ]]; then ruff check --fix \"$FILE\" 2>/dev/null || true; elif [[ \"$FILE\" == *.ts || \"$FILE\" == *.tsx ]]; then npx eslint --fix \"$FILE\" 2>/dev/null || true; fi"
}
]
}
@@ -156,3 +156,35 @@ After design is validated:
4. Use `executing-plans` skill for implementation
---
## MCP Integration
This skill leverages MCP servers for enhanced brainstorming:
### Sequential Thinking (Primary)
```
Use Sequential Thinking for structured exploration:
- Track design options as thought sequences
- Build confidence in recommendations incrementally
- Allow for revisions as user provides feedback
- Document reasoning chain for design decisions
```
### Memory
```
Persist design decisions across sessions:
- Store design concepts as entities
- Create relations between components
- Recall user preferences from previous sessions
- Build project design knowledge over time
```
### Context7
```
For informed technology choices:
- Fetch current library documentation
- Compare capabilities accurately
- Ground recommendations in real data
```
---
@@ -201,6 +201,39 @@ Use skill: sequential-thinking
---
## MCP Integration
This skill is powered by the Sequential Thinking MCP server:
### Using the MCP Tool
```
The Sequential Thinking MCP server provides the `sequentialthinking` tool.
Use it for:
- Breaking complex problems into thought sequences
- Tracking confidence and revising conclusions
- Building evidence chains with explicit reasoning
- Maintaining state across multiple reasoning steps
```
### Tool Parameters
```
thought: Your current thinking step
thoughtNumber: Current step number
totalThoughts: Estimated total steps needed
nextThoughtNeeded: Whether more steps are needed
isRevision: If revising previous thinking
needsMoreThoughts: If more analysis needed
```
### Integration Pattern
```
1. Start with initial thought defining the question
2. Gather evidence in subsequent thoughts
3. Form hypotheses with probability estimates
4. Test and verify in later thoughts
5. Conclude with confidence score
```
## Combines Well With
- Deep research mode