Agent interfaces
Build AI product interfaces in React with visible task state, inspectable output, explicit approvals, and a clear boundary around tool execution.
Vlak provides React components for AI product interfaces, including conversations, structured results, activity, and approval controls. Use them to show what the system is doing and what a person can inspect or change. The interface components do not connect a model or execute tools on their own.
Start an AI conversation · Install Vlak
Show the task, not only the reply
A conversation needs more than a composer and message bubbles when work can continue outside the reply. Keep the current task, its status, and any required decision together. For multiple tasks, use a queue with a focused detail view. The person should be able to leave one task, inspect another, and return without losing a draft or the state of a pending approval.
The AI chat study provides conversations, local response templates, an inspector, and Markdown export. The Agents study explores queues and review. Both use sample or local behavior. Start with one of these interaction patterns, then connect your own provider through an adapter with explicit loading, completion, cancellation, and error states.
Separate proposed work from execution
The host application must enforce permissions and tool boundaries. A confirmation control makes a decision visible; it is not authorization by itself. Keep each stage inspectable:
- Proposed: describe the exact action, target, and relevant inputs before asking for approval.
- Awaiting review: keep approve and reject available, and invalidate approval if the action changes.
- Running: identify the action in progress and provide cancellation when the host supports it.
- Completed: report the result returned by the host, with a link or identifier where available.
- Failed or interrupted: preserve context and explain whether retry could repeat an external effect.
Keep output usable
People should be able to select, copy, inspect, and export useful output. Put source identity and update time beside retrieved records. Use a widget for structured content such as a schedule or a comparison, with the same loading, empty, and error behavior used elsewhere in the product.
Streaming text needs a stable reading position and a way to stop. Do not move keyboard focus when new content arrives. Announce meaningful state changes without reading every token aloud. Treat generated markup as untrusted content and choose rendering boundaries in the host application.
Vlak's agent documentation serves a different purpose: it helps a coding agent build with the library. It provides the component reference, tokens, registry, and MCP tools. That does not turn a product prototype into a connected assistant; the application still supplies its models, authentication, tools, and storage.
Working rules
- Keep a task, its run state, and the approval that affects it in the same context.
- Treat generated output as inspectable content. Preserve selection, copying, provenance, and failure states.
- Separate a request from confirmed execution. The host application owns models, tools, permissions, and persistence.
Components
- Assistant panel. Frames an assistant exchange with a user message, reply, suggestion, and input row.
- Confirmation. Collects approval or rejection in a surface with a subtle 1px outline and 4px corners, with async recording, error recovery, and 44px actions.
- Widget. A surface with a subtle 1px outline and 4px corners for React content and provider iframes, with attribution, data states, actions, and supporting context.
- Activity timeline. Lists timestamped events with actors and optional expandable details.
- Progress. Shows completion for a known process. 4px bar; the label carries the percentage.
- Textarea. Collects multiple lines of text. Resizes vertically only.
- Dialog. Focuses attention on a modal task. Title, body, and two equal actions.
Continue
- Widget patterns. Compose records, provider content, and embedded views.
- AI components. Inspect the components and their integration boundaries.
- Build with a coding agent. Connect your coding tool to the Vlak reference.
Interfaces
- Agent management. An agent workspace with a task queue, run activity, and approval controls.
- AI chat. A research notebook with separate conversations, local writing templates, and a response inspector.
Install Vlak or inspect the linked pages for React, CSS, registry, keyboard, and accessibility details.