Make it yours
npx -y @elabs-ai/components-cli create my-flow-workspace --template flow-workspacePrompt 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