mirror of
https://github.com/duthaho/claudekit.git
synced 2026-06-12 21:24:56 +03:00
feat: Integrate MCP servers for enhanced capabilities
This commit is contained in:
duthaho
@@ -34,8 +34,8 @@ Claude Kit transforms Claude Code into a production-ready AI development team. P
|
||||
<Card title="34+ Skills" icon="puzzle">
|
||||
Pre-built knowledge for Python, TypeScript, React, FastAPI, testing, security, and more.
|
||||
</Card>
|
||||
<Card title="100% Free" icon="heart">
|
||||
Open source, MIT licensed. No subscriptions, no limits. Your kit, your rules.
|
||||
<Card title="5 MCP Servers" icon="rocket">
|
||||
Real-time docs, persistent memory, browser testing, and more via Model Context Protocol.
|
||||
</Card>
|
||||
</CardGrid>
|
||||
|
||||
@@ -149,14 +149,14 @@ Claude Kit provides the structure, patterns, and automation that makes Claude Co
|
||||
description="Complete documentation for all 27+ commands"
|
||||
href="/claudekit/commands/overview/"
|
||||
/>
|
||||
<LinkCard
|
||||
title="MCP Integrations"
|
||||
description="Extend Claude Kit with real-time docs, memory, and browser testing"
|
||||
href="/claudekit/mcp/overview/"
|
||||
/>
|
||||
<LinkCard
|
||||
title="Customization"
|
||||
description="Create your own commands, modes, and skills"
|
||||
href="/claudekit/customization/overview/"
|
||||
/>
|
||||
<LinkCard
|
||||
title="GitHub Repository"
|
||||
description="Star, fork, contribute"
|
||||
href="https://github.com/duthaho/claudekit"
|
||||
/>
|
||||
</CardGrid>
|
||||
|
||||
@@ -0,0 +1,123 @@
|
||||
---
|
||||
title: Context7
|
||||
description: Real-time library documentation lookup with Context7 MCP server.
|
||||
---
|
||||
|
||||
# Context7
|
||||
|
||||
Context7 provides up-to-date documentation for libraries and frameworks, ensuring Claude has accurate API references instead of outdated training data.
|
||||
|
||||
## Configuration
|
||||
|
||||
```json
|
||||
{
|
||||
"mcpServers": {
|
||||
"context7": {
|
||||
"command": "npx",
|
||||
"args": ["-y", "@upstash/context7-mcp"]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Available Tools
|
||||
|
||||
### resolve-library-id
|
||||
|
||||
Finds the Context7-compatible library ID for documentation lookup.
|
||||
|
||||
**Parameters:**
|
||||
- `libraryName` — Library name to search for
|
||||
|
||||
**Example:**
|
||||
```
|
||||
resolve-library-id("react")
|
||||
→ Returns: "/facebook/react"
|
||||
```
|
||||
|
||||
### get-library-docs
|
||||
|
||||
Fetches documentation for a specific library.
|
||||
|
||||
**Parameters:**
|
||||
- `context7CompatibleLibraryID` — Library ID from resolve-library-id
|
||||
- `topic` (optional) — Focus area (e.g., "hooks", "routing")
|
||||
- `mode` — `code` for API references, `info` for concepts
|
||||
- `page` — Pagination (1-10)
|
||||
|
||||
**Example:**
|
||||
```
|
||||
get-library-docs("/facebook/react", topic="hooks", mode="code")
|
||||
→ Returns: Current React hooks documentation with examples
|
||||
```
|
||||
|
||||
## Use Cases
|
||||
|
||||
### Research Libraries
|
||||
|
||||
```
|
||||
/research Next.js App Router
|
||||
```
|
||||
Context7 fetches current Next.js documentation for accurate analysis.
|
||||
|
||||
### Feature Development
|
||||
|
||||
```
|
||||
/feature Add authentication with NextAuth
|
||||
```
|
||||
Context7 provides current NextAuth API for correct implementation.
|
||||
|
||||
### Debugging Library Issues
|
||||
|
||||
```
|
||||
/fix "useEffect cleanup not working"
|
||||
```
|
||||
Context7 retrieves correct useEffect patterns from React docs.
|
||||
|
||||
## Command Integration
|
||||
|
||||
| Command | How Context7 Helps |
|
||||
|---------|-------------------|
|
||||
| `/feature` | Accurate library APIs for implementation |
|
||||
| `/research` | Current documentation for analysis |
|
||||
| `/fix` | Correct patterns for debugging library issues |
|
||||
| `/plan` | Accurate estimates based on real API complexity |
|
||||
|
||||
## Best Practices
|
||||
|
||||
### Specify Topics
|
||||
|
||||
For focused results, use the `topic` parameter:
|
||||
```
|
||||
get-library-docs("/vercel/next.js", topic="app-router")
|
||||
```
|
||||
|
||||
### Use Correct Mode
|
||||
|
||||
- `mode="code"` — API references, code examples
|
||||
- `mode="info"` — Conceptual guides, architecture
|
||||
|
||||
### Handle Pagination
|
||||
|
||||
If context is insufficient, try additional pages:
|
||||
```
|
||||
get-library-docs(..., page=2)
|
||||
```
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### Library Not Found
|
||||
|
||||
If `resolve-library-id` returns no results:
|
||||
- Check spelling
|
||||
- Try alternative names (e.g., "nextjs" vs "next.js")
|
||||
- Some libraries may not be indexed
|
||||
|
||||
### Outdated Results
|
||||
|
||||
Context7 indexes popular libraries. Less common libraries may have delayed updates.
|
||||
|
||||
## Resources
|
||||
|
||||
- [Context7 Documentation](https://context7.com)
|
||||
- [Upstash Context7 MCP](https://github.com/upstash/context7-mcp)
|
||||
@@ -0,0 +1,196 @@
|
||||
---
|
||||
title: Filesystem
|
||||
description: Secure file operations with access controls.
|
||||
---
|
||||
|
||||
# Filesystem
|
||||
|
||||
Filesystem MCP enables secure file operations with configurable access boundaries. It complements Claude Code's built-in file handling with additional capabilities.
|
||||
|
||||
## Configuration
|
||||
|
||||
```json
|
||||
{
|
||||
"mcpServers": {
|
||||
"filesystem": {
|
||||
"command": "npx",
|
||||
"args": ["-y", "@modelcontextprotocol/server-filesystem", "."]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
The last argument (`.`) specifies the allowed directory. Claude can only access files within this directory.
|
||||
|
||||
### Access Control Examples
|
||||
|
||||
```json
|
||||
// Allow entire project
|
||||
"args": ["-y", "@modelcontextprotocol/server-filesystem", "."]
|
||||
|
||||
// Allow only src directory
|
||||
"args": ["-y", "@modelcontextprotocol/server-filesystem", "./src"]
|
||||
|
||||
// Allow multiple directories
|
||||
"args": ["-y", "@modelcontextprotocol/server-filesystem", "./src", "./tests"]
|
||||
```
|
||||
|
||||
## Available Tools
|
||||
|
||||
### Reading
|
||||
|
||||
| Tool | Description |
|
||||
|------|-------------|
|
||||
| `read_file` | Read file contents |
|
||||
| `read_multiple_files` | Read multiple files at once |
|
||||
| `get_file_info` | Get file metadata (size, modified, etc.) |
|
||||
|
||||
### Writing
|
||||
|
||||
| Tool | Description |
|
||||
|------|-------------|
|
||||
| `write_file` | Write content to file |
|
||||
| `edit_file` | Make targeted edits to file |
|
||||
|
||||
### Directory Operations
|
||||
|
||||
| Tool | Description |
|
||||
|------|-------------|
|
||||
| `list_directory` | List directory contents |
|
||||
| `directory_tree` | Get full directory tree |
|
||||
| `create_directory` | Create new directory |
|
||||
|
||||
### File Management
|
||||
|
||||
| Tool | Description |
|
||||
|------|-------------|
|
||||
| `move_file` | Move or rename files |
|
||||
| `search_files` | Search for files by pattern |
|
||||
|
||||
## Use Cases
|
||||
|
||||
### Project Indexing
|
||||
|
||||
```
|
||||
/index
|
||||
```
|
||||
Filesystem:
|
||||
1. Uses `directory_tree` to scan project
|
||||
2. Uses `list_directory` for detailed info
|
||||
3. Uses `get_file_info` for file metadata
|
||||
|
||||
### Bulk Operations
|
||||
|
||||
```
|
||||
/refactor Move utilities to shared folder
|
||||
```
|
||||
Filesystem:
|
||||
1. Uses `search_files` to find utility files
|
||||
2. Uses `move_file` to relocate them
|
||||
3. Uses `read_file` to update imports
|
||||
|
||||
### Test File Management
|
||||
|
||||
```
|
||||
/test Generate tests for auth service
|
||||
```
|
||||
Filesystem:
|
||||
1. Uses `directory_tree` to find test directories
|
||||
2. Uses `search_files` to find existing tests
|
||||
3. Uses `write_file` to create new test files
|
||||
|
||||
## Command Integration
|
||||
|
||||
| Command | How Filesystem Helps |
|
||||
|---------|---------------------|
|
||||
| `/index` | Scans project structure |
|
||||
| `/feature` | Creates new files in correct locations |
|
||||
| `/test` | Manages test file creation |
|
||||
| `/refactor` | Moves and reorganizes files |
|
||||
|
||||
## Example Workflow
|
||||
|
||||
### Scanning Project
|
||||
|
||||
```javascript
|
||||
// Get project structure
|
||||
directory_tree(".")
|
||||
→ Returns hierarchical view of all files
|
||||
|
||||
// Get specific directory contents
|
||||
list_directory("./src/services")
|
||||
→ Returns files with metadata
|
||||
|
||||
// Search for patterns
|
||||
search_files("*.test.ts")
|
||||
→ Returns all test files
|
||||
```
|
||||
|
||||
### File Operations
|
||||
|
||||
```javascript
|
||||
// Read file
|
||||
read_file("./src/auth/service.ts")
|
||||
→ Returns file contents
|
||||
|
||||
// Write new file
|
||||
write_file("./src/auth/types.ts", "export interface User {...}")
|
||||
→ Creates new file
|
||||
|
||||
// Move file
|
||||
move_file("./src/utils/helper.ts", "./src/shared/helper.ts")
|
||||
→ Relocates file
|
||||
```
|
||||
|
||||
## Security
|
||||
|
||||
### Access Boundaries
|
||||
|
||||
Filesystem respects the configured directory boundaries:
|
||||
- Cannot read files outside allowed directories
|
||||
- Cannot write to system directories
|
||||
- Cannot access parent directories with `../`
|
||||
|
||||
### Best Practices
|
||||
|
||||
1. **Limit scope** — Only allow directories needed for the task
|
||||
2. **Use project root** — `.` is usually sufficient
|
||||
3. **Avoid sensitive paths** — Don't allow access to credentials or secrets
|
||||
|
||||
## Comparison with Built-in Tools
|
||||
|
||||
| Feature | Built-in | Filesystem MCP |
|
||||
|---------|----------|----------------|
|
||||
| Read files | ✓ | ✓ |
|
||||
| Write files | ✓ | ✓ |
|
||||
| Directory tree | Limited | Full tree view |
|
||||
| File search | Via Glob | Pattern search |
|
||||
| Bulk operations | Sequential | Batch capable |
|
||||
| Access control | Permission-based | Directory-based |
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### Permission Denied
|
||||
|
||||
If operations fail:
|
||||
1. Check allowed directory in configuration
|
||||
2. Verify file permissions
|
||||
3. Ensure path is within allowed scope
|
||||
|
||||
### File Not Found
|
||||
|
||||
If search returns empty:
|
||||
1. Verify file exists
|
||||
2. Check file extension in pattern
|
||||
3. Confirm path is relative to allowed directory
|
||||
|
||||
### Path Issues
|
||||
|
||||
Always use forward slashes and relative paths:
|
||||
- "./src/file.ts" not ".\src\file.ts"
|
||||
- Avoid absolute paths
|
||||
|
||||
## Resources
|
||||
|
||||
- [MCP Filesystem Server](https://github.com/modelcontextprotocol/servers/tree/main/src/filesystem)
|
||||
- [File System Security Best Practices](https://owasp.org/www-community/vulnerabilities/Path_Traversal)
|
||||
@@ -0,0 +1,220 @@
|
||||
---
|
||||
title: Command Integration
|
||||
description: How MCP servers enhance Claude Kit commands and modes.
|
||||
---
|
||||
|
||||
# Command Integration
|
||||
|
||||
MCP servers are automatically used by Claude Kit commands and modes. This guide shows which servers enhance each command and how they work together.
|
||||
|
||||
## Commands + MCP Servers
|
||||
|
||||
### Development Commands
|
||||
|
||||
| Command | MCP Servers | Enhancement |
|
||||
|---------|-------------|-------------|
|
||||
| `/feature` | Context7, Sequential, Memory, Filesystem, Playwright | Full development workflow with docs, planning, persistence |
|
||||
| `/fix` | Sequential, Memory, Playwright, Context7, Filesystem | Systematic debugging with browser testing |
|
||||
| `/test` | Playwright, Filesystem, Context7, Memory | E2E tests, file management, testing patterns |
|
||||
| `/review` | Playwright, Memory, Sequential, Filesystem | Visual review, consistent standards |
|
||||
|
||||
### Planning Commands
|
||||
|
||||
| Command | MCP Servers | Enhancement |
|
||||
|---------|-------------|-------------|
|
||||
| `/plan` | Sequential, Memory, Context7, Filesystem | Structured breakdown, persistent decisions |
|
||||
| `/brainstorm` | Sequential, Memory, Context7 | Organized exploration, design persistence |
|
||||
| `/research` | Context7, Sequential, Memory | Real-time docs, thorough analysis |
|
||||
|
||||
### Utility Commands
|
||||
|
||||
| Command | MCP Servers | Enhancement |
|
||||
|---------|-------------|-------------|
|
||||
| `/index` | Filesystem, Memory | Project scanning, structure persistence |
|
||||
|
||||
## Modes + MCP Servers
|
||||
|
||||
| Mode | Primary MCP | Best For |
|
||||
|------|-------------|----------|
|
||||
| **brainstorm** | Sequential + Memory | Design sessions with persistent ideas |
|
||||
| **deep-research** | Sequential + Context7 | Thorough technical investigation |
|
||||
| **implementation** | Filesystem + Context7 | Focused coding with accurate docs |
|
||||
| **review** | Playwright + Memory | UI review with consistent standards |
|
||||
| **orchestration** | All 5 | Complex multi-step parallel work |
|
||||
|
||||
## Example Workflows
|
||||
|
||||
### Full Feature Development
|
||||
|
||||
```bash
|
||||
/feature Add user profile with avatar upload
|
||||
```
|
||||
|
||||
**MCP Flow:**
|
||||
1. **Context7** — Fetches React file upload documentation
|
||||
2. **Sequential** — Plans component structure step-by-step
|
||||
3. **Memory** — Recalls UI patterns from previous features
|
||||
4. **Filesystem** — Creates files in correct locations
|
||||
5. **Playwright** — Tests upload flow in browser
|
||||
|
||||
### Complex Debugging
|
||||
|
||||
```bash
|
||||
/fix Authentication fails intermittently on mobile
|
||||
```
|
||||
|
||||
**MCP Flow:**
|
||||
1. **Memory** — Recalls auth architecture from previous sessions
|
||||
2. **Sequential** — Analyzes race conditions systematically
|
||||
3. **Playwright** — Tests on mobile device emulation
|
||||
4. **Context7** — Checks session handling best practices
|
||||
|
||||
### Research & Planning
|
||||
|
||||
```bash
|
||||
/research --mode=deep-research JWT vs Session authentication
|
||||
```
|
||||
|
||||
**MCP Flow:**
|
||||
1. **Sequential** — Structures comparison step-by-step
|
||||
2. **Context7** — Fetches current JWT and session library docs
|
||||
3. **Memory** — Stores findings for future reference
|
||||
|
||||
### Project Indexing
|
||||
|
||||
```bash
|
||||
/index
|
||||
```
|
||||
|
||||
**MCP Flow:**
|
||||
1. **Filesystem** — Scans project with `directory_tree`
|
||||
2. **Memory** — Stores structure as knowledge graph
|
||||
|
||||
## Server Synergy
|
||||
|
||||
### Context7 + Memory
|
||||
|
||||
**Pattern:** Research → Store → Recall
|
||||
|
||||
```
|
||||
Session 1: /research React Server Components
|
||||
→ Context7 fetches RSC documentation
|
||||
→ Memory stores key patterns
|
||||
|
||||
Session 2: /feature Add data fetching
|
||||
→ Memory recalls RSC patterns
|
||||
→ Implementation uses correct approach
|
||||
```
|
||||
|
||||
### Sequential + Memory
|
||||
|
||||
**Pattern:** Analyze → Decide → Remember
|
||||
|
||||
```
|
||||
/brainstorm Database migration strategy
|
||||
→ Sequential explores options step-by-step
|
||||
→ Memory stores final decision
|
||||
→ Future sessions recall the decision
|
||||
```
|
||||
|
||||
### Playwright + Context7
|
||||
|
||||
**Pattern:** Test → Verify → Document
|
||||
|
||||
```
|
||||
/test E2E checkout flow
|
||||
→ Playwright automates browser testing
|
||||
→ Context7 provides testing library docs
|
||||
→ Tests use correct assertions
|
||||
```
|
||||
|
||||
### Filesystem + Memory
|
||||
|
||||
**Pattern:** Scan → Store → Navigate
|
||||
|
||||
```
|
||||
/index
|
||||
→ Filesystem scans project structure
|
||||
→ Memory creates project knowledge graph
|
||||
→ Future commands know where files are
|
||||
```
|
||||
|
||||
## Configuration Tips
|
||||
|
||||
### Platform Note
|
||||
|
||||
Configuration differs by platform:
|
||||
- **Linux/macOS**: Use `"command": "npx"` directly
|
||||
- **Windows**: Use `"command": "cmd"` with `"/c", "npx"` in args
|
||||
|
||||
Examples below show Linux/macOS syntax. For Windows, see [MCP Overview](/claudekit/mcp/overview/).
|
||||
|
||||
### Minimal Setup
|
||||
|
||||
For basic usage, Context7 and Sequential are most impactful:
|
||||
|
||||
```json
|
||||
{
|
||||
"mcpServers": {
|
||||
"context7": {
|
||||
"command": "npx",
|
||||
"args": ["-y", "@upstash/context7-mcp"]
|
||||
},
|
||||
"sequential": {
|
||||
"command": "npx",
|
||||
"args": ["-y", "@modelcontextprotocol/server-sequential-thinking"]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Full Setup
|
||||
|
||||
For complete Claude Kit integration, use all 5 servers:
|
||||
|
||||
```json
|
||||
{
|
||||
"mcpServers": {
|
||||
"context7": {
|
||||
"command": "npx",
|
||||
"args": ["-y", "@upstash/context7-mcp"]
|
||||
},
|
||||
"sequential": {
|
||||
"command": "npx",
|
||||
"args": ["-y", "@modelcontextprotocol/server-sequential-thinking"]
|
||||
},
|
||||
"playwright": {
|
||||
"command": "npx",
|
||||
"args": ["-y", "@playwright/mcp"]
|
||||
},
|
||||
"memory": {
|
||||
"command": "npx",
|
||||
"args": ["-y", "@modelcontextprotocol/server-memory"]
|
||||
},
|
||||
"filesystem": {
|
||||
"command": "npx",
|
||||
"args": ["-y", "@modelcontextprotocol/server-filesystem", "."]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Performance Notes
|
||||
|
||||
### First Run
|
||||
|
||||
First run downloads npm packages (one-time). Subsequent starts are faster.
|
||||
|
||||
### Startup Order
|
||||
|
||||
Servers start in parallel. All should be ready within seconds.
|
||||
|
||||
### Resource Usage
|
||||
|
||||
Each server runs as a separate process. Total overhead is minimal but consider disabling unused servers for resource-constrained environments.
|
||||
|
||||
## Next Steps
|
||||
|
||||
- [MCP Overview](/claudekit/mcp/overview/) — Setup and configuration
|
||||
- [Commands Overview](/claudekit/commands/overview/) — All available commands
|
||||
- [Modes Overview](/claudekit/modes/overview/) — Behavioral modes
|
||||
@@ -0,0 +1,197 @@
|
||||
---
|
||||
title: Memory
|
||||
description: Persistent knowledge graph for context across sessions.
|
||||
---
|
||||
|
||||
# Memory
|
||||
|
||||
Memory MCP maintains a persistent knowledge graph across sessions, enabling Claude to remember decisions, patterns, and preferences over time.
|
||||
|
||||
## Configuration
|
||||
|
||||
```json
|
||||
{
|
||||
"mcpServers": {
|
||||
"memory": {
|
||||
"command": "npx",
|
||||
"args": ["-y", "@modelcontextprotocol/server-memory"]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Core Concepts
|
||||
|
||||
### Entities
|
||||
|
||||
Named items in the knowledge graph (e.g., "AuthService", "UserModel").
|
||||
|
||||
### Observations
|
||||
|
||||
Facts about entities (e.g., "uses JWT tokens", "requires database").
|
||||
|
||||
### Relations
|
||||
|
||||
Connections between entities (e.g., "AuthService" → "uses" → "UserRepository").
|
||||
|
||||
## Available Tools
|
||||
|
||||
### Entity Management
|
||||
|
||||
| Tool | Description |
|
||||
|------|-------------|
|
||||
| `create_entities` | Create new entities |
|
||||
| `delete_entities` | Remove entities |
|
||||
| `open_nodes` | Open specific entities by name |
|
||||
| `search_nodes` | Search for entities |
|
||||
|
||||
### Observations
|
||||
|
||||
| Tool | Description |
|
||||
|------|-------------|
|
||||
| `add_observations` | Add facts to entities |
|
||||
| `delete_observations` | Remove observations |
|
||||
|
||||
### Relations
|
||||
|
||||
| Tool | Description |
|
||||
|------|-------------|
|
||||
| `create_relations` | Link entities together |
|
||||
| `delete_relations` | Remove links |
|
||||
|
||||
### Graph Operations
|
||||
|
||||
| Tool | Description |
|
||||
|------|-------------|
|
||||
| `read_graph` | Read entire knowledge graph |
|
||||
|
||||
## Use Cases
|
||||
|
||||
### Project Architecture
|
||||
|
||||
```
|
||||
/index
|
||||
```
|
||||
Memory stores:
|
||||
- Entity: "src/api" — "Contains REST endpoints"
|
||||
- Entity: "src/services" — "Business logic layer"
|
||||
- Relation: "api" → "depends on" → "services"
|
||||
|
||||
### Design Decisions
|
||||
|
||||
```
|
||||
/brainstorm Authentication strategy
|
||||
```
|
||||
Memory stores:
|
||||
- Entity: "AuthDecision"
|
||||
- Observation: "Chose JWT over sessions for scalability"
|
||||
- Observation: "User prefers stateless auth"
|
||||
|
||||
### Bug Patterns
|
||||
|
||||
```
|
||||
/fix Race condition in checkout
|
||||
```
|
||||
Memory stores:
|
||||
- Entity: "CheckoutBug"
|
||||
- Observation: "Caused by async state update"
|
||||
- Observation: "Fixed with mutex lock"
|
||||
|
||||
## Command Integration
|
||||
|
||||
| Command | How Memory Helps |
|
||||
|---------|-----------------|
|
||||
| `/brainstorm` | Remembers design decisions |
|
||||
| `/plan` | Recalls previous task patterns |
|
||||
| `/fix` | Stores bug patterns for future reference |
|
||||
| `/index` | Persists project structure |
|
||||
|
||||
## Example Workflow
|
||||
|
||||
### Storing Design Decisions
|
||||
|
||||
**Session 1:**
|
||||
```
|
||||
/brainstorm Authentication for mobile app
|
||||
→ Decision: Use OAuth with refresh tokens
|
||||
→ Memory stores this decision
|
||||
```
|
||||
|
||||
**Session 2:**
|
||||
```
|
||||
/feature Add logout functionality
|
||||
→ Memory recalls: "Uses OAuth with refresh tokens"
|
||||
→ Claude knows to invalidate refresh token
|
||||
```
|
||||
|
||||
### Building Project Knowledge
|
||||
|
||||
**Over time:**
|
||||
```
|
||||
create_entities(["AuthService", "UserRepository", "TokenManager"])
|
||||
|
||||
add_observations("AuthService", [
|
||||
"Handles OAuth flow",
|
||||
"Uses refresh tokens",
|
||||
"Integrates with Google/GitHub"
|
||||
])
|
||||
|
||||
create_relations([
|
||||
{"from": "AuthService", "to": "TokenManager", "type": "uses"},
|
||||
{"from": "AuthService", "to": "UserRepository", "type": "queries"}
|
||||
])
|
||||
```
|
||||
|
||||
**Later query:**
|
||||
```
|
||||
search_nodes("auth")
|
||||
→ Returns full context about authentication architecture
|
||||
```
|
||||
|
||||
## Best Practices
|
||||
|
||||
### Use Descriptive Names
|
||||
|
||||
Entity names should be clear and consistent:
|
||||
- "AuthService" not "AS"
|
||||
- "PaymentFlow" not "pmt"
|
||||
|
||||
### Add Context to Observations
|
||||
|
||||
Include why, not just what:
|
||||
- "Uses JWT because stateless scales better"
|
||||
- "Chose Postgres for ACID compliance"
|
||||
|
||||
### Create Meaningful Relations
|
||||
|
||||
Relations should express real dependencies:
|
||||
- "depends on", "uses", "calls", "creates"
|
||||
|
||||
### Review Regularly
|
||||
|
||||
Use `read_graph` periodically to review stored knowledge and prune outdated information.
|
||||
|
||||
## Data Persistence
|
||||
|
||||
Memory data is stored locally and persists between sessions. The knowledge graph grows over time as you work with Claude Kit.
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### Graph Getting Large
|
||||
|
||||
If the graph becomes unwieldy:
|
||||
1. Use `search_nodes` to find specific entities
|
||||
2. Delete outdated entities with `delete_entities`
|
||||
3. Remove stale observations
|
||||
|
||||
### Missing Context
|
||||
|
||||
If Claude doesn't recall something:
|
||||
- Check if entity exists with `search_nodes`
|
||||
- Observations may not have been stored
|
||||
- Entity names may differ
|
||||
|
||||
## Resources
|
||||
|
||||
- [MCP Memory Server](https://github.com/modelcontextprotocol/servers/tree/main/src/memory)
|
||||
- [Knowledge Graph Concepts](https://en.wikipedia.org/wiki/Knowledge_graph)
|
||||
@@ -0,0 +1,136 @@
|
||||
---
|
||||
title: MCP Integrations
|
||||
description: Extend Claude Kit with Model Context Protocol servers for enhanced capabilities.
|
||||
---
|
||||
|
||||
# MCP Integrations
|
||||
|
||||
Model Context Protocol (MCP) servers extend Claude Kit with powerful capabilities like real-time documentation, persistent memory, and browser automation.
|
||||
|
||||
## What is MCP?
|
||||
|
||||
MCP (Model Context Protocol) is an open standard that allows AI assistants to connect with external tools and data sources. Claude Kit includes pre-configured MCP servers that enhance your development workflow.
|
||||
|
||||
## Available Servers
|
||||
|
||||
| Server | Package | Purpose |
|
||||
|--------|---------|---------|
|
||||
| **Context7** | `@upstash/context7-mcp` | Real-time library documentation |
|
||||
| **Sequential** | `@modelcontextprotocol/server-sequential-thinking` | Structured problem-solving |
|
||||
| **Playwright** | `@playwright/mcp` | Browser automation |
|
||||
| **Memory** | `@modelcontextprotocol/server-memory` | Persistent knowledge graph |
|
||||
| **Filesystem** | `@modelcontextprotocol/server-filesystem` | Secure file operations |
|
||||
|
||||
## Quick Setup
|
||||
|
||||
### 1. Create Configuration
|
||||
|
||||
Create a `.mcp.json` file in your project root. Choose your platform:
|
||||
|
||||
#### Linux / macOS
|
||||
|
||||
```json
|
||||
{
|
||||
"mcpServers": {
|
||||
"context7": {
|
||||
"command": "npx",
|
||||
"args": ["-y", "@upstash/context7-mcp"]
|
||||
},
|
||||
"sequential": {
|
||||
"command": "npx",
|
||||
"args": ["-y", "@modelcontextprotocol/server-sequential-thinking"]
|
||||
},
|
||||
"playwright": {
|
||||
"command": "npx",
|
||||
"args": ["-y", "@playwright/mcp"]
|
||||
},
|
||||
"memory": {
|
||||
"command": "npx",
|
||||
"args": ["-y", "@modelcontextprotocol/server-memory"]
|
||||
},
|
||||
"filesystem": {
|
||||
"command": "npx",
|
||||
"args": ["-y", "@modelcontextprotocol/server-filesystem", "."]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### Windows
|
||||
|
||||
Windows requires the `cmd /c` wrapper:
|
||||
|
||||
```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", "."]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 2. Prerequisites
|
||||
|
||||
- Node.js 18+
|
||||
- npx available in PATH
|
||||
|
||||
### 3. Verify Installation
|
||||
|
||||
Start a new Claude Code session. MCP servers will load automatically. Test with:
|
||||
|
||||
```
|
||||
Ask Claude about React hooks using Context7
|
||||
```
|
||||
|
||||
## Benefits
|
||||
|
||||
### Real-Time Documentation
|
||||
Context7 fetches current library documentation, eliminating outdated API references from training data.
|
||||
|
||||
### Structured Reasoning
|
||||
Sequential Thinking enables step-by-step analysis with confidence tracking for complex debugging and planning.
|
||||
|
||||
### Browser Testing
|
||||
Playwright provides cross-browser automation for E2E testing without separate test infrastructure.
|
||||
|
||||
### Persistent Context
|
||||
Memory server maintains knowledge across sessions, remembering your patterns and preferences.
|
||||
|
||||
### Safe File Operations
|
||||
Filesystem server provides controlled file access with security boundaries.
|
||||
|
||||
## How It Works
|
||||
|
||||
MCP servers are **automatically used** when configured. Claude Kit commands and modes include explicit guidance for optimal MCP usage.
|
||||
|
||||
For example, when you run `/research react hooks`:
|
||||
1. Context7 fetches current React documentation
|
||||
2. Sequential Thinking structures the analysis
|
||||
3. Memory stores findings for future reference
|
||||
|
||||
## Next Steps
|
||||
|
||||
- [Context7](/claudekit/mcp/context7/) — Library documentation lookup
|
||||
- [Sequential Thinking](/claudekit/mcp/sequential/) — Structured reasoning
|
||||
- [Playwright](/claudekit/mcp/playwright/) — Browser automation
|
||||
- [Memory](/claudekit/mcp/memory/) — Persistent knowledge
|
||||
- [Filesystem](/claudekit/mcp/filesystem/) — File operations
|
||||
- [Command Integration](/claudekit/mcp/integration/) — How MCP enhances commands
|
||||
@@ -0,0 +1,198 @@
|
||||
---
|
||||
title: Playwright
|
||||
description: Browser automation for testing and web interaction.
|
||||
---
|
||||
|
||||
# Playwright
|
||||
|
||||
Playwright MCP provides browser automation using accessibility tree for fast, LLM-friendly interaction. Built by Microsoft, it enables cross-browser testing without vision models.
|
||||
|
||||
## Configuration
|
||||
|
||||
```json
|
||||
{
|
||||
"mcpServers": {
|
||||
"playwright": {
|
||||
"command": "npx",
|
||||
"args": ["-y", "@playwright/mcp"]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Command-Line Options
|
||||
|
||||
| Option | Description | Example |
|
||||
|--------|-------------|---------|
|
||||
| `--browser` | Browser to use | `chrome`, `firefox`, `webkit`, `msedge` |
|
||||
| `--headless` | Run without UI | Flag only |
|
||||
| `--viewport-size` | Window size | `1280x720` |
|
||||
| `--device` | Device emulation | `iPhone 15`, `Pixel 7` |
|
||||
|
||||
**Example with options:**
|
||||
```json
|
||||
{
|
||||
"playwright": {
|
||||
"command": "npx",
|
||||
"args": ["-y", "@playwright/mcp", "--browser", "chrome", "--headless"]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Available Tools
|
||||
|
||||
### Navigation
|
||||
|
||||
| Tool | Description |
|
||||
|------|-------------|
|
||||
| `browser_navigate` | Go to a URL |
|
||||
| `browser_go_back` | Navigate back |
|
||||
| `browser_go_forward` | Navigate forward |
|
||||
| `browser_wait` | Wait for page load |
|
||||
|
||||
### Interaction
|
||||
|
||||
| Tool | Description |
|
||||
|------|-------------|
|
||||
| `browser_click` | Click element |
|
||||
| `browser_type` | Type text |
|
||||
| `browser_fill` | Fill input field |
|
||||
| `browser_select_option` | Select dropdown option |
|
||||
| `browser_press_key` | Press keyboard key |
|
||||
|
||||
### Content
|
||||
|
||||
| Tool | Description |
|
||||
|------|-------------|
|
||||
| `browser_snapshot` | Get accessibility tree |
|
||||
| `browser_take_screenshot` | Capture screenshot |
|
||||
| `browser_get_text` | Get element text |
|
||||
|
||||
### Tabs
|
||||
|
||||
| Tool | Description |
|
||||
|------|-------------|
|
||||
| `browser_tab_list` | List open tabs |
|
||||
| `browser_tab_new` | Open new tab |
|
||||
| `browser_tab_select` | Switch to tab |
|
||||
| `browser_tab_close` | Close tab |
|
||||
|
||||
## Use Cases
|
||||
|
||||
### E2E Testing
|
||||
|
||||
```
|
||||
/test e2e Login flow should redirect to dashboard
|
||||
```
|
||||
Playwright:
|
||||
1. Navigates to login page
|
||||
2. Fills credentials
|
||||
3. Clicks submit
|
||||
4. Verifies dashboard redirect
|
||||
|
||||
### UI Review
|
||||
|
||||
```
|
||||
/review Visual regression on mobile
|
||||
```
|
||||
Playwright:
|
||||
1. Opens page with device emulation
|
||||
2. Takes screenshots
|
||||
3. Compares with expected layout
|
||||
|
||||
### Form Testing
|
||||
|
||||
```
|
||||
/test Form validation for user registration
|
||||
```
|
||||
Playwright:
|
||||
1. Fills form with various inputs
|
||||
2. Tests validation messages
|
||||
3. Verifies submission behavior
|
||||
|
||||
## Command Integration
|
||||
|
||||
| Command | How Playwright Helps |
|
||||
|---------|---------------------|
|
||||
| `/test` | E2E browser tests |
|
||||
| `/fix` | Reproduce UI bugs in browser |
|
||||
| `/review` | Visual verification of changes |
|
||||
| `/feature` | Test new UI features |
|
||||
|
||||
## Example Workflow
|
||||
|
||||
### Testing Login Flow
|
||||
|
||||
```javascript
|
||||
// Playwright MCP workflow
|
||||
browser_navigate("https://app.example.com/login")
|
||||
browser_fill("#email", "test@example.com")
|
||||
browser_fill("#password", "password123")
|
||||
browser_click("#login-button")
|
||||
browser_wait() // Wait for navigation
|
||||
browser_take_screenshot("after-login.png")
|
||||
```
|
||||
|
||||
### Mobile Testing
|
||||
|
||||
```javascript
|
||||
// With device emulation (--device "iPhone 15")
|
||||
browser_navigate("https://app.example.com")
|
||||
browser_snapshot() // Get accessibility tree
|
||||
browser_take_screenshot("mobile-view.png")
|
||||
```
|
||||
|
||||
## Key Features
|
||||
|
||||
### Accessibility Tree
|
||||
|
||||
Playwright uses the accessibility tree instead of pixels:
|
||||
- **Faster** — No image processing needed
|
||||
- **LLM-friendly** — Structured element data
|
||||
- **Cross-browser** — Works identically everywhere
|
||||
|
||||
### Device Emulation
|
||||
|
||||
Test on different devices without physical hardware:
|
||||
- iPhone, iPad, Pixel, Galaxy
|
||||
- Custom viewport sizes
|
||||
- Touch vs mouse input
|
||||
|
||||
### Profile Management
|
||||
|
||||
Playwright can maintain browser state across sessions for authenticated testing.
|
||||
|
||||
## Best Practices
|
||||
|
||||
### Use Headless Mode
|
||||
|
||||
For automated testing, use `--headless` to run without UI overhead.
|
||||
|
||||
### Wait for Elements
|
||||
|
||||
Always use `browser_wait` or wait for specific elements before interaction.
|
||||
|
||||
### Accessibility First
|
||||
|
||||
Use accessibility tree (`browser_snapshot`) to understand page structure before clicking.
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### Element Not Found
|
||||
|
||||
If clicking fails:
|
||||
1. Use `browser_snapshot` to see available elements
|
||||
2. Check if element needs scrolling
|
||||
3. Wait for dynamic content to load
|
||||
|
||||
### Browser Not Starting
|
||||
|
||||
- Ensure browser is installed
|
||||
- Check Node.js version (18+)
|
||||
- Try different browser with `--browser`
|
||||
|
||||
## Resources
|
||||
|
||||
- [Playwright MCP](https://github.com/microsoft/playwright-mcp)
|
||||
- [Playwright Documentation](https://playwright.dev)
|
||||
- [Device Descriptors](https://playwright.dev/docs/emulation#devices)
|
||||
@@ -0,0 +1,157 @@
|
||||
---
|
||||
title: Sequential Thinking
|
||||
description: Structured problem-solving with step-by-step reasoning.
|
||||
---
|
||||
|
||||
# Sequential Thinking
|
||||
|
||||
Sequential Thinking provides structured reasoning tools for complex problem-solving, enabling step-by-step analysis with confidence tracking and revision capabilities.
|
||||
|
||||
## Configuration
|
||||
|
||||
```json
|
||||
{
|
||||
"mcpServers": {
|
||||
"sequential": {
|
||||
"command": "npx",
|
||||
"args": ["-y", "@modelcontextprotocol/server-sequential-thinking"]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Available Tools
|
||||
|
||||
### sequentialthinking
|
||||
|
||||
Dynamic problem-solving through structured thought sequences.
|
||||
|
||||
**Parameters:**
|
||||
|
||||
| Parameter | Description |
|
||||
|-----------|-------------|
|
||||
| `thought` | Current thinking step |
|
||||
| `thoughtNumber` | Current step number (1, 2, 3...) |
|
||||
| `totalThoughts` | Estimated total steps needed |
|
||||
| `nextThoughtNeeded` | Whether more steps are needed |
|
||||
| `isRevision` | If this revises previous thinking |
|
||||
| `revisesThought` | Which thought is being reconsidered |
|
||||
| `branchFromThought` | Branching point for alternative paths |
|
||||
| `needsMoreThoughts` | If more analysis is needed |
|
||||
|
||||
## Use Cases
|
||||
|
||||
### Complex Debugging
|
||||
|
||||
```
|
||||
/fix Intermittent authentication failures
|
||||
```
|
||||
Sequential Thinking:
|
||||
1. Defines the question clearly
|
||||
2. Gathers evidence systematically
|
||||
3. Forms hypotheses with probabilities
|
||||
4. Tests most likely cause first
|
||||
5. Documents conclusion with confidence
|
||||
|
||||
### Architecture Decisions
|
||||
|
||||
```
|
||||
/brainstorm Database migration strategy
|
||||
```
|
||||
Sequential Thinking:
|
||||
1. Explores options step-by-step
|
||||
2. Tracks trade-offs for each approach
|
||||
3. Revises conclusions based on feedback
|
||||
4. Builds confidence incrementally
|
||||
|
||||
### Root Cause Analysis
|
||||
|
||||
```
|
||||
/research Why is the build slow?
|
||||
```
|
||||
Sequential Thinking:
|
||||
1. Breaks problem into investigation steps
|
||||
2. Documents evidence at each step
|
||||
3. Adjusts hypothesis as facts emerge
|
||||
4. Provides confidence-scored conclusion
|
||||
|
||||
## Command Integration
|
||||
|
||||
| Command | How Sequential Thinking Helps |
|
||||
|---------|------------------------------|
|
||||
| `/fix` | Systematic root cause analysis |
|
||||
| `/plan` | Structured task decomposition |
|
||||
| `/brainstorm` | Organized design exploration |
|
||||
| `/research` | Step-by-step investigation |
|
||||
|
||||
## Mode Integration
|
||||
|
||||
| Mode | Integration |
|
||||
|------|-------------|
|
||||
| `deep-research` | Primary tool for thorough analysis |
|
||||
| `brainstorm` | Structures creative exploration |
|
||||
| `review` | Systematic code examination |
|
||||
|
||||
## Example Workflow
|
||||
|
||||
### Debugging Session
|
||||
|
||||
**Thought 1:** Define the problem
|
||||
```
|
||||
"What is causing authentication to fail intermittently for some users?"
|
||||
→ Confidence: N/A (question definition)
|
||||
```
|
||||
|
||||
**Thought 2:** Gather evidence
|
||||
```
|
||||
"Checking logs shows failures occur during peak hours,
|
||||
primarily for users with special characters in passwords."
|
||||
→ Confidence: 7/10
|
||||
```
|
||||
|
||||
**Thought 3:** Form hypothesis
|
||||
```
|
||||
"Hypothesis A: URL encoding issue with special characters.
|
||||
Evidence: Failure pattern matches special char passwords.
|
||||
Probability: 80%"
|
||||
→ Confidence: 8/10
|
||||
```
|
||||
|
||||
**Thought 4:** Test hypothesis
|
||||
```
|
||||
"Tested with password 'test@123' - fails.
|
||||
Tested with 'test123' - works.
|
||||
Hypothesis confirmed."
|
||||
→ Confidence: 9/10
|
||||
```
|
||||
|
||||
**Thought 5:** Conclusion
|
||||
```
|
||||
"Root cause: URL encoding mangles special characters.
|
||||
Fix: Use base64 encoding instead.
|
||||
Confidence: 9/10"
|
||||
→ nextThoughtNeeded: false
|
||||
```
|
||||
|
||||
## Best Practices
|
||||
|
||||
### Start with Clear Questions
|
||||
|
||||
Define what you're investigating before gathering evidence.
|
||||
|
||||
### Track Confidence
|
||||
|
||||
Explicitly state confidence levels to identify when more investigation is needed.
|
||||
|
||||
### Allow Revisions
|
||||
|
||||
Use `isRevision` and `revisesThought` to refine understanding as new information emerges.
|
||||
|
||||
### Branch When Needed
|
||||
|
||||
Use `branchFromThought` to explore alternative hypotheses without losing the main thread.
|
||||
|
||||
## Resources
|
||||
|
||||
- [MCP Sequential Thinking](https://github.com/modelcontextprotocol/servers/tree/main/src/sequentialthinking)
|
||||
- [Sequential Thinking Skill](/claudekit/skills/methodology/sequential-thinking/)
|
||||
Reference in New Issue
Block a user