◉ Origin Graph

Every component,
indexed and queryable.

The Origin Graph is a living knowledge graph of your entire component ecosystem — relationships, history, usage, and design tokens — all queryable in real time.

🔒 app.originmain.io/graph
NavBar Button Dashboard Card DashboardCard — selected Card Input --color -primary
Node Inspector
DashboardCard
uses 4
used by 2
tokens consumed 12
Edge types
Usage
Inheritance
Token link
Architecture

From source file to queryable graph
in four steps.

A two-pass pipeline — static analysis plus runtime capture — builds a continuously updated graph with zero manual annotation required.

01

Static analysis

An AST walker scans every component file, extracting imports, prop signatures, and design-token references without running your code.

02

Runtime capture

A React Fiber hook captures live props and state at render time, adding real-world usage data that static analysis alone can't see.

03

Graph construction

Nodes and typed edges — usage, inheritance, token links — are written to Supabase, forming a queryable graph that updates incrementally.

04

Query interface

A REST API and MCP tool set expose the graph to AI agents, the diff engine, and the Inspector — answering natural-language queries in real time.

Impact analysis, instant

Change a token.
See all 47 components affected — instantly.

Because every design-token link is a first-class edge in the graph, changing --color-primary immediately highlights every component downstream. No Storybook trawl. No grep. Just the answer.

  • Token edges are resolved at index time — the graph knows before you even ask.
  • Affected nodes are ranked by depth: direct consumers first, transitive next.
  • The result feeds directly into Intent Diff, so every PR ships with a complete blast-radius audit.
Request early access
Token blast radius — --color-primary
--color-primary #0066FF → #0891B2
Button direct
Card direct
NavBar direct
DashboardCard via Card
Input via Button
+ 42 more components…
Total affected 47 components
The graph as API

Not just a visualization.
A queryable API.

Every node in the graph is a structured JSON object accessible via REST or MCP tools. AI agents, CI pipelines, and custom tooling can query your entire component ecosystem programmatically — no scraping, no docs to keep in sync.

  • REST endpoints return nodes, edges, and subgraphs with fully typed results.
  • MCP tools let AI agents query the graph via natural language through Agent Bridge.
  • Completion Zone AI pulls the relevant graph neighborhood as context automatically — no manual prompt engineering.
GET /graph/nodes/Button
{ "id": "Button", "type": "component", "file": "src/ui/Button.tsx", "props": { "label": "string", "variant": "primary | secondary", "disabled": "boolean" }, "usedBy": ["Card", "NavBar"], "uses": [], "tokens": [ "--color-primary", "--radius-sm", "--font-weight-semibold" ], "updatedAt": "2025-04-25T14:22:07Z" }
MCP → graph.query("What will break if I rename Button?")
Technical foundation

Six layers that keep
the graph always current.

Origin Graph is designed to stay accurate as your codebase moves — incremental, typed, and accessible to any tooling that speaks REST or MCP.

🌳

AST walker

A Babel-based AST walker traverses every component file on save, extracting imports, JSX usage, and design-token references — without executing any code.

Static analysis

React Fiber runtime

A Fiber hook captures live props and state during rendering, adding real-world usage data — actual prop values in production — that static analysis cannot infer.

Runtime
🗄

Supabase graph store

Nodes and edges are persisted in Supabase Postgres with a graph-friendly schema. Postgres views and RPC functions serve subgraph queries with sub-10ms latency.

Persistence

Typed edges

Three edge types — usage, inheritance, token — are stored with directionality and metadata, making impact analysis a simple graph traversal rather than a heuristic search.

Data model
💬

Natural language queries

Agent Bridge exposes the graph as an MCP tool. Ask "What will break if I rename Card?" in plain English from Cursor, Claude Code, or any MCP-compatible editor.

Agent Bridge

Incremental updates

Only the files touched since the last commit are re-indexed. No full rebuild. A project with 1,000 components updates in under two seconds on a file save.

Performance
What connects here

Origin Graph powers
everything downstream.

The graph is infrastructure. Every Originmain feature that needs to understand your codebase queries it first.

Your component graph,
always up to date.

Early access is free. Connect your repo and the first full graph index runs in under a minute.