# AI agent and workflow building platform

Sapiom Agent Studio.

Canonical case study: https://tidjane.ai/work/sapiom-agent-studio

Author: Tidjane Tall, Founding Design Engineer. San Francisco, California.

## Role and scope

I worked with the founder CEO, engineering and an AI researcher in 2026. My scope covered product design, React implementation, shared components, Storybook documentation and the interactive launch demo.

## Make the agent’s work inspectable

**Problem.** Teams need to know what an agent will do, which systems it can access and whether its work succeeded. In the early builder, chat could accept an answer without updating the workflow. Long replies buried the next decision.

**Response.** Connect the request, editable plan and execution evidence around one workflow. Ask for one decision at a time, show the resulting change and keep revision and interruption available.

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 | Cursor, Lovable, Replit, Devin, Claude Code | Let people correct the proposed plan through editable choices and confirm it before the build. |
| Conversation and workflow | Zapier, n8n, Linear | Connect each chat thread to its workflow and show the result of an edit in the plan. |
| Run inspection | Mastra, Google Agent Studio | Show run state and step outputs beside the workflow so a team can investigate unexpected results. |

### Current market context

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

| Product | Documented capability | Product implication |
| --- | --- | --- |
| [Gumloop](https://docs.gumloop.com/core-concepts/agents) | Guided setup, connector accounts, per-tool approvals and task-level costs. | A task needs explicit access and action boundaries, not only a prompt. |
| [Zapier](https://help.zapier.com/hc/en-us/articles/38215656607757-What-is-Zapier-Copilot) | Copilot builds and revises automations in context. Building and testing are separated from live task usage. | Keep configuration, testing and live execution distinguishable. |
| [Mastra](https://mastra.ai/docs/studio/overview) | 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. |

Official documentation reviewed October 18, 2026. Product implications are design analysis; they are not claims of feature parity.

LangChain’s State of Agent Engineering survey provides industry context: 89% reported some observability, 52.4% offline evaluation and 37.3% online evaluation. All figures use the full self-selected sample of 1,340 respondents, collected November 18 to December 2, 2025; practices overlap.

Inspection is only part of verification. Anthropic’s evaluation guidance distinguishes the execution record from the actual outcome. 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.

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.

The interactive Agent studio prototype uses example workflow data. Its branching workflow includes parallel checks, a failed request, retry, assessment and human approval. A second interactive demo follows a receptionist agent into its scheduler. Close the sidebar and conversation to focus on the canvas, select the scheduler to inspect its steps, then open it and return through the breadcrumb. This focused reconstruction uses simulated appointment data and the source interaction model.

## 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.

The console walkthrough covers product entry points and templates, agent activity and run signals, and integration status with access scopes. All displayed account and usage figures are 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.

My merged contributions connected chat threads to workflows, consolidated the folder picker used by both Studio 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.

Shared components connect model selection, attachments, conversation and workflow controls. The case study demonstrates these interactions with example 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. The interactive mobile prototype shares the same workflow controls and conversation components.

## 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. The case shows three Agent studio and Router states from the working prototype and recording script, using sample data.

Storyboard studies from product exploration show the workflow, execution state and conversation.

## 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.

- Homepage: introduce the platform through the products working together.
- Router: explain model selection through the request developers already send.
- Agent Studio: show the workspace and the path from an idea to an inspectable agent.
- Runtime: make execution, waiting and resuming concrete through the run lifecycle.

The displayed interface examples use sample data.

## Product launch and results

Sapiom introduced Router, Agent Studio and Runtime alongside its $35M Series A. Design and development continued after launch. The launch recap reported over 2 million launch-post views and 67 media placements, including 55 syndications. Views are not unique people. These are company milestones, not measured effects of the interface.

[Final launch film, published by founder Ilan Zerbib](https://x.com/i_zerbib/status/2085064722060398872)

## Sources

- [Sapiom: The next trillion agents](https://www.sapiom.ai/blog/the-next-trillion-agents/)
- Internal launch recap: aggregate views and coverage.
- Project records: design repository, internal conversation walkthroughs, team reviews and merged contributions.
- [LangChain: State of Agent Engineering](https://www.langchain.com/state-of-agent-engineering). Industry context from a self-selected vendor survey of 1,340 respondents: 89% reported some observability, 52.4% offline evaluation and 37.3% online evaluation. All use the full sample; practices overlap.
- [Gumloop: Agents](https://docs.gumloop.com/core-concepts/agents). Current product documentation, reviewed October 18, 2026.
- [Zapier: What is Copilot?](https://help.zapier.com/hc/en-us/articles/38215656607757-What-is-Zapier-Copilot). Open beta at review, October 18, 2026.
- [Mastra: Studio overview](https://mastra.ai/docs/studio/overview). Current product documentation, reviewed October 18, 2026.
- [Anthropic: Demystifying evals for AI agents](https://www.anthropic.com/engineering/demystifying-evals-for-ai-agents). January 9, 2026.
- [Gartner: Agentic AI project forecast](https://www.gartner.com/en/newsroom/press-releases/2025-06-25-gartner-predicts-over-40-percent-of-agentic-ai-projects-will-be-canceled-by-end-of-2027). June 25, 2025 projection, not an observed failure rate.

## Areas of practice

Founding design engineering; AI agent studio; agent workflow builder; product design; developer experience; AI chat UX; interaction design; design systems; Storybook documentation; React; TypeScript; responsive web applications; rapid prototyping; competitive research; launch storytelling.