{"slug":"create-agent","category":"agents","job":"start","added":"2026-09-15T08:55Z","title":"Create Agent","description":"A two-step wizard card for naming an agent, picking its icon, and selecting which event sources activate it.","url":"https://ai-patterns.app/patterns/agents/create-agent","markdown":"https://ai-patterns.app/patterns/agents/create-agent.md","json":"https://ai-patterns.app/api/patterns/agents/create-agent","seenIn":[{"team":"Notion","source":"https://www.notion.com/help/custom-agents"}],"spec":"# Create Agent\n\n## Summary\nA 2-step wizard card for creating a named, icon-identified agent and selecting which external event sources activate it. Step 1 captures identity (name and icon); Step 2 captures trigger sources. On completion it emits a typed payload that maps directly onto the Agent Triggers panel.\n\n## When to use\n- First-time agent creation where no agent exists yet.\n- Onboarding flows that walk users through setting up their first automation.\n- An agent catalog screen with an \"Add agent\" entry point that opens an inline or sheet-level wizard.\n\n## When not to use\n- Editing an existing agent's trigger sources — use the Agent Triggers pattern directly, which has per-trigger toggles and a \"Finish setup\" inline action.\n- When only one trigger source is possible. Presenting a multi-select of one option adds unnecessary friction; skip to a single confirmation step instead.\n- When agent creation is complex enough to require a full-page form (multiple steps beyond identity and triggers, required integrations, permissions review, etc.).\n\n## Anatomy\n1. **Header preview row** — always visible across both steps. Shows the currently selected icon in a rounded avatar, the live agent name (or \"New agent\" placeholder), and two step-progress dots.\n2. **Step 1 — Identity** — a title/subtitle label pair, a text input for the agent name, a row of five icon-picker buttons (Bot, Sparkles, Zap, Brain, Rocket), and a full-width \"Choose triggers →\" CTA.\n3. **Step 2 — Triggers** — a title/subtitle label pair, a `\n\n
\n
\n {AGENT_ICONS.map(({ id, icon: Icon, label }) => (\n setIconId(id)}\n className={cn(\n \"flex size-8 items-center justify-center rounded-lg transition-colors\",\n iconId === id\n ? \"bg-foreground text-background\"\n : \"bg-muted text-muted-foreground hover:text-foreground\"\n )}\n >\n \n \n ))}\n setShowMoreIcons((v) => !v)}\n className={cn(\n \"flex size-8 items-center justify-center rounded-lg transition-colors\",\n showMoreIcons\n ? \"bg-muted text-foreground\"\n : \"bg-muted text-muted-foreground hover:text-foreground\"\n )}\n >\n \n \n
\n\n \n {showMoreIcons && (\n \n
\n {EXTRA_AGENT_ICONS.map(({ id, icon: Icon, label }) => (\n { setIconId(id); setShowMoreIcons(false); }}\n className={cn(\n \"flex size-8 items-center justify-center rounded-lg transition-colors\",\n iconId === id\n ? \"bg-foreground text-background\"\n : \"bg-muted text-muted-foreground hover:text-foreground\"\n )}\n >\n \n \n ))}\n
\n \n )}\n \n
\n\n \n Choose triggers\n \n \n\n onCreateAgent?.(buildPayload())}\n className=\"mt-2 w-full text-center text-xs text-muted-foreground transition-colors hover:text-foreground\"\n >\n Skip triggers\n \n \n ) : (\n \n

Choose triggers

\n

\n Select the sources that activate this agent.\n

\n\n
    \n {TRIGGER_SOURCES.map(({ id, label, icon: Icon, description, fields }) => {\n const isSelected = selectedSources.includes(id);\n const config = triggerConfigs[id] ?? {};\n\n return (\n
  • \n {/* Toggle row */}\n toggleSource(id)}\n className=\"flex w-full items-center gap-3 px-3 py-2.5 text-left\"\n >\n \n \n \n \n {label}\n {description}\n \n \n {isSelected && }\n \n \n\n {/* Expanded config */}\n \n {isSelected && (\n \n
    \n {fields.map((field) => (\n
    \n \n {field.type === \"text\" ? (\n setTriggerField(id, field.id, e.target.value)}\n placeholder={field.placeholder}\n className=\"w-full rounded-md border bg-background px-2.5 py-1.5 text-xs outline-none ring-ring placeholder:text-muted-foreground/40 focus-visible:ring-2\"\n />\n ) : (\n setTriggerField(id, field.id, e.target.value)}\n className=\"w-full rounded-md border bg-background px-2.5 py-1.5 text-xs outline-none ring-ring focus-visible:ring-2\"\n >\n {field.options?.map((opt) => (\n \n ))}\n \n )}\n
    \n ))}\n
    \n \n )}\n     \n
    • \n );\n })}\n
\n\n {/* Custom triggers */}\n \n {customTriggers.map((ct) => (\n \n
\n
\n \n \n \n \n Custom trigger\n \n removeCustomTrigger(ct.id)}\n className=\"flex size-5 items-center justify-center rounded text-muted-foreground/50 transition-colors hover:text-foreground\"\n >\n \n \n
\n
\n
\n \n updateCustomTrigger(ct.id, \"name\", e.target.value)}\n placeholder=\"e.g. Webhook received\"\n className=\"w-full rounded-md border bg-background px-2.5 py-1.5 text-xs outline-none ring-ring placeholder:text-muted-foreground/40 focus-visible:ring-2\"\n />\n
\n
\n \n updateCustomTrigger(ct.id, \"event\", e.target.value)}\n placeholder=\"e.g. POST /webhooks/my-agent\"\n className=\"w-full rounded-md border bg-background px-2.5 py-1.5 text-xs outline-none ring-ring placeholder:text-muted-foreground/40 focus-visible:ring-2\"\n />\n
\n
\n
\n \n ))}\n \n\n \n \n Add custom trigger\n \n\n
\n \n Back\n \n onCreateAgent?.(buildPayload())}\n className=\"flex-1 rounded-lg bg-foreground px-4 py-2 text-sm font-medium text-background transition-opacity hover:opacity-90\"\n >\n Create agent\n \n
\n \n )}\n \n \n \n );\n}\n","dependencies":["lucide-react","motion"],"localImports":["@/lib/utils"]}