Codebase Analysis
How Valarchi builds a semantic snapshot of your product — the foundation every AI agent works from.
Before any AI agent can generate grounded output, Valarchi needs to understand what your product already is. Connect your repository and Valarchi extracts a semantic snapshot — what your product does, how it's structured, and how it looks. Review and confirm what was found, and every downstream agent works from that shared foundation.
What codebases are supported
Valarchi's analysis works with react web apps. The frontend repository is the primary source of truth — it's where product context, screens, design tokens, and UI patterns come from. The backend repository, if you add one, is used by the Tech Plan agent to understand your technical architecture.
Next.js (App Router)
React + React Router
Any backend
How to use it
Install the GitHub App and select repositories
Install the Valarchi GitHub App and provide access to your github repositories that power your product. Once installed, you will see the allowed repositories in our app. Select up to two repositories in our app — one frontend and one backend, or a single full-stack repo if both live together.
The two-repo limit is intentional. The idea is one frontend and one backend — or a single full-stack repo (like Next.js) where both live together. If your project is a monorepo containing multiple separate apps, one repo is enough; you'll pick which app in the next step.
Pick your web app
If Valarchi finds multiple web apps inside your selected repository — common in monorepos with separate frontend and admin apps — choose the one web app that powers your product.
One product = one web app. This keeps the semantic snapshot focused. Analysis across multiple apps would produce noise — mixed screens, conflicting design tokens, overlapping patterns. Valarchi's agents work best with a single, coherent surface.
Analysis runs
Four analyzers run in sequence against your frontend codebase. Each extracts a different dimension of your product.
🗂
Analyzing CodebaseRouting Structure
Design System
UI Patterns
Product Context
Review and confirm what was found
You'll review four sections: product context, screens, design tokens, and UI patterns. The AI gets it mostly right — but you know your product. Any corrections you make here flow through to every downstream artifact: PRDs, wireframes, task specs.
Create product and start planning milestones
Once you confirm the analysis, create the product. Valarchi navigates you to the product detail page — your home base for everything that follows. From here you can view and edit any analysis section, retrigger analysis when your codebase changes, and create milestones to start planning.
Fielddesk
Support that scales with your team
✦
Product Analysis
🏁
Milestones
No active milestones
The Reanalyze with AI button lets you re-run analysis any time — after a milestone ships, after a major refactor, or whenever the codebase has drifted. You decide when the snapshot needs updating. Each milestone shows where it left off so you can pick up exactly where you stopped.
What gets extracted
Here's what each of the four sections contains and how it's used.
Product Context
High level information about your product.
Example output
Product name
Fielddesk
Tagline
Support that scales with your team
Problem
Small support teams drown in tickets as user volume grows, with no visibility into what's causing repeat issues
Value proposition
AI triage and response suggestions that keep small teams fast without growing headcount
Target users
Support leads
Customer success managers
Early-stage founders managing support themselves
Key features
Ticket inbox with AI triage and priority scoring
Auto-routing by topic, urgency, or assignee workload
Response suggestions drawn from past resolutions
Customer health scoring across ticket history
Team workload and SLA dashboard
Used by: PRD agent (product voice, feature scope), all agents (context grounding)
Screens & User Flows
Every route in your app is discovered and assigned a semantic meaning — not just its path, but what the screen does, who uses it, and how it connects to other screens. This becomes the baseline for the App Structure agent to diff against when planning what changes each milestone.
Example output
· Home
Marketing homepage. Communicates product value for small support teams and drives trial signup.
· Dashboard
Primary authenticated view. Shows open ticket count, SLA health, team workload, and urgent escalations at a glance.
· Ticket Inbox
Full ticket queue with AI triage scores, priority badges, and assignee filters. Main working surface for support agents.
· Ticket Detail
Single ticket thread. Shows conversation history, AI-suggested responses, customer health score, and resolution actions.
· Reports
SLA compliance, resolution time trends, and team workload breakdown. Used by support leads for weekly reviews.
Used by: App Structure agent (baseline diff), Wireframe agent (screen inventory)
Design Tokens
Extracted from your design system — colors, typography, and spacing values. Valarchi supports any JS/TS design library, not just MUI. These tokens are what make wireframes feel like your product rather than a generic template.
Example output
Colors
Primary
#0d9488Primary Dark
#0f766eSecondary
#f43f5eSuccess
#10b981Error
#ef4444Typography
2rem / 800
1.75rem / 700
1rem / 400
0.75rem / 400
Spacing
Base unit: 8px · Scale: 4, 8, 12, 16, 24, 32, 48, 64
Used by: Wireframe agent (token-aware layouts), Tech Plan agent (design system context)
UI Patterns
Structural conventions identified across your codebase: how layouts are composed, which components are used where, responsive behavior, and naming patterns. This is what lets the wireframe and tech plan agents recommend things that actually fit your codebase — not generic best practices.
Example output
Layouts
AppShell
Full-height layout with sticky sidebar and scrollable main content. Used on all authenticated routes.
Conventions
Dense data (tickets, logs) in tables with fixed headers; browsable content in card grids
Layout choice reflects the user's reading intent — scan vs browse
Status indicators follow a consistent color language — pending is amber, active is blue, resolved is green, escalated is red
Users learn the color system once and read status at a glance across all screens
Modals for destructive actions, drawers for contextual detail
Keeps the user in context without full page transitions
Used by: Wireframe agent (component reuse), Tech Plan agent (coding conventions)