AI agent workspace

A React block (a whole screen) in Beamline's Blocks category.

Threads, a conversation with streamed reasoning, cited answers and a plan that waits for approval then runs step by step, and an artifacts panel with changes, sources and files; it renders the run you give it and calls back for every decision.

Use it for

An agent or copilot product where the model plans, asks before acting and produces artifacts (code, documents, data changes) people review.

Not for

A small help widget (conversation + message + prompt-bar alone).
Person-to-person chat (chat-thread).
A voice agent (voice-agent).

Anatomy

threads rail (new task, recent threads, the person) — from 768px of container; below that the header's Threads button opens the same list in a sheet from the start edge
thread header (threads button on narrow widths, title, search, artifacts button with the artifact count)
conversation (question with files; agent turn: reasoning, cited answer, plan, summary; follow-ups) or its empty state; on narrow widths the gutters tighten so the answer keeps most of the width
composer (glow ring while the agent works; Stop), as wide as the conversation's reading column
artifacts (changes, sources, files with counts): an inline column from 1152px of container, toggled from the header; below that the header button opens them in a sheet from the end edge. They open on the first tab that has content

States

empty (no run)
thinking
answering (streaming, log aria-busy)
awaiting approval
running plan
done
rejected
artifacts hidden
artifacts in a sheet (container under 1152px)
threads in a sheet (container under 768px)

Keyboard

Tab moves rail → thread header → conversation → composer → artifacts; the Threads and Artifacts sheets trap focus, close on Escape and return focus to their header button
plan: Approve / Edit plan / Reject are buttons
citation markers open their source on focus
Enter sends from the composer, Shift+Enter breaks a line

Motion

Reasoning folds when done; the answer streams in place; the conversation sticks to the bottom unless you scroll up; the composer's ring glows only while the agent works.

Props

Prop	Type	Default	Description
`run`	`AgentRun`	—	{ status, question, attachments?, trace?, answer?, sources?, plan?, summary?, changes?, followUps? }
`threads / thread / defaultThread / onThreadChange`	`{ id, title, meta? }[] / string`	—
`onSubmit / onStop / onNewTask`	`(message: PromptSubmission) => void \| Promise / () => void`	—
`onApprove / onReject / onEditPlan`	`() => void \| Promise / () => void`	—
`onAttachmentRemove`	`(id) => void`	—
`composer`	`Partial<PromptBarProps>`	—	sources, commands, models, placeholder for the composer.
`panel / defaultPanel / onPanelChange`	`boolean`	—
`user / agentName`	`{ name, avatar? } / string`	—
`classNames`	`AgentWorkspaceClassNames`	—
`style / ref`	`CSSProperties / Ref<HTMLDivElement>`	—
`onSearchThreads`	`() => void`	—	Open the application thread search; control is disabled when absent.

Built from

item
button
tooltip
conversation
message
attachment
reasoning
citations
plan
response
prompt-bar
glow
tabs
file-diff
empty-state

Dependencies

use-stick-to-bottom, streamdown, radix-ui, lucide-react, motion

Import

import { AgentWorkspace } from "@/blocks/agent-workspace/agent-workspace";

Get it

AI agent workspace is part of Beamline: 190 React components and screens your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 one payment (regular $200), no subscription, a year of updates, one licence for your whole team. Get Beamline · Connect your agent