MCP Server
ArupUI's docs app includes built-in Model Context Protocol (MCP) support, allowing AI coding agents to access your application's internals in real-time during development.
What is MCP?
MCP is an open standard that allows AI agents and coding assistants to interact with your application through a standardized interface. With MCP enabled, your coding agent can inspect routes, detect errors, read logs, and understand your project structure — all while you develop.
Getting Started
Requirements: Next.js 16 or above (ArupUI docs ships with Next.js 16.2.1)
1. Configure MCP
A .mcp.json file is included at the project root:
{
"mcpServers": {
"next-devtools": {
"command": "npx",
"args": ["-y", "next-devtools-mcp@latest"]
}
}
}2. Start the dev server
pnpm dev
That's it. Next.js exposes a built-in MCP endpoint at /_next/mcp, and next-devtools-mcp automatically discovers and connects to your running instance.
3. Use with your coding agent
MCP-compatible agents like Claude Code, Cursor, and VS Code Copilot will automatically pick up the .mcp.json configuration and connect to your dev server.
Available Tools
Once connected, your coding agent gains access to these tools:
| Tool | Description |
|---|---|
get_errors | Retrieve current build errors, runtime errors, and type errors from the dev server |
get_logs | Access development server logs and browser console output |
get_page_metadata | Query page routes, components, and rendering details |
get_project_metadata | Retrieve project structure, configuration, and dev server URL |
get_routes | Get all filesystem routes grouped by router type (App Router, Pages Router) |
get_server_action_by_id | Look up Server Actions by their ID to find source file and function name |
What Your Agent Can Do
With MCP enabled, agents can:
- Detect and fix errors — Ask "What errors are in my app?" and the agent queries your running dev server in real-time
- Understand your app structure — The agent knows your routes, layouts, and components without you explaining them
- Inspect server actions — Look up server action implementations by ID
- Access logs — Read dev server and browser console output for debugging
- Make context-aware suggestions — Recommendations are based on your actual project state, not guesses
Example Prompts
Once your dev server is running and MCP is connected, try asking your agent:
"What errors are currently in my application?"
"Show me all the routes in my app"
"What metadata does the /docs/introduction page have?"
Troubleshooting
MCP server not connecting:
- Ensure your dev server is running (
pnpm dev) - Verify
.mcp.jsonexists at the project root - Restart your dev server if it was already running
- Check that your coding agent has loaded the MCP server configuration
Agent not discovering the server:
- The MCP endpoint is only available in development mode
- Make sure you're using Next.js 16 or above
- Try restarting your coding agent after starting the dev server