Sapiom

AI agent and workflow building platform

I designed agent workflows and shipped shared React components as Sapiom’s Founding Design Engineer.

AI agents
Workflow builder
Developer experience
Design systems

Overview
Founding Design Engineer
Product design, React implementation, shared components, Storybook and launch demo.
Team: Founder CEO, Engineering and AI Researcher
Problem
Chat and workflow fell out of sync
The early builder could accept a chat response without updating the workflow. Long replies buried decisions, making it hard to tell what an agent would do.³
Solution
Build, revise and inspect one workflow
Keep the conversation, editable plan and run evidence together. Show each change in context, with controls to revise the plan or stop a run.

Six internal creation walkthroughs and five change and recovery checks informed the interaction requirements. Prospect conversations informed realistic healthcare and marketing demos. With the founder, I examined the product boundary: agent creation and run inspection in Agent studio, with fleet administration treated as a separate responsibility.³

Preliminary market research

I compared how adjacent tools help people review a plan, edit a workflow and inspect execution. These patterns informed the builder’s responsibilities.

Pattern	References	Design decision
Review before execution	CursorLovableReplitDevinClaude Code	Let people correct the proposed plan through editable choices and confirm it before the build.
Conversation and workflow	Zapiern8nLinear	Connect each chat thread to its workflow and show the result of an edit in the plan.
Run inspection	MastraGoogle Agent Studio	Show run state and step outputs beside the workflow so a team can investigate unexpected results.

Patterns from product research and internal reviews.³

Cursor reference showing review and commit actions after an agent response — Cursor · review before action

Mastra Studio documentation outlining agent development, testing and observability — Cursor · review before action

A later comparison extends the project research with agent configuration, automation and evaluation capabilities.

Product	Documented capability	Product implication
Gumloop⁵	Guided setup, connector accounts, per-tool approvals and task-level costs.	A task needs explicit access and action boundaries, not only a prompt.
Zapier⁶	Copilot builds and revises automations in context. Building and testing are separated from live task usage.	Keep configuration, testing and live execution distinguishable.
Mastra⁷	Workflow graphs, step execution, tool outputs, errors and repeatable evaluation datasets.	Make it possible to inspect an output, revise the agent and test the change.

Comparison based on official product documentation. Implications describe design opportunities, not Sapiom feature parity.

Visibility is more common than evaluation

Some observability: 89%
Offline evaluations: 52.4%
Online evaluations: 37.3%

LangChain’s survey of 1,340 respondents. All figures use the full, self-selected sample; practices overlap.⁴

Inspection is only part of verification. Anthropic’s evaluation guidance distinguishes the execution record from the actual outcome, such as whether a requested action changed the system.⁸ Gartner’s June 2025 forecast projected that over 40% of agentic AI projects would be canceled by the end of 2027, citing cost, unclear value and inadequate risk controls.⁹ Together, these sources frame a product requirement: expose what ran, what changed and what it cost. They do not measure Sapiom’s results.

Connecting chat, workflow and run details

Each workflow keeps its conversation, plan and run evidence together. On desktop, chat sits beside Canvas and Steps so a team can revise the plan or inspect an output without losing the selected task.

Sapiom Agent studio with contextual chat, a workflow canvas and a shared composer — Interactive Agent studio prototype with example workflow data.

In internal walkthroughs, I checked free-text answers, changes to confirmed choices and step removal. I refined selection across chat and the workspace, and made Stop preserve the text already on screen.³

Release a spending hold, follow the run, then inspect Steps and Canvas. Product demo with sample data.

From building an agent to operating it

The web console gives teams a shared entry point for Agent studio, Router and Runtime. Agent activity, usage and connected accounts stay accessible as work moves from an individual workflow to a fleet.

Sapiom web console with product entry points, agent templates and workspace navigation — Web console: product entry points, agent operations and connected accounts. Screens use sample data.

Sapiom agent fleet with run activity, success rate, usage and agent list using sample data — Web console: product entry points, agent operations and connected accounts. Screens use sample data.

Agent studio on mobile

On phones, chat and the workflow each get the full screen. Developers can switch between the conversation, Steps and Canvas while keeping the same workflow selected.

Sapiom Agent studio conversation with workflow review and composer — Chat, Steps and Canvas share the same workflow context. Each interactive example uses sample data.

Sapiom Agent studio execution steps with status and selected-step details — Chat, Steps and Canvas share the same workflow context. Each interactive example uses sample data.

Shared components and code

I built shared React components and documented their states in Storybook. The examples cover selection, streaming replies, approvals and interruption.

Sapiom workflow steps, contextual chat, approvals, run controls and project components — Controls 10 px radius

My merged contributions connected chat threads to workflows, consolidated the folder picker used across the builder apps and showed builder stages, evidence and cancellation inside chat. These changes were reviewed in the design repository. I used TypeScript and Tailwind, Figma for exploration, and Cursor and Claude Code for coding assistance.³

Preparing the launch demo

I built repeatable Agent studio and Router demos for recording and hands-on exploration. The sequence followed one task from agent creation to execution and usage costs. An early 52-second concept film tested the story before final production.

Storyboard study with project navigation, an agent map and a selected workflow — Storyboard studies from product exploration.

Storyboard study showing completed and degraded steps — Storyboard studies from product exploration.

Interactive launch demo showing the agent created from a task — Agent studio and Router demo states from the working prototype and recording script. Sample data.

Interactive launch demo showing the workflow running and calling tools — Agent studio and Router demo states from the working prototype and recording script. Sample data.

Three products, one platform story

A shared homepage introduces the platform. Dedicated pages explain model routing, agent creation and execution, each with a focused product demonstration and a clear developer entry point.