@ashwindojo/codeatlas-vite-plugin

@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

REST endpoints (dev only)

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

MIT © 2026