AI Components for React.

The box people type into. Grows with the text, sends on Enter, and turns into a stop button while a reply streams.

A composer where typing / opens a filterable list of commands, and the pick becomes a chip in front of the message.

Type @ to pull a file, person or doc into the message as an inline pill, grouped by kind.

Lets people choose which model answers and how hard it thinks: an effort slider with a model list, a searchable list grouped by provider with a separate effort menu, a detailed list, or a quick three-way switch.

Ready-made prompts for an empty chat or follow-up questions under an answer.

Shows how much of the context window a conversation has used, and what is taking up the space.

Files on their way into a chat: a tray above the input with progress and retry, a drop zone that checks what it accepts, a grid of images to reorder, files weighed against the context limit, and how they look once sent.

A prompt box for image generation. Add reference images and say what each is for, pick shape, style and count from small menus, list what to leave out, and have the prompt rewritten in more detail.

Click a spot on an image or a page to pin a question to it, so the model answers about that exact place.

A single chat message from the person or the assistant, in three layouts.

The row under an assistant reply: copy, regenerate, thumbs up or down with a short feedback form, and share.

Steps between alternative versions of a reply, like 2 / 3, with a crossfade.

Text arriving as it's written: words fading in, markdown that forms cleanly mid-stream, a soft-focus edge, a caret with stop and skip controls, and a table filling row by row.

Turns a sent message back into an editor so people can fix it and resend.

What to show in place of a reply that failed, hit a usage limit or was stopped partway.

A long answer laid out as a report: sections with a contents list, figures and numbered sources, with a short version that opens into the full one.

A status line that shows the model is working, like “Thinking” or “Searching the web”.

Shows the model's reasoning as it streams, then folds it away behind a short “Thought for 12s” line.

Thinking laid out as steps: a status list, a one-line summary that opens up, a research trail of searches and pages read, options weighed and ruled out, and steps woven into the answer as it writes.

Small loading indicators for when a reply hasn't started yet, each with an optional label.

Markers inside an answer that show where a claim came from: numbers, superscripts, a site chip, the quoted passage itself, or notes in the margin of a long report.

The full set of sources behind an answer: behind one button, as cards or a scrolling row, as numbered footnotes, in a side panel, or as the log of what a research run read and used.

Links shown with their content: a card with a loading skeleton, a hover card on a link in a reply, a pasted link in the composer, and rich embeds for videos, repos and posts.

Opens a cited source beside the answer with the quoted passage highlighted, and steps between every place the answer used it.

The files and connected apps a project's answers can draw on, and a quick way to narrow them for one question.

What a new chat shows before the first message: a greeting, a centred prompt, a project's home with its files and recent chats, a gallery of task templates, a return screen with unfinished work, an agent's own landing page, and a blank image studio.

The message area of a chat: one that follows new text down, one with edited prompts that branch, two models answering side by side, a side thread for a follow-up, and an agent transcript with tool calls folded in.

A column of ticks beside a long chat, one per prompt. Hover one to preview that turn, click to jump to it, and bookmark the ones you'll want again.

Where past chats live: a dated sidebar, chats filed into projects, a search palette that matches inside messages, a full page for managing chats in bulk, and a slim rail that opens on hover.

A round button in the corner of a page that opens a small chat panel, for help or support widgets.

The bar above a chat: title and model with a share and options menu, a project breadcrumb with who can see it, a status bar for an agent working on a task, and a header that tucks away as you read.

Several chats open at once as tabs, with the ones still running marked, so you can switch without losing your place.

A resizable panel docked beside or under the chat for files, previews and sources, which collapses out of the way.

Shows a tool the agent called, with its arguments, status and result. Use it inside a reply wherever the agent acts.

The query the agent searched for, a loading state while it runs, then the results with their sites.

A shell command the agent ran, as one line in its reply: the last few lines tail underneath while it runs, then the result, with the full output when opened.

A file the agent changed, as one line in the reply with its path and lines added and removed, and a short diff that opens in full.

Shows what the agent did in a browser, the page's responses, and the outcome inside its reply.

Numbered steps the agent proposes before it starts, each with details, and buttons to approve or edit.

The agent’s checklist, ticked off as it works, with a count of what’s done.

A vertical log of an agent run with start times, durations and nested sub-steps.

The subagents a parent agent started, what each one is doing right now, and what it handed back. Six layouts, from a line in the reply to a run inspector.

Asks the person before the agent runs a command or tool, with deny, allow once and always allow.

A multiple-choice question from the agent. Pick with number or arrow keys, or type your own answer.

A divider between messages that marks a saved point and lets you roll files back to it.

Everything agents are waiting on you for, in one queue: what they want to do, why, and what happens if you say yes.

A form the agent builds mid-conversation to collect exactly what it still needs, instead of asking one question at a time.

Shows what the agent is about to do with every value editable, so you can fix one detail and approve instead of starting over.

The agent proposes when a task should run, in plain words, with the next few runs shown before you confirm.

Progress for a long research job: the current phase, sources found, elapsed time and what it’s reading.

A tray of background jobs that opens from a status-bar button, with progress, open and cancel for each.

When a run fails partway, shows what finished, what broke and why, and lets you retry from that step, skip it, or change the input.

Runs from every agent in one list, sorted by what needs you, with the selected run open beside it.

Saved filters over agent runs, like Needs review or Failed this week, with live counts and a way to make your own.

One agent run as a thread: what started it, each step it took, and replies from the people who stepped in.

The side panel that holds something the model made, with a live preview, its code, earlier versions, and copy or download.

A browser frame for a generated page, with reload and desktop, tablet and phone widths.

The small card or chip inside a reply that points to an artifact and opens it.

Code in a reply, with the file name, line numbers, marked lines and a copy button.

A proposed code change, split into hunks that can be accepted or rejected one at a time.

The files an agent touched, shown in their folders and marked added, modified or deleted.

A summary of a test run with pass and fail counts, each suite, and the error for anything that failed.

Rows returned by a query, with sortable columns and a CSV download.

A chart the model draws to answer a question about numbers, with hover values and a legend.

An answer card for a weather question, with today's conditions and the next few days.

A trip plan split by day, with a route map and timed stops.

An email the agent wrote for you to check, edit and send.

A meeting the agent proposes, with who is free, and buttons to add it or ask for another time.

Products in an answer when someone asks what to buy: a side-by-side comparison, a scrolling row of results, one top pick in detail, a spec table that can show only the differences, and a product named inline with a hover card.

Shows a picture taking shape while the model works, with the prompt, progress and a Regenerate button.

A grid of generated images to pick from, with upscale, vary and download on each and a larger view on click.

A draggable divider for comparing an image before and after an edit.

Lets people paint over part of an image and say what should change there, for inpainting tools.

A clip rendering frame by frame, then playable with a scrubber once it is ready.

A player for a generated track or voice clip, with a waveform you can scrub, playback speed and download.

A visual for a voice assistant that reacts to loudness and shows whether it is listening, thinking or speaking.

The control bar for a live voice call, with mute, captions, a timer and a button to hang up.

A running transcript of a voice conversation, with words appearing as they are spoken.

A dropdown for choosing the input device, with a level meter so people can check they are being heard.

A list of voices to choose from, each with a short preview you can play.

Grey suggested text that appears after a pause in typing. Tab takes it, Esc dismisses it.

A Ctrl+K bar that opens over a paragraph, takes an instruction and shows the rewrite to accept or discard.

A small toolbar that floats above selected text with quick edits like Improve, Shorten and Translate.

Suggested edits shown inside the text, removed words in red and added words in green, to accept one by one or all at once.

Going back to earlier drafts of something written with AI: a history sidebar in a document, a timeline you scrub through on a canvas, and two versions compared side by side.

Controls for which model runs and how: a run-settings sidebar for a playground, a quick popover from the chat header, and preset tones with the numbers tucked away.

Where people write what an assistant should always know or do: project instructions, a system prompt with variables to test, and a list of rules with where each applies.

One agent shown where people find and run it: a card in their agents grid, a row in a list, a listing in a shared directory, and the header at the top of its chat.

Set up a new agent, by describing it in a sentence or filling in its name, instructions, model and tools, with a preview to try it as you go.

API keys and tokens an agent can use, masked by default and scoped per environment, plus a safe way to hand one over mid-run.

Choosing what an agent can use: tools grouped by app with a permission for each, a quick tools menu from the composer, and a permissions table for settings.

Managing MCP connections: a settings list with status and tools, a form for adding a server and testing it, and a small health popover from the composer.

What the assistant remembers: a settings page to search, edit and delete memories, the note that appears in a chat when one is saved, and a profile of what it knows grouped by topic.

A connected app's sync status, what it pulled in and what failed, and which folders or channels it reads.

Building and checking agent workflows: a node canvas with a step library, a linear trigger-and-steps builder, and a run inspector showing what each step did.

Adds a step to a workflow: search or browse triggers, actions, logic and agents, then drop it where you clicked.

The settings for one workflow step beside the canvas, and its input, output and timing from the last run.

Adding files or a website to an agent's knowledge, with each one's progress through reading, splitting and indexing.

For a test question, shows which passages search found, how they scored, and which made it into the model's context.

Everything that starts an agent, from schedules to webhooks to app events, with when each last fired and when it runs next.

A URL that starts the agent when something posts to it: copy it, send a test, then see each delivery and replay one.

Starts an agent when something happens in another app, like a pull request opening, narrowed with conditions.

Shows how much of a plan limit has been used and when it resets, as a ring or a week of daily bars.

A stacked bar of what fills the context window, so people can see why a chat is getting full.

A live ticker of tokens and dollars for a single run, with a budget cap.

Tells people they are close to or out of their limit, as a card or a slim strip above the composer.

Pick an amount of credits, see the new balance and pay, for usage-based plans.

A calm note that part of a reply was left out or a request was declined, with the reason one click away.

Shown when the chosen model is busy, with an automatic retry countdown and a switch to another model.