Connect your coding agent to Auto.
on.auto ·
How It Works ·
Narrative-Driven Development ·
Spec-Driven Development ·
Discord
The Auto Agent plugin connects your coding agent to the Auto platform. Model your software on Auto as a four-level Narrative-Driven Development hierarchy — Domain → Narrative → Scene → Moment — then let your coding agent build from the structured model on your machine.
Works with Claude Code today. More agents coming soon.
What it does
- Instant dev servers — scaffolds and starts React + Apollo GraphQL servers immediately, so you see a live preview in the Auto app from the start
- Syncs the narrative model from your Auto workspace to your coding agent
- Teaches your agent how to build from structured specs, not vague prompts
- Premium design — generates beautiful, non-generic UIs using curated design patterns (based on Payoss/UIUX-high-taste-skill)
- Browser verification — tests the running app visually after each scene (via browser MCP tools or curl fallback)
- Validates changes — if your agent modifies the model, Auto checks it against 50+ structural rules and corrects anything off-spec
- Incremental builds — change the narrative, rebuild only what's affected
Quick start
Inside Claude Code:
/plugin marketplace add BeOnAuto/auto-plugins
/plugin install auto-agent
/reload-plugins
Then connect with your API key (find it in the Auto app under Agents in the sidebar):
/auto-agent:connect <your-api-key>
Scaffold and start dev servers (React frontend + Apollo GraphQL backend):
/auto-agent:scaffold
Build your app from the narrative model:
/auto-agent:build
How it works
- Model on Auto — describe your app, Auto generates a structured narrative with scenes, moments, UI specs, and business rules
- Connect your agent — install the plugin, connect with your API key
- Scaffold — dev servers start immediately with a welcome page and health check — you see a live preview in Auto right away
- Build — your agent generates code from the validated model into the running servers with hot-reload
- Verify — after each scene, the agent tests the running app via browser tools or GraphQL queries
- Iterate — modify the narrative on Auto, the model syncs instantly, rebuild what changed
Your coding agent does the implementation. Auto keeps it honest.
Stack configuration
The default stack is React + Vite (frontend) and Apollo GraphQL (backend). You can customize this in .auto-agent/config.json:
{
"apiKey": "ak_...",
"serverUrl": "https://collaboration-server.on-auto.workers.dev",
"workspaceId": "...",
"stack": {
"frontend": "react-vite",
"backend": "apollo-graphql",
"clientDir": "client",
"serverDir": "server"
}
}
The stack field is optional — defaults are applied when absent. The scaffold and build skills read this configuration to determine where to generate code and what frameworks to use.
Design quality
Generated UIs follow premium design patterns adapted from Payoss/UIUX-high-taste-skill. This includes:
- Premium typography (Geist, Satoshi, Outfit — never Inter or Roboto)
- Neutral palettes with restrained accent colors
- Double-Bezel (Doppelrand) card architecture
- Spring-physics animations and scroll-triggered reveals
- Responsive layouts that collapse gracefully on mobile
- Skeleton loaders, empty states, and error states
The design patterns are in skills/build/references/design-patterns.md. You can customize them to match your brand.
Browser verification
After building each scene, the agent attempts to verify the running application:
- Browser MCP tools (preferred) — if a browser MCP server like
chrome-devtools is installed, the agent navigates the app, takes screenshots, checks for console errors, and walks through interaction flows
- GraphQL testing (always) — sends each moment's GraphQL operations against the running server to verify resolvers and data flow
- Curl fallback — if no browser tools are available, verifies the frontend returns HTML and the GraphQL endpoint responds
For the best experience, install a browser MCP server so the agent can visually verify what it's building.
Transparency
