React components for agent and chat interfaces

Honest AI is a set of React components you copy into your project. Each one renders only the state your application passes in, so your interface never shows progress your agent did not report.

Read the documentation Install a component

A conversation about Honest AI, built with its own components. The answers were written in advance. No model runs on this page.

What is Honest AI?

Honest AI

It is the interface an agent or chat product needs around its model. Here is one agent run built from its components. It waits for you at the recommendation, so choose an option to see the rest.

Why are export totals off by a cent?

Reading the export module (In progress)3 files

Sample run on a timer; no agent or model is running. It uses Chat Thread messages, Thinking State, and Recommendation Card, then Tool Chips and Code View once you accept.

Those are the pieces Honest AI covers: 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.

Honest AI is built on Honest UI and released under the MIT license. The Honest UI CLI copies each component’s source into your project, so you can change it directly.

Does it call a model for me?

Honest AI

No. 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, so a component never shows progress your application did not report.

In the run above, Thinking State and Tool Chips are given their status, steps, and calls like this:

agent-run.tsx

1<ThinkingState status={run.status} label={run.label} />
2<ToolChips
3  summary={run.summary}
4  calls={run.calls}
5  changes={run.changes}
6/>

The model, the transport, the state, and the failure handling stay in your application. The documentation lists what your application supplies.

Which components are there?

Honest AI

The components fall into four groups: conversation, agent activity, decisions, and results. Here is each group, with one of its components running on sample data.

Conversation covers the prompt, the thread, and the reply: Prompt Bar, Chat Thread, Message Scroller, Streaming Text, Markdown, Context Meter, Sidebar Nav, Search List. Markdown, for example, renders a reply's Markdown, including Markdown that is still arriving:

The export fix is ready. ~~Ship on Friday~~ Ship on Monday, after the backfill.

Round the total once
Add a test for three rows of 0.336
Backfill the affected invoices

Rows	Before	After
3 × 0.336	1.02	1.01

Totals already sent to customers are not changed by the backfill.

A sample reply, rendered from a Markdown string.

Agent activity covers what the agent is doing while it works: Thinking State, Loading State, Tool Chips, Task Rows, Agent Screen, Flowchart. Task Rows lists the tasks in a run with the status of each:

Round the total once1 fileCompleted
Run the export tests14 testsRunning
Update the changelogFailed
Write the summaryQueued

Sample tasks. No agent runs here; Retry moves the failed task to running.

Decisions covers the questions and proposals a person answers before the agent continues: Approval Card, Recommendation Card, Diff Table, Selection Actions, Fine-tune Card. Diff Table lets a person review the rows an agent proposes to add or remove:

Proposed changes to the invoices table

Change	Column	Type
	amount	numeric(12,2)
No change	currency	text
	amount_cents	bigint

1 addition, 1 removal selected

Sample rows. This table applies nothing; it shows the row ids your handler receives.

Results covers what the agent found or made: Context Cards, Code View, Artifact Panel, Records Table, Filter Table, Insight Cards. Context Cards shows the passages an agent retrieved, with their sources:

Retrieved context

Rounding rule118 characters
Invoice totals are rounded half up to two decimal places. Round once, on the final total, never on each row.
billing-notes.md
Export totals96 characters
exportTotal sums the rows of one invoice. Finance compares the result with the ledger each month.
export.ts

Sample passages.

Prose is a separate stylesheet for rendered Markdown or plain HTML. It works without React, Tailwind, or Honest UI, and it sets the text of these answers.

How do I install a component?

Honest AI

Use the Honest UI CLI. It copies the component into components/ai, adds the Honest UI components it imports under components/ui, and installs the packages they need.

Terminal

1npx honestui@latest init
2npx honestui@latest add https://ai.honestui.com/r/prompt-bar.json

You need Node.js 20.18.1 or later, React 19, and Tailwind CSS v4. The first command is only for a project that has no components.json yet. The installation guide covers connecting a component to your agent’s state.

How does an agent ask before it acts?

Honest AI

With Approval Card. You pass it the agent’s questions, and it hands the answers to your onSubmit handler. If the promise you return rejects, the card shows an error and keeps what the person chose.

Question 1 of 3

Which invoices should the export include?

Paid onlyPaid and open

Sample questions. This card sends nothing. After you answer, it shows the object your handler would receive.

The Approval Card page documents its props. For a single proposed action, use Recommendation Card. For rows an agent wants to add or remove, use Diff Table.

Can a model generate the interface itself?

Honest AI

Yes, with Generative UI. The model returns a text program in Honest AI Lang. Honest AI parses that program and renders it with the components you allow, so a reply can contain a chart, a form, or a set of tabs instead of only a paragraph.

The renderer interprets the registered language. It does not evaluate generated JavaScript. Your application still supplies the model endpoint, credentials, storage, and tool implementations.

Start with the Generative UI guide. Unlike this page, the Generative UI playground connects to a model, so you can see generated replies render.

Can I restyle and translate the components?

Honest AI

Yes. The components use Honest UI’s theme tokens and are built from Honest UI components, so a change to your theme or to one of those components carries through. The source is in your project, so you can also edit it.

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.