Reusable diagram components for building no-code AI agents
Composabl builds a no-code platform for training autonomous AI agents. By removing the need to write code, they help organizations rapidly experiment, iterate, and deploy agents.
Company needed to quickly deliver a polished MVP of their product – a diagram-based, no-code interface for training AI agents. Their main priority was speed. The platform’s architecture required React Flow expertise and robust frontend capabilities to build advanced diagramming views.
At the start, the client wanted to verify our technical competence and approach to collaboration. Once we delivered on expectations, Composabl expanded the scope.
No-code builder for autonomous agents with interactive diagrams, dashboards, and agent-based logic
MVP, diagram layout improvements, light mode, and long-term front-end support
Clear milestones. Fast results. A roadmap that scaled with the product.
Supporting the fast-paced platform development
Composabl needed to move fast – launching a visual-first product while scaling internal processes and development capacity. The challenge was to deliver critical front-end features quickly, improve diagram UX, and remain flexible as the scope evolved.
Tight deadline for MVP delivery
The team had to implement a working diagram editor in less than 3 weeks to meet the end-of-February MVP goal.Â
No in-house expertise in diagrammingÂ
The client opted to collaborate with external specialists in visual editors to effectively bring their vision to life.Â
Evolving project scopeÂ
The requirements changed during the three project phases, requiring flexibility and regular adjustments to meet the client's needs.Â
Complex UI built from Figma designsÂ
Interactive views had to be implemented precisely from Figma, including dashboards, sidebars, and light mode.Â
A long-term need for collaborationÂ
The initial success led to a year-long partnership, requiring smooth onboarding, ongoing knowledge sharing, and flexible team integration.Â
From MVP sprint to long-term front-end partnership
Built a React Flow-based diagram editor with auto layout and core UX in under three weeks
Added dashboards, drag-and-drop, light mode, and a second diagram from Figma designs
Worked long-term from the client’s board, ensured smooth dev process and knowledge transfer
Fast-track delivery of a fully interactive, no-code editor
Phase 1 – Rapid delivery
Composabl needed to launch a working MVP by the end of February 2024. We focused on improving diagram layout logic and delivering visible results within 2–3 weeks. This was a trial phase, where our speed and React Flow expertise were tested under practical conditions. Our team worked closely with the client to define the scope and deliver fast.
Phase 2 – Building new views and smarter diagrams
With trust established, we expanded our role to developing UI based on Figma designs and creating a second diagram with more advanced logic. We rewrote components, collaborated with Composabl’s CTO, and worked directly in their GitHub repository. The goal: polish the product and prepare it for broader user testing.
Phase 3 – Full integration and long-term support
We became an embedded part of the Composabl team – no fixed scope, just continuous delivery. We operated in a flexible environment, adapting to the client’s workflow with weekly syncs aligned to their time zone. Our lead developer worked independently, handled evolving priorities, and trained the client’s internal team before handoff. This stage of collaboration spanned close to a year.
Key features that combine visual precision with smart interactions
Knowledge graph with reusable blocks
Create and connect skills visually, without code. Snap logic pieces together in a clear canvas.
Dashboard integration
Monitor agent metrics, logs, and system state in real time. Built with Supabase, Tailwind, and Next.js for performance and scalability.
Live connection preview during drag-and-drop
Preview connected node structures near the cursor before confirming placement. Existing elements automatically reflow and revert if the action is canceled. Built with advanced React Flow custom logic.
Light mode and theming
Custom light theme support with consistent styling across diagrams and dashboards, built with Figma design tokens and Tailwind CSS v4’s variable-based approach for future theming flexibility.
Timeline view for data exploration
Visualize the agent's learning progress and errors over time, with scrollable views optimized for large data volumes. This feature is based on status updates provided by the controller, offering insights into key training and simulation stages.
Outcomes that speak for themselves
What sets this case apart is how fast and effectively we adapted to the client’s evolving needs. Our deep knowledge of React Flow and diagramming logic gave Composabl a clear edge in building a user-friendly, data-rich application – while saving months of development time.
- Delivered a fully functional MVP in just 3 weeks
- Helped scale the platform from concept to production-ready features
- Prepared Composabl’s team for in-house continuation through final training sessionsÂ