Skip to documentation content
|

Honest AI

Copy components for prompts, agent traces, tool calls, and approvals into your project.

Honest AI is a set of interface pieces an agent or chat product needs around its model: a field for the prompt, a trace of what the agent is doing, a record of the tools it called, and a way to ask the person a question before it acts.

Each component renders the state you pass in. None of them calls a model, streams a reply, or runs a tool. Your application does that work and passes the result as props. Because of that, a component never shows progress your application did not report.

For interfaces generated by a model, open Generative UI. It adds an Honest AI Lang parser and streaming renderer, component libraries backed by Honest components, and a chat state and transport layer.

Honest AI is built on Honest UI. The Honest UI CLI copies each component into your project under components/ai, along with the Honest UI components it uses, so you can change the source directly.

Available components

Conversation

ComponentUse it for
Prompt BarCollecting a prompt, with optional @ sources, / commands, attachments, a model menu, and a Stop button
Chat ThreadLaying out a scrolling conversation with the composer under it, and showing a message's files, editor, and versions
Message ScrollerFollowing streamed output and revisiting messages with a preview navigation rail
Streaming TextRendering a reply as it arrives, then its copy, retry, and feedback actions, sources, and follow-up prompts
MarkdownRendering a reply's Markdown, including Markdown that is still arriving
Context MeterShowing how full the model's context window is
Sidebar NavNavigating destinations and past conversations
Search ListFiltering a short list, such as saved prompts

Agent activity

ComponentUse it for
Thinking StateShowing that the agent is working, with its steps, reasoning, searches, and sources behind a disclosure
Loading StateShowing that long work is in progress, with the time elapsed
Tool ChipsListing the tool calls in a run, what each returned, and the files the run changed
Task RowsListing the tasks in a run with the status of each
Agent ScreenShowing what an agent that drives a browser or desktop sees
FlowchartLaying out a workflow as steps joined by connectors

Decisions

ComponentUse it for
Approval CardAsking the person one or more questions before the agent continues
Recommendation CardProposing one action with its confidence, and the alternatives
Diff TableReviewing the rows an agent proposes to add or remove
Selection ActionsOffering AI edits for selected text, then keeping or discarding the result
Fine-tune CardAdjusting a result with a compact panel of controls

Results

ComponentUse it for
Context CardsShowing the passages an agent retrieved, with their sources
Code ViewShowing a file's code or a diff of it
Artifact PanelGiving a file or document an agent made a surface beside the conversation
Records TableShowing records with columns an agent fills in cell by cell
Filter TableFiltering a table's rows with counted chips
Insight CardsShowing a set of findings one at a time

Styles

StylesheetUse it for
ProseStyling rendered Markdown or plain HTML with one class, in any project

What your application supplies
  • The model and the transport. Call your model from a route or server action and stream the result however your stack does it.
  • State. Map your agent's events onto props: a status for Thinking State, an array of calls for Tool Chips, a list of questions for Approval Card, the text so far for Streaming Text.
  • Words. Each component takes a labels prop for every string it writes, including the names read by screen readers. Replace the English defaults when you translate.
  • Failure handling. Tell the component when something failed. Components that show progress have an error status. Components that send a decision, such as Approval Card and Diff Table, show an error when the promise you return rejects, and keep what the person chose.

Reading the previews

The previews on these pages have no model behind them. Where a preview moves, a timer is standing in for an agent, and the text under the preview says so. Where a preview has a result, it shows the object your handler would receive.

Theming

The components use Honest UI's theme tokens, and they are built from Honest UI components: Button, Collapsible, Popover, Menu, Dialog, Table, Command, Select, and the form controls. A change to your theme or to one of those components carries through.