# AI agent workspace

A React block (a whole screen) in [Beamline](https://beamline.io/)'s [Blocks](https://beamline.io/components/blocks) category. Live demo: https://beamline.io/components/agent-workspace

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](https://beamline.io/components/prompt-bar) alone).
- Person-to-person chat ([chat-thread](https://beamline.io/components/chat-thread)).
- A voice agent ([voice-agent](https://beamline.io/components/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](https://beamline.io/components/prompt-bar)
- glow
- tabs
- [file-diff](https://beamline.io/components/file-diff)
- [empty-state](https://beamline.io/components/empty-state)

## Dependencies

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

## Import

```tsx
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](https://beamline.io/checkout?pack=complete) · [Connect your agent](https://beamline.io/connect)

## More in Blocks

- [Analytics dashboard](https://beamline.io/components/analytics-dashboard): A SaaS overview in the app shell, fed by your metrics hook: range and segment filters drive KPIs, new and expansion revenue, channels, plan mix, uptime…
- [Auth page](https://beamline.io/components/auth): The whole sign-in / sign-up route: product mark, a quiet dotted field with a light that follows the mouse, an optional notice, the SignIn and SignupForm…
- [Changelog feed](https://beamline.io/components/changelog-feed): An in-app What's new page: release notes grouped by month with tags, versions, pictures and details, a tag filter with counts, entries since your last…
- [CRM pipeline](https://beamline.io/components/crm): A pipeline screen: KPIs and stage mix derived from a virtualised deals grid with inline edit, bulk moves and delete with undo; a row opens the deal in a…
- [Empty states](https://beamline.io/components/empty-states): The five empty moments every product has, written and wired: first use with a first step, no results with the filters to clear, an error with retry and a…
- [Page header](https://beamline.io/components/page-header): The top of a record or project page: breadcrumb, title with status, description and meta, a primary action with secondary actions that fold into a More…
- [Plan comparison](https://beamline.io/components/plan-comparison): Plans side by side against every feature: prices that roll between monthly and yearly, the current and recommended plan marked, a header that stays in…
- [Settings](https://beamline.io/components/settings): Profile and workspace settings with one draft and real save handler. Personal mode omits workspace data; optional profile fields share validation…
- [Sign in](https://beamline.io/components/sign-in): The sign-in card: email and password, a one-time code or a magic link, passkeys and single sign-on, with validation, progress, errors and a signed-in…
- [Sign up form](https://beamline.io/components/signup-form): The account creation card: single sign-on, name, work email and a password with strength and Caps Lock hints, terms consent, inline validation, your…
- [Step form](https://beamline.io/components/step-form): The finished frame for any multi-step form you compose — onboarding, intake brief, questionnaire, booking, application: a wide card with progress, the…
- [Trading terminal](https://beamline.io/components/trading-terminal): A perpetuals terminal on your feed and your account: ticker tape, market header with funding, candles, book / trades / depth, order ticket, account…
- [Voice agent](https://beamline.io/components/voice-agent): A voice agent in three layouts on one session: a support panel that mixes typing and talking, a call screen with the agent's orb and one call button, and…