AI Agent Workspace Generator.

Not a chat window with extra panes: an arrangement where the conversation steers, the files testify, the preview verifies, and the task list keeps the plan honest — all of it wired to one run state so a failure lands everywhere at once. Give MeDo the regions and the states and the environment comes back assembled.

Watching the Work Is How You Steer the Work

An agent that works invisibly asks for blind trust, and almost nobody grants blind trust twice. The workspace exists to make a run supervisable, and each region earns its pane by answering one question a user actually has mid-run: the conversation says what it is doing and why, the file region says what it touched, the preview says whether the result actually works, the task list says where it stands in the plan, and tool cards say exactly what executed. None of it adds up unless the regions agree, which is why the real construction problem is not layout but the shared run state — the piece that lets one failure flip the status pill, expand the failed tool card, mark its task row, and drop the preview back to the last good build in the same instant. A user who can watch the work can steer it; a user who cannot is watching a slot machine.

4 modelli

Modelli di Agent Workspace che puoi generare

Ogni modello è un prompt reale, non uno screenshot. Copialo in qualsiasi editor IA, oppure eseguilo in MeDo e ottieni codice React + Tailwind.

MinimalSingle-Run Minimal

One Column, One Run

The smallest supervisable workspace: the run's conversation, its status, and its final result. For one-shot jobs where files and preview would add weight without adding evidence.

Create a single-run agent workspace with one centered column, 720px wide: a header row carrying the run title, a status pill — Queued, Running, Done, or Failed — and an elapsed timer. Under it, the conversation: the task message, streaming agent replies, and collapsed tool-call cards that expand to show what ran. No file tree and no preview; when the run reaches Done, a result card appears at the bottom with an outcome summary and up to three artifact links. On failure the pill turns red, the failed tool card expands itself, and a Retry run button appears in the header. The composer at the column's foot carries Stop while the run is live.

Prova in MeDo

BuilderDual-Pane Builder

Conversation Left, Live Preview Right

The default app-builder arrangement: steer from the left, watch the result take shape on the right, and read file changes as cards placed where they happened.

Create a two-pane agent workspace: a 380px conversation pane and a preview pane filling the rest. The conversation pane shows agent replies live, embeds compact diff cards when files change — file name, lines added and removed, expandable to the patch — and keeps a composer with a Stop button at its foot; the top bar holds the status pill and timer. The preview pane renders the app in an iframe that reloads only when the agent reports a healthy build, with a manual refresh and a device-width toggle. On failure, the pill goes red, the last diff card expands, and the preview pane shows a banner reading 'Last good build 14:02' rather than presenting a stale render as current.

Prova in MeDo

DevTerminal-Heavy

Narrow Rail, Terminal Widescreen

For runs that live in the shell: the conversation compresses to a rail and the terminal, with every command's output, takes the room it actually needs.

Create an agent workspace tuned for shell work: a 320px conversation rail on the left with streaming replies, tool cards, and a Stop-capable composer; the remaining width splits vertically — a terminal region on top showing every command the agent runs with live output, and a tabbed region below holding the file tree and a diff view with changed lines tinted. The top bar carries the status pill, elapsed timer, and an abort button that sends an interrupt first, then force-kills after five seconds, recording both attempts in the conversation. Tool cards link to their terminal output: clicking 'Ran npm test' scrolls the terminal to that command and flashes it.

Prova in MeDo

RepoFiles-First

Repo Center, Conversation as a Rail

When the artifact is the repo itself: the file tree and diffs dominate, the conversation narrows to a steering rail, and the plan maps onto what changed.

Create a files-first agent workspace: a persistent file tree on the left, 260px, where files the agent touches gain a colored dot and gather under a Changed group; a center diff view showing the selected file with old and new lines side by side; a 340px right rail holding the conversation, tool cards, and a composer with Stop. The top bar carries the status pill, the run timer, and a task strip: the agent's plan rendered as numbered chips that tick from Pending to Done, each clickable to reveal the tool calls and commits that satisfied it. When the run completes, a summary bar above the diff counts files changed, lines added, and lines removed.

Prova in MeDo

Come personalizzare il tuo Agent Workspace

One run state, many subscribers

Generate a single status — queued, running, streaming, done, failed — and make every region read it rather than infer its own. The workspace feels like one environment precisely when a failure flips the pill, the tool card, the task row, and the preview in the same tick.

Give the preview a version, not just a refresh button

A preview shows a build, so it needs an answer to which build — auto-reload on healthy, a last-good-build banner while a run is live or failed, and manual refresh for the impatient. Freshness policy is a data-contract decision, not a cosmetic one.

Collapse tool calls, open them on failure

Tool cards carry the audit trail, but a long run produces dozens — collapsed by default with name and duration, expanding on click, and expanding themselves the moment they fail. The user should be able to read the whole run at two zoom levels.

Keep the composer a steering control

The conversation region of a workspace is not a chat product: its composer steers the run — stop, correct, redirect — and stays compact. If it grows message features, the arrangement drifts toward a chat app wearing panes, and supervision quietly stops being the design goal.

Chi usa il componente Agent Workspace

AI app builder

Conversation on the left, the running app on the right, file diffs embedded where they happened — and the preview refreshing only on a healthy build, which is the trust moment of the whole product.

Internal automation console

Runs that touch records and send messages, supervised through tool-call audit: on failure the workspace must show what executed, what was skipped, and what the run never got to.

Developer agent tool

A terminal taking center stage with the conversation as a rail: command output streams live, diffs tint changed lines, and abort means an interrupt first and a recorded force-kill second.

Report and content generation

The plan matters more than the code: task rows tick through outline, draft, and sources while the right pane renders the growing document instead of an app preview.

Pattern di Agent Workspace per siti web diversi

Lo stesso componente agent workspace, calibrato sul tipo di sito su cui viene pubblicato.

01 / 04

AI App Builders

The canonical arrangement: conversation steers, preview verifies, diffs document. Keep preview refresh honest — the pane that shows a stale build as current once loses its audience for good.

Stili e varianti di Agent Workspace

Scegli la variante che si adatta al resto della pagina, poi generala.

01 / 04

Light Console

White panes, hairline dividers, and color spent only on run state: amber running, red failed, green done. The calm choice for people supervising long runs all day.

Agent Workspace in React, Next.js, Vue e Svelte

React, Next.js, Vue 3, SvelteKit, Astro o HTML puro: lo stesso agent workspace, sei modi per integrarlo.

01 / 03

React Region Scaffold

The scaffold is the contract: one status enum lifted to the workspace level, three panes reading it, and exactly one callback — the conversation drives the run, everything else follows it.

src/components/AgentWorkspace.tsx

type RunStatus = 'queued' | 'running' | 'streaming' | 'done' | 'failed'

export function AgentWorkspace({ run }: { run: Run }) {
  const [status, setStatus] = useState<RunStatus>('queued')

  return (
    <div className='grid h-screen grid-rows-[auto_1fr]'>
      <TopBar title={run.title} status={status} />
      <div className='grid grid-cols-[340px_1fr_1fr] overflow-hidden'>
        <ConversationPane runId={run.id} onStatus={setStatus} />
        <EvidencePane runId={run.id} status={status} />
        <PreviewPane runId={run.id} status={status} />
      </div>
    </div>
  )
}

Come aggiungere il tuo Agent Workspace a un progetto

Quattro passaggi, dalla scelta di un modello di agent workspace alla messa in produzione.

01~15min

Name the Supervision Questions

Write down what a user must be able to answer mid-run: what is it doing now, what did it change, does the result work, what ran, where is it in the plan. Each question earns at most one region — a question with no region is a trust gap, and a region with no question is clutter.

02~10min

Define the Run States Before the Layout

Fix the enum — queued, running, streaming, done, failed — and decide what each region shows in each state before generating anything. The arrangement is the easy part; the agreement between panes is the actual product.

03~2min

Generate the Arrangement in One Pass

Hand MeDo the region map and the state list in the same prompt so the panes are wired to one run state from the first render. Workspaces generated region by region drift into five widgets that disagree; the shared status is what makes them one environment.

04~10min

Break a Run on Purpose

Force a tool call to fail mid-run and watch every pane: the pill flips red, the tool card expands, its task row marks failed, and the preview falls back to the last good build. Supervisory trust is built in exactly one of these moments.

Domande comuni su Agent Workspace

Isn't an agent workspace just a chat panel with more panes?

The chat panel is one region of a workspace and can ship alone; the workspace is the arrangement plus the contract that keeps the regions from disagreeing. The tell is state: in a bare chat panel, messages are the only truth. In a workspace, one run state — queued, running, streaming, done, failed — fans out to the status pill, the tool cards, the task rows, the file highlights, and the preview refresh, so a failure lands everywhere at once. Remove the panes and you have a chat panel; remove the shared run state and you have five widgets that contradict each other, which is worse than either.

How is this different from a CMS editor workspace?

Both are multi-region work environments, and the difference is who does the work. In a CMS editor workspace the human edits and the regions guarantee safety: dirty state, autosave, publish undo. In an agent workspace an agent does the work and the regions guarantee supervisability: what it is doing, what it touched, whether the result runs. That flips the design pressures — save models and unsaved-change guards matter far less than run status, tool audit, and preview freshness. Reusing the editing arrangement for an agent run produces a workspace optimized for the wrong actor.

Which regions does a first version actually need?

Conversation and a result surface — that is the honest minimum, and it covers short runs whose outcome is a single artifact. Add the file region when runs touch more files than a user will hold in their head, the task list when plans grow past about three steps, and the preview when the output is something that runs. Each region should pay for its pane by answering a supervision question; a workspace that opens with all six regions teaches none of them.

How should the preview relate to the run?

The preview shows a build, and a build has a version — so it must never present a stale render as current. Reload automatically when the run reports healthy, show a last-good-build banner while a run is in flight or failed, and keep manual refresh for the impatient. The moment users catch the preview lying once, they stop glancing at it and start rebuilding by hand, and the pane has lost its job.

Do all regions really need to update together?

Yes, and it is the technical core of this page: subscribe every region to one run state instead of letting each infer status from its own events. When the conversation says done while a task row still shows running, the user becomes the integration layer, reconciling contradictions the interface should have reconciled. The data contract is small — run id, status, tool events, changed files, result reference — and holding all panes to it is what makes six regions feel like one environment.

Does generating a workspace lock me into a whole agent product?

No — the page deliberately stops at one workspace screen: regions, run states, and the contract between them. Queueing across runs, multi-agent orchestration, permissions, and billing are product territory, and the workspace connects to whatever runtime you already have through the run state. Build the supervision surface first, point it at a scripted fake run if you have to, and wire the real agent in behind a contract that already works.

Crea il tuo agent workspace adesso.

Prova qualsiasi prompt — gratis, nessuna registrazione richiesta.

Inizia a costruire gratis Vedi i prezzi

Task Input

The front door of every agent product: one card that carries the whole job — instruction, attachments, model and mode, context the user can actually see — and a submit that turns into a stop button the moment work begins. Tell MeDo what your agents get asked to do and the entry unit comes back with its state machine built.

Componenti correlati

Chat Panel

Your product already has the page where the answer is needed. MeDo generates the panel that lives there: a docked surface with a streaming message log, an attachment-aware composer, citations that trace back to sources, tool chips that tell the truth, and a recovery path for every failed request — all scoped to whatever the host page has open.

Componenti correlati

Conversation

Under every good chat screen sits a quiet set of decisions: who may speak, what counts as an event, how a streaming reply appends, and what happens when a user rewrites a question. MeDo generates the whole organizing pattern from those decisions — a typed message model, ordering and grouping rules, streaming semantics, branching, and compaction for threads that outgrow their welcome.

Componenti correlati