|
| 1 | +# CLAUDE.md |
| 2 | + |
| 3 | +This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository. |
| 4 | + |
| 5 | +## Project Overview |
| 6 | + |
| 7 | +This is an MCP (Model Context Protocol) server that provides Next.js development tools for AI coding assistants. The server exposes tools, prompts, and resources to help with Next.js upgrades, Cache Components setup, documentation search, browser testing, and runtime diagnostics. |
| 8 | + |
| 9 | +## Build and Development Commands |
| 10 | + |
| 11 | +```bash |
| 12 | +# Install dependencies |
| 13 | +pnpm install |
| 14 | + |
| 15 | +# Build the project (required before running tests or publishing) |
| 16 | +pnpm build |
| 17 | + |
| 18 | +# Watch mode for development |
| 19 | +pnpm dev |
| 20 | + |
| 21 | +# Run tests (IMPORTANT: must run pnpm build first) |
| 22 | +pnpm build && pnpm test |
| 23 | + |
| 24 | +# Type check |
| 25 | +pnpm typecheck |
| 26 | + |
| 27 | +# Clean build artifacts |
| 28 | +pnpm clean |
| 29 | +``` |
| 30 | + |
| 31 | +## Testing |
| 32 | + |
| 33 | +The test suite uses vitest with Claude Agent SDK for E2E testing: |
| 34 | + |
| 35 | +```bash |
| 36 | +# Run all tests |
| 37 | +pnpm build && pnpm test |
| 38 | + |
| 39 | +# Note: Tests require ANTHROPIC_API_KEY environment variable |
| 40 | +# Get your key from: https://console.anthropic.com/ |
| 41 | +``` |
| 42 | + |
| 43 | +Test files are located in `test/e2e/` and use test fixtures from `test/fixtures/`. |
| 44 | + |
| 45 | +## Architecture |
| 46 | + |
| 47 | +### MCP Server Structure (src/index.ts) |
| 48 | + |
| 49 | +The main server (`src/index.ts`) uses stdio transport and registers: |
| 50 | +- **Tools** (`src/mcp-tools/`): Callable functions for automation |
| 51 | +- **Prompts** (`src/mcp-prompts/`): Pre-configured prompts for common tasks |
| 52 | +- **Resources** (`src/mcp-resources/`): Knowledge base articles and documentation |
| 53 | + |
| 54 | +### Key Components |
| 55 | + |
| 56 | +**MCP Tools Registry** (`src/mcp-tools/index.ts`): |
| 57 | +- `nextjs_docs`: Search Next.js documentation and knowledge base |
| 58 | +- `browser_eval`: Playwright browser automation (via `playwright-mcp` server) |
| 59 | +- `nextjs_runtime`: Connect to Next.js dev server MCP endpoint for runtime diagnostics |
| 60 | +- `upgrade_nextjs_16`: Automated Next.js 16 upgrade guidance |
| 61 | +- `enable_cache_components`: Complete Cache Components setup with error detection |
| 62 | + |
| 63 | +**MCP Client Library** (`src/lib/mcp-client.ts`): |
| 64 | +- Connects to external MCP servers via stdio transport |
| 65 | +- Used by `browser_eval` to communicate with `playwright-mcp` |
| 66 | +- Used by `nextjs_runtime` to communicate with Next.js dev server MCP endpoint |
| 67 | + |
| 68 | +**Runtime Managers** (`src/lib/`): |
| 69 | +- `browser-eval-manager.ts`: Manages Playwright MCP server lifecycle |
| 70 | +- `nextjs-runtime-manager.ts`: Discovers and connects to Next.js dev servers with MCP enabled |
| 71 | + |
| 72 | +**Resources Architecture**: |
| 73 | +- Knowledge base split into focused sections (12 sections for Next.js 16) |
| 74 | +- Resources are loaded on-demand to avoid overwhelming context |
| 75 | +- Markdown files in `src/mcp-resources/` are copied to `dist/` during build via `scripts/copy-resources.js` |
| 76 | + |
| 77 | +### TypeScript Configuration |
| 78 | + |
| 79 | +- Target: ES2022, CommonJS modules |
| 80 | +- Strict mode enabled |
| 81 | +- Output directory: `dist/` |
| 82 | +- Declaration files generated |
| 83 | + |
| 84 | +## Build Process |
| 85 | + |
| 86 | +1. TypeScript compilation: `tsc` compiles `src/` to `dist/` |
| 87 | +2. Resource copying: `scripts/copy-resources.js` copies markdown files and knowledge base directories from `src/` to `dist/` |
| 88 | + |
| 89 | +The `dist/index.js` file is the entry point for the MCP server and includes a shebang for CLI execution. |
| 90 | + |
| 91 | +## MCP Protocol Integration |
| 92 | + |
| 93 | +This server can: |
| 94 | +1. Act as a standalone MCP server (stdio transport) |
| 95 | +2. Connect to other MCP servers as a client (e.g., playwright-mcp, Next.js runtime MCP) |
| 96 | + |
| 97 | +**Key MCP Patterns**: |
| 98 | +- Tools use Zod schemas for input validation |
| 99 | +- Tool handlers receive validated arguments via `tool.execute()` |
| 100 | +- Resources use URI-based addressing (e.g., `nextjs16://knowledge/overview`) |
| 101 | +- Prompts return structured messages with markdown content |
| 102 | + |
| 103 | +## External MCP Server Dependencies |
| 104 | + |
| 105 | +**Playwright MCP** (`browser_eval` tool): |
| 106 | +- Automatically installed via npx when needed |
| 107 | +- Command: `npx -y @modelcontextprotocol/server-playwright` |
| 108 | +- Used for browser automation and testing |
| 109 | + |
| 110 | +**Next.js Runtime MCP** (`nextjs_runtime` tool): |
| 111 | +- Built into Next.js 16+ (enabled by default) |
| 112 | +- Endpoint: `http://localhost:<port>/_next/mcp` |
| 113 | +- Provides runtime diagnostics, errors, routes, and build status |
| 114 | +- Server discovery via common ports (3000, 3001, etc.) |
| 115 | + |
| 116 | +## Common Development Patterns |
| 117 | + |
| 118 | +**Adding a new MCP tool**: |
| 119 | +1. Create tool file in `src/mcp-tools/` with Zod schema and `tool()` function |
| 120 | +2. Export from `src/mcp-tools/index.ts` and add to `MCP_TOOLS` registry |
| 121 | +3. Build and test |
| 122 | + |
| 123 | +**Adding a new MCP resource**: |
| 124 | +1. Create markdown file(s) in `src/mcp-resources/` |
| 125 | +2. Update `scripts/copy-resources.js` to include new resource |
| 126 | +3. Create resource handler in `src/mcp-resources/` with URI scheme |
| 127 | +4. Register in `src/index.ts` ListResourcesRequestSchema and ReadResourceRequestSchema handlers |
| 128 | + |
| 129 | +**Working with external MCP servers**: |
| 130 | +- Use `src/lib/mcp-client.ts` for stdio-based communication |
| 131 | +- Create manager module in `src/lib/` for lifecycle management |
| 132 | +- Handle server installation, connection, and cleanup |
| 133 | + |
| 134 | +## Package Publishing |
| 135 | + |
| 136 | +- Package name: `next-devtools-mcp` |
| 137 | +- Binary: `next-devtools-mcp` points to `dist/index.js` |
| 138 | +- prepublishOnly hook: cleans and rebuilds before publishing |
| 139 | +- Use `[email protected]` as package manager |
0 commit comments