# AI & agents Chat, reasoning, streaming, tool calls, approvals. 17 live React parts in [Beamline](https://beamline.io/), each in nine looks. - [Approval card](https://beamline.io/components/approval-card): The agent stops and asks before it acts: what it wants to do, exactly what that changes, any choices it needs, and Approve or Reject; both run your callbacks with progress, a refusal says why with Retry, and a settled card folds to one line of record. - [Attachment](https://beamline.io/components/attachment): A file tile: preview or typed glyph with the type named, name, size, upload progress, error with retry, and a keyboard-reachable remove. - [Chat thread](https://beamline.io/components/chat-thread): People talking to people: messages grouped by person and day, reactions, delivery and read receipts that glide to the newest message read, who is typing, and a composer with files; it scrolls on the same scroller as the agent conversation. - [Citations](https://beamline.io/components/citations): Inline numbered citations that preview their source on hover or focus, plus a numbered source list; streamed answers flow in at an even pace with the list waiting for the end. - [Context cards](https://beamline.io/components/context-cards): The knowledge an agent retrieved before it answered: one card per chunk with what it is about, the text it read with the search words marked, how relevant it was and where it came from, filterable by source; optionally each chunk can be left out of the next answer. - [Conversation](https://beamline.io/components/conversation): The scrolling column of a conversation: follows new content while you are at the bottom, stops when you scroll up to read, and offers a way back; shared by the agent conversation and the people chat. - [Flowchart](https://beamline.io/components/flowchart): A workflow as steps on a dotted canvas: a trigger, conditions that branch into paths side by side, actions and waits, read top to bottom; during a run each step shows its status, and the whole flow is one keyboard stop walked with the arrows. - [Image generation](https://beamline.io/components/image-generation): The frame an AI image is generated into: a field of brand-hued pixels breathes with the progress while the model works, then the image arrives — sharpening from coarse blocks, sweeping in or fading — and a refusal says why. - [Message](https://beamline.io/components/message): One turn in a conversation with an agent: the person's words in a quiet bubble, the agent's answer on the page with its orb mark, trace, tool calls and actions, or what went wrong with the way forward. - [Plan](https://beamline.io/components/plan): An agent's plan: numbered steps with live status, progress, and Approve / Edit / Reject when it needs sign-off; approving shows progress, and a refusal says why and keeps waiting. - [Prompt bar](https://beamline.io/components/prompt-bar): The agent composer: a field that grows, @ to add a source, / for a command, a model picker, files and dictation, and one button that sends with progress and becomes Stop while the answer arrives; a refused send keeps the draft and says why. - [Reasoning](https://beamline.io/components/reasoning): The agent's trace, fed by your stream: a shimmering label and the seconds so far while it works, then "Thought for N seconds"; steps that check off, prose thoughts, search sources or tool calls, open while running and folded when done. - [Recommendation card](https://beamline.io/components/recommendation-card): One suggestion from the agent that the person may take or leave: what it suggests, why, the expected effect and how sure it is (a meter and a word, hatched when it cannot tell), with the alternatives it weighed one click away; Accept runs your callback with progress and the card settles to one line. - [Response](https://beamline.io/components/response): An assistant's answer as streamed markdown in the system's reading type: bursty tokens flow in at an even pace, each new word fades in through a short brand-hue colour trail, code is highlighted in the system's colours, and tables and quotes are set cleanly. - [Selection actions](https://beamline.io/components/selection-actions): Select a passage and hand it to the agent: a bar over the selection with quick actions, your own instruction and More; while the agent works it says so, and its suggestion comes back to Replace, Copy or Discard, with the passage kept marked. - [Task rows](https://beamline.io/components/task-rows): Background work an agent is doing, one row per task: status as a glyph and a word, what it produced, how long it has run or took, a progress bar while running and its sub-steps when opened; a failure opens with its reason and Retry, live tasks can be cancelled, and changes are announced politely. - [Tool call](https://beamline.io/components/tool-call): One tool call in an agent's run: status, what it did and a short result on one quiet row that opens to the exact input and output; stops for permission when needed, with progress and the reason if allowing fails. 190 React components and screens your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 one payment (regular $200), no subscription, a year of updates, one licence for your whole team. Other categories: [Actions](https://beamline.io/components/actions) · [Form controls](https://beamline.io/components/forms) · [Overlays](https://beamline.io/components/overlays) · [Navigation](https://beamline.io/components/navigation) · [Layout](https://beamline.io/components/layout) · [Feedback](https://beamline.io/components/feedback) · [Content & display](https://beamline.io/components/display) · [Data & tables](https://beamline.io/components/data) · [Charts & data-vis](https://beamline.io/components/charts) · [Trading](https://beamline.io/components/trading) · [Dashboard](https://beamline.io/components/dashboard) · [Voice & audio](https://beamline.io/components/voice) · [Motion & effects](https://beamline.io/components/effects) · [Blocks](https://beamline.io/components/blocks)