Agents

Agent canvas

shadcn add @detent-pro/agent-canvas

Props 9

agents(AgentId | Agent)[]: The agents to offer, in order. Use the built-in `claude`, `chatgpt` and `grok`, or pass your own as `{ id, name, mark, placeholder }` to add Gemini, Perplexity or your own bot. One agent hides the switcher.; Default ['claude', 'chatgpt', 'grok']
agentstring: The `id` of the agent it opens in. Ignored unless it's in `agents`; defaults to the first.
productstring: Your product's name, shown as "Claude × Relay".; Default 'Relay'
productMarkReact.ReactNode: Your product's mark, drawn in white on black in the header. Card avatars come from `respond`.
promptstring: The request it plays on load. Switching agents replays the latest request, including one a person typed.; Default PROMPT
respond(request: string, agent: Agent) => Plan | Promise<Plan>: Turns a request into what happens: the chat `steps`, the canvas `title`, `subtitle` and `stat`, the `cards` that write themselves (title, body with **bold** and @mentions, chips), the `ask`, the `confirm` labels and the `reply`. It gets the chosen agent too, so it can route on `agent.id` to Claude, OpenAI, xAI or your own model, and it can be async. Mark a step `writes` to write the canvas during it and `counts` to roll the stat. Defaults to `relayPlan`, the Linear and Slack demo.; Default relayPlan
autoplayboolean: Play `prompt` on load. Set it to false to start empty and wait for someone to type.; Default true
onEnable(plan: Plan, request: string) => void: Called with the plan and the request when someone confirms.
onDraft(plan: Plan, request: string) => void: Called with the plan and the request when someone declines.

Usage

usage.tsx

<AgentCanvas />

Full example

A whole page, ready to paste.

page.tsx

"use client"

import { AgentCanvas, type Agent, type Plan } from "@/components/detent/components/agent-canvas/AgentCanvas"

const gemini: Agent = { id: "gemini", name: "Gemini", mark: <img src="/gemini.svg" alt="" width={16} height={16} />, placeholder: "Ask Gemini" }

async function respond(request: string, agent: Agent): Promise<Plan> {
  const res = await fetch("/api/plan", { method: "POST", body: JSON.stringify({ request, model: agent.id }) })
  const { channel } = (await res.json()) as { channel: string }
  return {
    title: "Weekly deploy digest",
    subtitle: `Every Monday at 9:00 in ${channel}`,
    stat: { value: 4, label: "last month" },
    steps: [
      { working: "Reading your deploys", done: "Found 48 deploys · last month" },
      { working: "Writing the digest", done: "Deploy digest · Mondays", writes: true },
      { working: "Checking last month", done: "Would have sent 4 times", counts: true },
    ],
    cards: [
      {
        eyebrow: channel,
        meta: "Mon 9:00",
        author: "Pulse",
        body: "**12 deploys**, 2 rollbacks and 1 incident last week. Biggest change by @maya.",
        chips: [{ label: "12 deploys", dot: "#30a46c" }, { label: "2 rollbacks", dot: "#e5484d" }],
      },
    ],
    footer: "Preview from last week",
    ask: "Send it every Monday?",
    confirm: { yes: "Schedule it", no: "Not now" },
    reply: { yes: "Scheduled. The first one goes out Monday.", no: "Saved for later." },
  }
}

export default function DeployDigest() {
  return (
    <AgentCanvas
      product="Pulse"
      agents={["claude", "chatgpt", gemini]}
      prompt="Send a weekly deploy digest to #eng every Monday morning"
      respond={respond}
      onEnable={(plan, request) => console.log("schedule", plan.title, request)}
    />
  )
}

Agent canvas is in Pro. So is everything else.

19 Pro components, 12 whole screens and 1 template. The source lands in your project, yours to change, with every update for life.

~~$99~~$79once

Get Pro

Full refund within 14 days, no questions.

More in Agents

All components