@ashwindojo/codeatlas-vite-plugin

Give Claude and Cursor a live map of your React, Vue, or Svelte codebase — in 5 minutes.

Add one plugin to vite.config.ts, annotate a few components, and your entire business-flow graph is instantly queryable by any MCP-compatible AI tool through a live HTTP endpoint at http://localhost:5173/mcp.

No separate server. No extra port. Updates automatically on every file save.

Install

npm install -D @ashwindojo/codeatlas-vite-plugin

Setup — 3 steps

Step 1 — Add to vite.config.ts

import { codeAtlas } from '@ashwindojo/codeatlas-vite-plugin'

export default defineConfig({
  plugins: [react(), codeAtlas()],
})

Step 2 — Annotate your components

/**
 * @productFlow("payments")
 * @routeHandler("/checkout")
 * @ownership("payments-team")
 */
export default function CheckoutPage() { ... }

Step 3 — Run vite dev

  ➜  Local:          http://localhost:5173/
  ➜  CodeAtlas MCP:  http://localhost:5173/mcp

That's it. Claude and Cursor can now query your codebase structure in real-time.

Connect to Claude Desktop

In ~/Library/Application Support/Claude/claude_desktop_config.json:

{
  "mcpServers": {
    "codeatlas-dev": {
      "url": "http://localhost:5173/mcp"
    }
  }
}

Restart Claude Desktop, then ask:

"What components are in the payments flow?" "Which team owns the auth feature?" "What Redux state does the dashboard use?"

Connect to Cursor

In Cursor → Settings → MCP:

{
  "mcpServers": {
    "codeatlas-dev": {
      "url": "http://localhost:5173/mcp"
    }
  }
}

What the MCP server exposes

| Tool | Description | |---|---| | get_repo_context | Full overview: flows, states, APIs, owners | | get_flow_context | Deep dive into a single business flow | | get_component_context | Context for one annotated component | | list_flows | All detected flows with counts | | list_all_annotations | Every annotated node, filterable by type | | search_flows | Text search across names, files, annotations |

REST endpoints (dev only)

| URL | Returns | |---|---| | /__codeatlas/flows | All flows as JSON | | /__codeatlas/annotations | All annotated nodes as JSON | | /__codeatlas/index | Full graph as JSON |

Plugin options

codeAtlas({
  mcpPath: '/mcp',          // MCP endpoint path. false to disable.
  writeIndex: true,          // Write .codeatlas/index.json on each save
  extensions: ['.ts', '.tsx', '.vue', '.svelte'],
  customAnnotations: [
    { name: 'workflow', description: 'Business workflow', category: 'flow' },
  ],
})

Virtual module

import index from 'virtual:codeatlas'

console.log(index.flows)        // { payments: FlowGraph, auth: FlowGraph }
console.log(index.criticalPaths) // [AnnotatedNode]
console.log(index.ownership)    // { 'payments-team': [AnnotatedNode] }

Part of the CodeAtlas ecosystem

| Package | What it does | |---|---| | @ashwindojo/codeatlas-core | Parser, indexer, CLI | | @ashwindojo/codeatlas-vite-plugin | Live MCP server inside vite dev ← you are here | | @ashwindojo/codeatlas-mcp | Standalone MCP server for CI & Claude Desktop |

MIT © 2026