Agentic Workflow Architecture

Why this chapter matters

Generative UI is only useful if the work behind it is reliable. A pretty generated approval panel does not help if the agent cannot preserve state, call tools safely, recover from failure, or explain what it is doing.

LangGraph, CrewAI, and Strands represent different ways to organize agentic work. The frontend architect does not need to become the backend owner of every framework, but must understand how workflow architecture affects user experience.

Core mental model

An agentic workflow is a state machine with probabilistic steps.

It may include:

• user intent intake
• context retrieval
• planning
• tool selection
• tool execution
• intermediate decisions
• human approval
• generated UI updates
• retries and fallbacks
• final artifact creation
• audit and evaluation

The architecture challenge is to make this visible and controllable without exposing raw model internals.

Framework positioning

Framework	Useful mental model	Frontend impact
LangGraph	Graph/state-machine orchestration for controllable agents	Good fit for workflows with explicit nodes, state, streaming, memory, and human interruption
CrewAI	Crews and flows for multi-agent/task collaboration	Good fit when specialized agents perform roles under an orchestrated flow
Strands Agents	Model-driven agent SDK with tool use and deployment-oriented patterns	Good fit when using AWS-oriented infrastructure or model-driven tool orchestration

Do not choose an agent framework because it looks advanced. Choose it because the workflow needs state, branching, human gates, memory, tool governance, or multi-agent coordination.

Workflow state design

Every frontend-visible agent workflow should have durable state:

State field	Purpose
workflowId	Correlates UI, backend, model traces, retrieval, and tool calls
status	pending, running, waiting_for_user, failed, cancelled, completed
currentStep	Human-readable progress without exposing private reasoning
inputSnapshot	Preserves user request and selected context
retrievalSnapshot	Records source ids and filters used
toolCalls	Auditable list of external actions
generatedSurfaces	Replayable generated UI proposals
approvalRequests	Pending and completed human decisions
cost	Tokens, model calls, tool costs, latency
terminalResult	Final artifact, action result, or failure reason

This state should not live only in React memory. Long-running AI work must survive refresh, navigation, reconnection, and partial failure.

Human-in-the-loop architecture

Human approval is not a modal slapped onto an agent. It is a workflow state.

Use human-in-the-loop gates for:

• sending emails or messages
• updating records
• creating tickets or tasks
• spending money
• making irreversible decisions
• exposing sensitive data
• escalating to another team

Approval event contract:

{
  "type": "approval.requested",
  "workflowId": "wf_491",
  "payload": {
    "action": "send_retention_email",
    "risk": "external_communication",
    "summary": "Send a renewal discount offer to Acme Corp.",
    "preview": {
      "subject": "Renewal options for Acme",
      "bodyId": "draft_882"
    },
    "options": ["approve", "edit", "reject"]
  }
}

The frontend should render a real decision surface: preview, edit path, risk label, actor, and audit note.

Single-agent vs multi-agent decisions

Use one agent/workflow	Consider multi-agent
Task has one clear objective	Task has specialized domains or independent review roles
Tool set is small	Tool set spans different systems and permissions
Evaluation is straightforward	Outputs need critique, validation, or arbitration
Latency and cost must be minimal	Quality benefit outweighs extra latency and cost
User needs predictable steps	User benefits from parallel research or delegation

Multi-agent design increases coordination overhead. Use it deliberately.

Frontend-visible progress model

Expose progress as meaningful stages:

1. Understanding request
2. Gathering context
3. Checking permissions
4. Running tools
5. Drafting result
6. Waiting for approval
7. Applying changes
8. Completed or failed

Do not expose hidden chain-of-thought. Show tool names, source categories, safe summaries, and user-relevant decisions.

When the workflow emits generated UI, treat UI messages as workflow artifacts. The frontend should be able to answer:

• which node or agent produced this UI
• whether it is a draft, progress surface, approval surface, or committed artifact
• whether the user has edited it
• whether the agent may patch it automatically
• which event would remove or replace it
• how it can be restored when the thread or workflow is reopened

Error and recovery design

Agent workflows fail differently from normal APIs:

• model output is invalid
• tool is unavailable
• retrieved context is insufficient
• approval times out
• user changes context mid-task
• cost budget is exhausted
• generated UI fails validation
• agent loops or exceeds step limit

Recovery should be explicit:

Failure	Recovery
Invalid model output	Retry with repair prompt or fallback deterministic UI
Tool failure	Show partial result and retry action
Insufficient context	Ask user for missing input
Approval timeout	Pause workflow and resume later
Step limit exceeded	Stop, summarize progress, ask user to continue or narrow scope
Cost budget exceeded	Degrade to smaller model or ask for confirmation

Workflow graph design for frontend architects

Even if the backend team owns LangGraph, CrewAI, Strands, or another runtime, the frontend architect should review the workflow graph through user-state questions.

Example workflow:

capture_intent
  -> retrieve_context
  -> classify_risk
  -> draft_plan
  -> generate_review_ui
  -> wait_for_user_approval
  -> execute_tools
  -> reconcile_result
  -> complete

For each node, define:

Node question	Why it matters
Is this node user-visible?	Determines progress UI and loading copy
Can this node retry?	Determines idempotency and duplicate side-effect risk
Can this node be cancelled?	Determines cost and tool cleanup behavior
Can this node pause?	Determines workflow persistence and resume UX
What generated UI can it emit?	Determines registry and schema requirements
What data does it need?	Determines retrieval and permission boundaries
What failure can it produce?	Determines recovery UI

The frontend does not need to control the graph, but it must understand the graph enough to render trustworthy state.

Agent memory and frontend state

Do not confuse memory with UI state.

Concept	Belongs where	Example
Conversation memory	Agent runtime or memory store	User prefers concise summaries
Workflow state	Agent/backend database	Renewal plan is waiting for approval
Product state	Business backend	CRM opportunity was updated
View state	Frontend	The source panel is expanded
Draft state	Often shared	User edited generated email body

The riskiest state is draft state. If the agent regenerates content after the user edits it, the system needs merge rules. A simple policy works well:

• agent may freely update unedited generated drafts
• user-edited drafts become user-owned
• regeneration creates a new candidate, not an overwrite
• diffs are shown before replacing user-owned content
• committed product state is changed only through explicit action

Multi-agent orchestration pitfalls

Multi-agent designs often look impressive but add failure surfaces:

Pitfall	Symptom	Control
Role overlap	Agents repeat or contradict each other	Define agent responsibilities and arbitration rules
Hidden delegation	User cannot tell why task is slow	Expose summarized delegation progress
Permission mismatch	One agent sees data another should not	Carry user/tenant policy through delegation
Cost explosion	Agents call each other recursively	Step limits, budget limits, loop detection
Inconsistent evidence	Different agents cite conflicting sources	Centralize source ranking or require adjudication
Weak final synthesis	Final answer hides unresolved disagreement	Show confidence and unresolved issues

Use multi-agent architecture when specialization measurably improves outcome quality. Otherwise, a single explicit workflow graph is easier to test, debug, and explain.

Human interruption patterns

Agent frameworks often support interruptions. Frontend architecture should distinguish interruption types:

Interruption	UI pattern
Missing input	Clarification form with specific requested fields
Permission needed	Access request or disabled action with explanation
Risk approval	Approval panel with preview, risk, and audit note
Ambiguous plan	Choice between proposed paths
Tool conflict	Conflict resolution screen
Budget exceeded	Continue/degrade/cancel decision

Do not reuse one generic confirmation modal. The user decision is part of the workflow state and should capture enough context to be auditable.

Anti-patterns

• Treating the agent as a stateless endpoint when the task is long-running.
• Hiding all intermediate work, then surprising the user with final actions.
• Using multi-agent systems for simple classification, summarization, or form filling.
• Letting agents call tools without typed arguments and permission checks.
• Exposing raw reasoning instead of safe progress and evidence.
• Failing to make cancellation stop backend cost.

Verification checklist

• Every agentic workflow has a durable workflow id and state model.
• The frontend can resume or inspect in-progress workflows.
• Risky tools require human approval.
• Tool calls are typed, authorized, idempotent where needed, and audited.
• Step limits and cost limits exist.
• Progress events are user-meaningful and trace-correlated.

Exercises

1. Model a customer-support agent as a workflow graph with states and terminal outcomes.
2. Identify which steps must be deterministic and which may be model-driven.
3. Design the frontend progress UI for a three-minute agent task.
4. Write failure states for tool unavailable, missing context, and invalid generated UI.

Source lens

This chapter is synthesized from Firecrawl research on LangGraph as a controllable stateful orchestration framework, CrewAI's crew/flow framing for multi-agent work, Strands Agents material on model-driven agent SDKs, LangSmith/LangGraph generative UI React docs, assistant-ui's LangGraph GenUI runtime docs, and AG-UI concepts around streaming, human-in-the-loop, shared state, and frontend tool events.