Agent Workflow Planner
A guided launch workflow surface mixing checkpoints, playbooks, and handoffs so agents and humans stay aligned.
Features
- Structured Steps: Styled checkpoint list clarifies status, owners, and ETAs
- Playbook Drawer: Expandable templates show detailed task sequences with handoffs
- Action Queue: Distinguish agent vs human items for immediate follow-up
- Chat Ready: Compact layout fits inside messages without horizontal scroll
Examples
Launch Template
Launch readiness workflow
Checkpoints, playbooks, and next steps orchestrated between agents and humans.
Checkpoints
Scope requirements
Owner · Agent Meridian
Validated against sales requests
Design handoff
Owner · Agent Relay
Upload updated figma annotations
Ops enablement
Owner · Agent Orbit
Prep Notion page + Loom walkthrough
Playbooks
Steps
- Provision API keys
- Sync policies
- Validate prompt stack
Handoff: Human QA review
Next actions
Upload annotated design doc
Agent Relay awaiting updated callouts
Approve pricing adjustments
Agent Ledger prepared 3 tiered options
Generate onboarding email
Agent Author queued copy draft for review
Customer Health Sprint
Customer health rescue workflow
Checkpoints, playbooks, and next steps orchestrated between agents and humans.
Checkpoints
Map risk signals
Owner · Agent Radar
Pulling churn risk cohorts
Prep outreach sequences
Owner · Agent Story
Draft sequences for top 50 accounts
Enable playbooks
Owner · Agent Relay
Playbooks
Steps
- Cluster signals
- Recommend offers
- Sync outreach
Handoff: Human CSM review
Next actions
Approve outreach copy
Agent Story awaiting legal go-ahead
Generate offer matrix
Agent Ledger building pricing flow
Chat Embed
Workflow Coaching Chat
Planner surface embedded inside an agent conversation.
Here’s the current plan. I’ll flag when handoffs need your signoff.
Launch readiness workflow
Checkpoints, playbooks, and next steps orchestrated between agents and humans.
Checkpoints
Scope requirements
Owner · Agent Meridian
Validated against sales requests
Design handoff
Owner · Agent Relay
Upload updated figma annotations
Ops enablement
Owner · Agent Orbit
Prep Notion page + Loom walkthrough
Playbooks
Steps
- Provision API keys
- Sync policies
- Validate prompt stack
Handoff: Human QA review
Next actions
Upload annotated design doc
Agent Relay awaiting updated callouts
Approve pricing adjustments
Agent Ledger prepared 3 tiered options
Generate onboarding email
Agent Author queued copy draft for review
Installation
npx shadcn add "https://agents-ui-kit.com/c/agent-workflow-planner.json"API Reference
AgentWorkflowPlanner
| Prop | Type | Default | Description |
|---|---|---|---|
| programName | string | "Launch readiness" | Header title |
| timeframe | string | "Week of March 17" | Subtitle text |
| checkpoints | WorkflowCheckpoint[] | Sample checkpoints | Step list data |
| playbooks | WorkflowPlaybook[] | Sample playbooks | Expandable playbook cards |
| nextActions | ActionItem[] | Sample actions | Queue of pending tasks |
| onReplan | () => void | - | Triggered by “Re-plan the week” button |
| onAcknowledge | (item: ActionItem) => void | - | Invoked when marking action complete |
| className | string | - | Tailwind overrides |
Types
interface WorkflowCheckpoint {
id: string
title: string
owner: string
eta: string
status: "upcoming" | "active" | "done"
notes?: string
}
interface WorkflowPlaybook {
label: string
description: string
tasks: string[]
handoff?: string
}
interface ActionItem {
id: string
label: string
detail: string
type: "agent" | "human"
}
Design Notes
max-w-4xlconstraint keeps the layout tight across docs and embeds- Step badges reuse blue/emerald palette from other agent components
- Expand behavior is stored locally but controlled via props for integration