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
+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)