Visualize Next.js route map and API endpoint inventory
RouteGrid is a developer tool that takes a Next.js project — either pasted as source code or provided as a directory description — and produces a clear, navigable route map along with an API endpoint inventory. It identifies page routes, dynamic segments, layout boundaries, and API handlers, then renders them as an interactive visual grid so you can understand the full request surface area of your application at a glance.
Teams running medium-to-large Next.js codebases often struggle to answer basic questions: How many API routes exist? Which pages rely on dynamic [slug] parameters? Where are the nested layouts? RouteGrid answers these by feeding your code context into MiMo v2.5 Pro, which performs structural reasoning over the input and returns a typed JSON graph. The result is rendered client-side with no server-side persistence — your source code is never stored.
- Purpose-built for Next.js. Unlike generic AST visualizers, RouteGrid understands App Router conventions —
page.tsx,layout.tsx,loading.tsx,route.ts— and maps them to their semantic roles automatically. - AI-driven, zero-config analysis. No plugins to install, no Babel transforms to wire up. Paste code, get a route map. The MiMo v2.5 Pro engine handles the heuristics.
- API endpoint inventory with method detection. RouteGrid doesn't just list endpoints; it extracts HTTP methods (
GET,POST,PUT,DELETE) and summarizes request/response contracts when the source code exposes them. - Runs entirely in your environment. The only external call is to the MiMo inference endpoint. No telemetry, no accounts, no cloud dashboard — everything renders locally in your browser.
- Route tree visualization — hierarchical display of pages, layouts, and route groups with nested indentation.
- Dynamic segment highlighting —
[id],[...slug], and[[...catchAll]]segments are visually distinguished from static routes. - API endpoint table — auto-generated inventory listing path, HTTP method, and a one-line description inferred from handler logic.
- Middleware awareness — detects
middleware.tsand flags which route segments are subject to matcher rules. - Copy-to-clipboard JSON export — export the full structured route graph as JSON for CI pipelines or documentation generators.
- Dark/light theme — respects system preference with a manual toggle.
RouteGrid is a single-page Next.js application. The browser collects user input (pasted source code or a textual project description), sends it to an internal API route, which constructs a system prompt and forwards the request to MiMo v2.5 Pro. MiMo returns structured JSON describing the route graph, which the frontend parses and renders.
User (Browser)
│
▼
Next.js Page (src/app/page.tsx)
│ POST { source: "..." }
▼
/api/process (src/app/api/process/route.ts)
│ system prompt + user input
▼
MiMo v2.5 Pro (Token Plan API endpoint)
│ structured JSON response
▼
API Route → JSON parsed, validated
│
▼
UI (React components render route grid + API table)
| Layer | Technology |
|---|---|
| Frontend | Next.js 16 App Router, React 19, TypeScript 5, Tailwind 4 |
| Backend | Next.js API Route (runtime: nodejs) |
| AI Engine | MiMo v2.5 Pro via Token Plan endpoint |
| Icons | lucide-react |
| Tooling | Turbopack, ESLint |
- Node.js 20+ and npm 10+
- A MiMo API key — available through the Xiaomi 100T program
git clone https://github.com/cipherwork-eng/routegrid.git
cd routegrid
npm installCreate a .env.local file in the project root:
MIMO_API_KEY=YOUR_API_KEYnpm run dev # start development server (Turbopack)
npm run build # production build
npm start # serve production buildThe app will be available at http://localhost:3000.
| Variable | Required | Description |
|---|---|---|
MIMO_API_KEY |
Yes | Authentication key for the MiMo v2.5 Pro inference endpoint. |
src/
├── app/
│ ├── page.tsx # Main client page — input form and result renderer
│ ├── layout.tsx # Root layout with metadata, fonts, and theme provider
│ ├── globals.css # Tailwind directives and custom CSS properties
│ └── api/
│ └── process/
│ └── route.ts # POST handler — builds MiMo prompt, returns route JSON
└── public/
└── favicon.ico # Site favicon
Accepts Next.js source code and returns a structured route map.
Request Body
{
"source": "// app/page.tsx\nexport default function Home() {\n return <main>Hello</main>;\n}\n\n// app/dashboard/layout.tsx\nexport default function DashLayout({ children }) {\n return <div>{children}</div>;\n}\n\n// app/dashboard/analytics/page.tsx\nexport default function Analytics() {\n return <h1>Analytics</h1>;\n}\n\n// app/api/users/route.ts\nexport async function GET() {\n return Response.json([]);\n}\nexport async function POST(req) {\n const body = await req.json();\n return Response.json({ created: true });\n}\n\n// app/api/users/[id]/route.ts\nexport async function GET(req, { params }) {\n return Response.json({ id: params.id });\n}\n\n// middleware.ts\nimport { NextResponse } from 'next/server';\nexport function middleware(req) {\n return NextResponse.next();\n}\nexport const config = { matcher: ['/dashboard/:path*'] };"
}Response Body (200 OK)
{
"routes": [
{ "path": "/", "type": "page", "file": "app/page.tsx" },
{ "path": "/dashboard", "type": "layout", "file": "app/dashboard/layout.tsx" },
{ "path": "/dashboard/analytics", "type": "page", "file": "app/dashboard/analytics/page.tsx" }
],
"apiEndpoints": [
{
"path": "/api/users",
"methods": ["GET", "POST"],
"description": "List all users (GET) and create a new user (POST)"
},
{
"path": "/api/users/[id]",
"methods": ["GET"],
"description": "Retrieve a single user by ID"
}
],
"middleware": {
"present": true,
"matcher": ["/dashboard/:path*"]
}
}Status Codes
| Code | Meaning |
|---|---|
200 |
Success — route map and API inventory returned. |
400 |
Bad request — source field missing or empty. |
500 |
Internal error — JSON parsing failed or unexpected exception in handler. |
502 |
Upstream error — MiMo API returned an unparseable or error response. |
When you submit source code, RouteGrid's API route constructs a system prompt instructing MiMo v2.5 Pro to act as a Next.js static analysis engine. The model examines the file paths, exports, and handler signatures in your input and returns a JSON object conforming to the schema above. If the model includes a reasoning_content field (used by some MiMo streaming modes), RouteGrid gracefully falls back to parsing only the final content block. The JSON is validated with a lightweight schema check on the server before being sent to the client, where React components map the routes and apiEndpoints arrays into the visual grid and table views.
- Monorepo support — parse
apps/andpackages/directories in Turborepo and Nx workspaces. - React Router v7 compatibility — extend analysis to framework-mode React Router projects.
- CI/CD diff mode — compare route maps between two branches and flag added, removed, or changed endpoints.
- Export to OpenAPI — generate an
openapi.jsonskeleton from the extracted API endpoint inventory.
Contributions are welcome. Please open an issue first to discuss proposed changes. Fork the repository, create a feature branch, and submit a pull request with a clear description of what was changed and why. All code must pass npm run lint before submission.
This project is licensed under the MIT License — © 2026.
Powered by MiMo v2.5 Pro · Built with Hermes Agent and Claude Code