How TokenCap Extracts Component Hierarchies and Props Flow from JSX and SFCs

Frontend codebases are notoriously difficult for AI coding assistants. While backend files have clear import/export hierarchies, modern frontends rely on dynamic JSX composition, context providers, and single-file templates.

Instead of treating frontend files like generic text blobs, TokenCap includes a specialized frontend analyzer in src/frontend/.

What We Extract

1. Component Graph: Built from actual JSX usage nodes rather than file path heuristics.
2. Props Flow: Tracks which props are declared in signatures versus what attributes parents pass.
3. Route Mapping: Automatically maps Next.js (both App Router and Pages), React Router, and Vue Router layouts.
4. Testing & Accessibility: Indexes data-testid, aria-label, and role attributes so test-writing agents do not hallucinate selectors.

Inspecting Frontend Intelligence

Run TokenCap to inspect your UI tree:

tokencap make --profile balanced

Generated frontend summary excerpt:

## Component Graph: DashboardHeader
- File: src/components/DashboardHeader.jsx
- Rendered By: AppLayout, AdminShell
- Child Components: UserAvatar, NotificationBell, SearchBar
- Props Declared: { user: UserProfile, notificationsCount: number, onSearch: function }
- Props Passed By Parents:
  - AppLayout passes: user, notificationsCount
  - AdminShell passes: user
- Routes: /dashboard, /admin/*

Because this map is derived directly from the tree-sitter AST, it supports React JSX/TSX as well as Vue, Svelte, and Angular single file components without requiring a webpack or vite build step.

Explore the frontend intelligence docs at tokencap.vansharora.app