Kanban Board

When to useCopy Anchor Link

• The user wants to see work items by stage: a sprint board, a bug triage, a hiring or sales pipeline.
• The user wants to reorganize items between stages, or the agent is suggesting moves for them to review.

When not to useCopy Anchor Link

• There are only a few items or a single stage. Use a list.
• The user needs to compare many fields per item. Use a Data Table.
• The agent can't read the items from the tracker. Fetch them first; never invent cards.
• The change is to a field other than the stage. Use a Change Preview.

How the agent should use itCopy Anchor Link

• Pass columns and cards exactly as the tracker returns them, in order. A card belongs to the column named by its columnId.
• Put recommended moves in proposals, each with a one-line reason. They show already applied and marked "Suggested · from Inbox", with Undo; the reason is read to screen readers, not shown on the card. Never pre-move a card by changing its columnId.
• Set editable: false when the user only asked to look. Without proposals, the board is display-only.
• Apply nothing until the result arrives, then apply exactly the returned moves.

Moving cardsCopy Anchor Link

Nothing is written while the user rearranges. Every move is collected and shown on the card ("Moved from In progress", with Undo); the footer counts them ("3 changes"), and the agent receives the moves only when the user applies. Reset restores the starting arrangement and Request changes (the message icon) opens a feedback box; with proposals, Reset becomes an icon button next to Dismiss.

Each column is a filled panel with its own header block (the title, then the card count beside it, and "Over limit" at the right); cards sit in the panel on a lighter fill. Each card shows its title over one quiet row: priority (an Urgent red or High orange badge; medium and low are a small muted signal), subtitle, due date and the assignee's initials. Columns with a limit show "3 / 4" and say "Over limit" when they hold more cards. Due dates show "Overdue" once they're past; pass now to fix the date that's compared against (it defaults to the viewer's clock). A column marked done shows its cards faded with a filled check. When the columns are wider than the card, previous and next arrows appear beside the title (with edge fades on the board) and scroll one column at a time.

InstallationCopy Anchor Link

npx shadcn@latest add https://your-site.com/r/kanban-board.json

UsageCopy Anchor Link

import { tool } from "ai"
import { kanbanBoardTool } from "@/components/genui/kanban-board.schema"

const tools = {
  // No execute(): the call is completed by the user's decision in the UI.
  [kanbanBoardTool.name]: tool({
    description: kanbanBoardTool.description,
    inputSchema: kanbanBoardTool.inputSchema,
  }),
}

<KanbanBoard
  {...part.input}
  status={part.state === "input-streaming" ? "streaming" : undefined}
  result={part.state === "output-available" ? part.output : undefined}
  onResult={(result) =>
    addToolResult({ tool: "show_board", toolCallId: part.toolCallId, output: result })
  }
/>

The agent receives one of:

{ action: "apply", moves: [{ cardId: "eng-142", fromColumnId: "doing", toColumnId: "done", index: 0 }] }
{ action: "revise", feedback: "Keep the payment bugs in Now" }
{ action: "dismiss" }

moves is the shortest list that turns the original board into the user's: accepted suggestions are included, and a card moved away and back again is not. Each index is the card's final 0-based position in its target column. On revise or dismiss, apply nothing.

A read-only board (editable: false, no proposals) sends nothing back, so give that tool call an execute that returns immediately.

With LangGraphCopy Anchor Link

Push it from a graph node with ui.push({ name: "show_board", props: { toolCallId, ...args } }, { message }), and render the thread's UI messages with the Renderer.

Restoring from historyCopy Anchor Link

Pass the stored result back as result. The board restores the final arrangement read-only, with "Applied" (or the requested changes, or "Dismissed") in the footer, and never calls onResult again.

<KanbanBoard {...part.input} result={part.state === "output-available" ? part.output : undefined} />

SchemaCopy Anchor Link

KanbanCard

Host props: status (streaming, ready, submitting, applied, revised, dismissed), onResult, result, now and className.

SourceCopy Anchor Link