DOM Studio

DOM Studio

AI Components & UI

Components & patterns

Interfaces for working with AI. Bring conversations, voice, context, and review into the product people already use.

Start here

Build the interaction around the task

Designing AI interfaces

From prompt to a useful result

Choose the right surface, show what is happening, and let people stop, review, correct, and continue. A practical guide to the states around an AI response.

Building with AI

Give your agent a shared vocabulary

Use DOM Studio components, canonical examples, and semantic tokens. Keep generated interfaces readable and, when useful, editable through Studio specs.

Conversations, voice & camera

AI components

Compose a complete agent workspace or use the parts independently. These components provide the interface; your application connects the model, tools, data, and media transport.

Agent chat shell

DomAgentChatShell

A three-pane AI chat application shell with a resizable conversation sidebar, scroll-contained conversation window, closable context aside, streaming tool calls, and audio/text handoff controls.

Agent conversation

DomAgentConversation

A scroll-contained AI conversation surface with a fixed header, streaming messages, reasoning summaries, audio/text mode switching, tool-call rendering, and a composer footer.

Agent conversation list

DomAgentConversationList

A reusable AI conversation navigation list with search, agent labels, unread counts, status pills, and active-thread selection.

Audio controls

DomAudioControls

Click to talk becomes a compact microphone control: stop, live waveform, mute, and input selection. Ready for voice AI, calls, and collaboration.

Audio input

DomAudioInput

Microphone setup with device selection, a live input meter, mute, and explicit start/stop. Emits a local MediaStream for your meeting or AI application.

Audio visualizer

DomAudioVisualizer

A live waveform of input levels from a MediaStream. Shows real audio activity without recording, playing, or transmitting the stream.

Camera input

DomCameraInput

Select a webcam and check a private local preview before joining a call. Emits a video-only MediaStream and releases the camera when stopped.

Shared building blocks

Compose the rest of the workflow

Message composer

Compose a prompt with attachments, context chips, and supporting actions.

Text diff

Show the original and proposed text together before accepting a change.

Document editor

Keep AI suggestions beside the document, with review and editing in context.

Examples

See the pieces working together

Agent workspace

Conversation history, streamed responses, and custom tool cards in a working demo.

Assistant chat

A complete chat block with a composer, support context, and tool results.

AI prompt lab

A prompt workspace example with variables, runs, and output inspection.

Chat and prompt examples use demo data. Media controls capture local device input when started; recording, transcription, and AI responses need an application integration.