# Agent builder A React block (a whole screen) in [Beamline](https://beamline.io/)'s [AI workspace](https://beamline.io/components/apps/ai-workspace) app. Live demo: https://beamline.io/components/agent-builder An agent's configuration beside an assistant that proposes tools. Ask for what the agent should do and the assistant's proposal lists each tool with why it is needed; a person accepts or rejects each one (or accepts the rest), and only accepted tools join the configuration, as drafts. Instructions, model, temperature (moved on its scale and said in words) and the most steps per run sit beside the tools, each tool saying where it comes from, whether it asks first and its timeout. Tools are added from the core catalogue, workflows, other agents, MCP servers, or as custom functions with typed parameters, a confirmation step and a timeout under the host's limit (one over it is refused with the limit). Everything edited is counted as not deployed until the next version is deployed; a refused deploy keeps the changes. ## Use it for - Configuring an AI agent's instructions, model and tools, with an assistant that proposes tools a person approves. - Any configuration where suggested changes must be accepted one by one and deployed as a version. ## Not for - Watching runs in production ([agent-runs](https://beamline.io/components/agent-runs), [agent-monitor](https://beamline.io/components/agent-monitor)). - Comparing models on one prompt ([model-playground](https://beamline.io/components/model-playground)). ## Anatomy - header: the agent's name, Version N deployed and Modified: N changes not deployed, Discard changes, Deploy version N+1 - assistant: each request, the proposal's summary, the proposed tools (where from, name, why) each with Reject and Accept or its decision, Accept the rest; the request field - configuration: name and instructions; model, temperature with what it means, most steps per run; tools (where from, name, description, asks first, timeout, Draft or Active, Remove) and Add tool - catalogue sheet: Core, Workflows, Agents, MCP servers, Custom function; search and Add (Added); the custom form: name, what it does, parameters (name, type, required), Ask before it runs, Timeout, Add custom tool ## States - proposal pending, tool accepted (added as a draft), rejected - nothing proposed yet; proposing; proposal refused (request kept) - modified with N changes not deployed; deploying; deploy refused (changes kept); deployed (drafts active) - custom tool: invalid or repeated parameter name, timeout over the limit (refused), asks first - narrow room: Configuration and Assistant take turns; the catalogue from the bottom ## Keyboard - Tab through the header, the assistant and the configuration - each proposed tool's Accept and Reject are buttons named with the tool - temperature is a slider: arrows step by 0.1 - the catalogue sheet traps focus and returns it to Add tool ## Motion Decisions and drafts change colour in the fast duration; the catalogue sheet slides in. Nothing runs at rest. ## Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `config` | `AgentConfig` | — | The configuration as edited. | | `defaultConfig` | `AgentConfig` | — | | | `onConfigChange` | `((config: AgentConfig) => void)` | — | | | `deployed` (required) | `AgentConfig` | — | The deployed configuration, to tell an edit from it. | | `version` (required) | `number` | — | | | `deployedAt` (required) | `string` | — | When the deployed version went live, ISO. | | `onDeploy` | `((config: AgentConfig, version: number) => Promise)` | — | Deploys the edited configuration as the next version; reject with the reason to keep the edit. | | `onSuggest` | `((request: string, config: AgentConfig) => Promise)` | — | The assistant: resolve with tools it proposes for a request; reject with the reason. | | `suggestions` | `Suggestion[]` | — | | | `defaultSuggestions` | `Suggestion[]` | — | | | `onSuggestionsChange` | `((suggestions: Suggestion[]) => void)` | — | | | `models` (required) | `ModelOption[]` | — | | | `catalogue` | `Omit[]` | — | Tools that can be added, by where they come from. | | `timeoutLimit` | `number` | — | The longest timeout a custom tool may have, in seconds. Default 120. | | `locale` | `string` | — | | | `className` | `string` | — | Classes on the documented visual root; no override by default. | | `style` | `CSSProperties` | — | Inline styles on the documented visual root; no overrides by default. | | `ref` | `Ref` | — | Receives the documented native target or imperative handle; omitted by default. | ## Built from - [prompt-bar](https://beamline.io/components/prompt-bar) - [model-picker](https://beamline.io/components/model-picker) - slider - [number-field](https://beamline.io/components/number-field) - textarea - input - sheet - [segmented-control](https://beamline.io/components/segmented-control) - select - switch - checkbox - badge - button ## Dependencies `lucide-react` ## Import ```tsx import { AgentBuilder } from "@beamline/agent-builder"; ``` ## Get it Agent builder is part of Beamline UI. Install the parts you need in your React app as compiled packages or editable source. [Get Beamline](https://beamline.io/checkout?pack=complete) · [Connect your agent](https://beamline.io/connect) ## More in AI workspace - [AI agent workspace](https://beamline.io/components/agent-workspace): Threads, a conversation that opens on the thread's earlier turns (each with its trace, the tools the agent called, a cited answer and any table it… - [Agent runs monitor](https://beamline.io/components/agent-runs): Every run of your agents in one place: success rate, run time, tokens and spend; the last runs as a strip of status blocks; a live table where running… - [Agent monitor](https://beamline.io/components/agent-monitor): Agents in production and on test. Monitor shows every agent or one over 24 hours, 7 or 14 days: runs, tokens, estimated cost and average run time counted… - [Conversation history](https://beamline.io/components/conversation-history): Past conversations with an assistant, ready to pick up again: the list by day with bookmarks and unsent drafts, a search through every message that… - [Knowledge base manager](https://beamline.io/components/knowledge-base): What your assistant knows and whether it is fresh: sources with live sync status (syncing with progress, out of date, failed with the reason and Retry)… - [Reading library](https://beamline.io/components/reading-library): A read-it-later library: saved views that are live filters (a query with every unreadable part named, the number that matches now, saved with a name; a… - [Artifact workbench](https://beamline.io/components/artifact-workbench): Where the things an assistant makes are checked before they leave: every document, piece of code, small app and data result from a conversation, each… - [AI image studio](https://beamline.io/components/image-studio): Write a prompt, pick a shape, a style and how many, and watch the variations generate side by side; each one opens full screen and can be upscaled or… - [Voice agent](https://beamline.io/components/voice-agent): A voice agent in three layouts on one session: a workspace with the agent's orb large on a stage (the line being said shows under it, questions to ask… - [Model playground](https://beamline.io/components/model-playground): Try one prompt on up to three models side by side: pick each model with its price and speed in view, set the system prompt, temperature and length once… - [Model inspector](https://beamline.io/components/model-inspector): A design model's objects without needing the 3D view: the model tree, where objects with the same name are told apart by id and path; the selected… - [Model issues](https://beamline.io/components/model-issues): Issues pinned to the objects of a design model. The queue says the scope beside every count (open in the project, on the loaded models, on this version)… - [Workflow composer](https://beamline.io/components/workflow-composer): A workflow drafted from a sentence and finished by hand. The prompt drafts steps that arrive one by one on the graph (a draft cut short keeps what came… - [Data binding](https://beamline.io/components/data-binding): Bind an object's properties to a view model. Each property says whether it is bound, incomplete or mismatched. A binding takes its source from the… Part of [Beamline UI: polished, editable React components and complete screens for custom applications](https://beamline.io/). [Build your own style from any look; tokens, fonts, radii, motion; not only colours](https://beamline.io/docs/customize).