Skip to main content

Flow Workspace

Starters

A node canvas with an inspector, for pipelines and agent graphs.

Make it yours

npx -y @elabs-ai/components-cli create my-flow-workspace --template flow-workspace
Prompt for your coding agent

Paste it into Claude Code, Cursor, Codex or any other coding agent. Text in [brackets] is yours to fill in.

Build a new app with brand-ui, the React component library published on npm as @elabs-ai/components-*.

1. Read https://elabs-ai.com/llms.txt first: it maps every package and the rules. If you can use MCP servers, connect https://elabs-ai.com/mcp and use its search, docs and tokens tools. If not, run the same lookups in the terminal: `npx -y @elabs-ai/components-cli search "<what you need>"` and `npx -y @elabs-ai/components-cli docs <Component>`.
2. Scaffold the app: `npx -y @elabs-ai/components-cli create my-app --template flow-workspace`. Install its dependencies, start the dev server and confirm the starter screen renders before you change anything.
3. Then build this on top of the scaffold: A node canvas with an inspector, for pipelines and agent graphs.
4. Start each whole screen from the playbook the search tool returns for it (dashboard, data-app, ai-assistant, flow-workspace, settings, marketing) and compose registry blocks before writing layout by hand.
5. Rules: use only @elabs-ai/components-* components and the semantic tokens — no raw colours, no raw font sizes, no arbitrary Tailwind values. Look up each component's real props with the docs tool before you use it; never guess a prop.
6. Done means: the typecheck passes, `npx -y @elabs-ai/components-cli audit src --strict` reports nothing, and you have opened the app and looked at every screen you touched in the light and the dark theme.

Use it for

  • Node-and-edge canvas for editing a pipeline or workflow, with a selection inspector