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

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.

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.

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.

Install Vlak or inspect the linked pages for React, CSS, registry, keyboard, and accessibility details.