Designing an IDE to build and test conversational AI agents.

Most teams building voice agents author their conversation in spreadsheets or flowcharting tools, then manually translate it into a system prompt. Flowstore is an open-source IDE created by Tapan which closes that gap: upload a system prompt and it renders as an editable node flow on canvas.

Teams can build with an AI assistant, test against simulated personas, and compare how different models perform on the same spec, all in the browser. I worked on the editor's interface on my own time outside my main engagement.

The challenge was density: the IDE surfaces lots of information at once (the master prompt, node inspectors, simulation outputs) and the existing layout scattered related controls across the screen. I worked on restructuring the interface and introducing a design system.

It's in its early stages, currently in the hands of a small set of teams. Highlights follow:

Consolidating system prompt controls in one place

The system prompt is compiled from several parts (agent, variables, guardrails, capabilities, knowledge), but they sat as disconnected buttons across the top bar, separate from the prompt itself. Opening any one launched a modal that covered the canvas, blocking users from referencing the flow. I grouped these related actions into a left panel where any section can open without blocking the canvas, freeing the top bar for import, export and settings.

Showing every guardrail a flow actually follows

Flow-level guardrails existed, but the UI never surfaced them. A user could open a flow and assume they were seeing everything governing its behaviour, when rules specific to that flow were invisible. I added a Flow-level guardrails section to the editor showing local and agent-level guardrails together, so users get the full picture of what shapes a flow's behaviour and ensuring they don't add conflicting rules.

Designing a comparison report for decisions, not just data.

Reports compare models (on the same prompt) for speed and accuracy, so teams can choose what to deploy. The old version only showed average latency and divergence count; this hid what actually mattered. A model could average 0.7s and still hit 6.1s in 1 of 20 replies, which makes a caller think the line dropped. I redesigned it to show the full latency distribution (p50, 95, max), added latency by language, and linked every divergence to its transcript.