AgentUX

UX flow workspace for AI-built apps

See the user journey your AI is building before it drifts.

AgentUX maps how screens connect right now, lets you shape the intended next flow, and exports that UX plan back into your coding agent as a structured spec.

npm install @yamparala27/agentux -D
View GitHub Install AgentUX
  • Static route detection for Next.js and React Router
  • Runtime evidence for paths the app actually takes
  • Markdown plus structured export for AI handoff
Current flow
Home -> Sign up -> Dashboard -> ?
Home -> Sign in -> Dashboard -> Budgets
Intended flow
First-run journey
Home | Sign up | Onboarding | Connect bank | Dashboard
Turn loose prompts into a flow spec the AI can follow.

Why AgentUX

AI builds screens quickly. It does not preserve product flow on its own.

01

Understand current flow

Detect routes, links, and observed runtime transitions so you can inspect the app that exists today instead of guessing from scattered prompts.

02

Shape intended flow

Rearrange a journey semantically by deciding what should happen next, not just by moving boxes around for presentation.

03

Export back to AI

Send a human-readable and machine-friendly flow spec back into your coding agent so the next build step follows a UX model, not fragmented instructions.

The product loop

A simple feedback cycle for builders shipping with AI.

1

Install in your app

Drop AgentUX into the project and let it inspect routes, edges, and runtime paths.

2

Review the current journey

See where users enter, branch, stall, or fall into missing next steps.

3

Define the intended next flow

Mark what the experience should become before asking AI to implement the next round.

4

Export the spec

Give your agent a structured flow handoff it can build against with much less drift.

Install

Download the package, render it in your app, and start mapping flow.

Step 1

Install the package

npm install @yamparala27/agentux -D

Add AgentUX as a dev dependency in the app you are actively building with AI.

Step 2

Render the app map

import { AppMap } from '@yamparala27/agentux';

function App() {
  return (
    <>
      <YourApp />
      <AppMap />
    </>
  );
}

A floating button appears in development so you can inspect the current screen graph.

Optional

Precompute a fuller map

import { analyzeProject } from '@yamparala27/agentux/analysis';

const data = await analyzeProject('./');

Use static analysis when you want more complete route coverage before visiting every page.

Works with

  • Next.js App Router
  • Next.js Pages Router
  • React Router

Best for

  • AI-built product prototypes
  • Cleaning up flow after rapid prompts
  • Turning UX intent into a spec for agents

Deploy this landing page on Vercel

  • Framework Preset: Other
  • Root Directory: site
  • Build Command: leave empty
  • Output Directory: leave empty

Who it helps

Built for the moment when the app is growing faster than your mental model.

Personal finance

Clean up the first-run path from landing page to signup, onboarding, bank connect, and dashboard.

SaaS admin

Untangle settings, billing, team management, and audit flows before navigation turns into patchwork.

E-commerce

Compare guest checkout and signed-in checkout paths, then tell AI which flow should become the default.

Flow spec export

Give humans a clear summary and give AI a stable structure.

What the export should carry

  • Current flow grounded in code and runtime evidence
  • Intended next-state journey
  • Requested changes and open questions
  • Stable node and edge data for AI consumption
# AgentUX Flow Spec

## Product Goal
Help a user reach a useful dashboard after connecting their bank.

## Current Flow
- Home -> Sign up -> Dashboard
- Home -> Sign in -> Dashboard -> Budgets

## Intended Flow
- Home -> Sign up -> Onboarding -> Connect bank -> Dashboard
- Returning users: Home -> Sign in -> Dashboard

## Requested Changes
1. Add onboarding after first sign-up
2. Make bank connection mandatory before dashboard
3. Surface a clear next step on dashboard

```json
{
  "nodes": ["home", "signup", "onboarding", "connect-bank", "dashboard"],
  "edges": ["home->signup", "signup->onboarding", "onboarding->connect-bank"]
}
```

FAQ

Short answers to the setup questions most builders hit first.

Is AgentUX a Next.js app?

No. The package is a React and TypeScript library that can be installed into Next.js or React Router apps.

What does it help me do first?

It helps you see the app flow you have today, then define the intended flow you want next before prompting AI again.

Is this analytics?

No. AgentUX is for development-time UX understanding, not production session replay or funnel analytics.

Why export both Markdown and structure?

Humans review the summary quickly, while coding agents work better when the same flow is also represented as stable node and edge data.