> ## Documentation Index > Fetch the complete documentation index at: https://docs.orbit.devotel.io/llms.txt > Use this file to discover all available pages before exploring further. # Build Agents Visually in the Agent Studio Canvas > Drag nodes from the palette onto the canvas — LLM, tool, knowledge base, voice/IVR nodes — configure each one, validate the agent in the sandbox test chat, then deploy over a webhook channel. # Build Agents Visually in the Agent Studio Canvas The **Agent Studio** is the visual route to building an agent: a canvas where you drag nodes from a palette, wire them, and configure each one in a side panel — no prompt-generation round trip. This guide walks the canvas tour, an end-to-end build with a guardrail and a handoff wired explicitly, the sandbox test loop, and how the canvas hands off to versioning and canary promotion. ## Prerequisites * An Orbit account with an owner, admin, or developer role. * A desktop browser — the visual builder is disabled below a desktop-size viewport and the dashboard tells you to switch if your window is too small. * An agent idea concrete enough to draw as a graph: entry point, model call, maybe a tool, and where it ends. ## 1. Where the canvas lives — and when to prefer it over the prompt route Open **Agents → Studio** tab in the dashboard ([/agents?tab=studio](https://orbit.devotel.io/en/agents?tab=studio)). A direct visit to `/agents/studio` redirects there with the tab pre-selected. Two routes lead to the same agent record: * **From prompt** ([Author an AI Agent from a Prompt](/guides/agent-from-prompt)) — write a plain-English brief; the builder generates a draft prompt, tools, and model pick. Best when you want a scaffold quickly and will tune by hand afterward. * **Studio canvas** (this guide) — you place the nodes and pin each setting yourself. Best when you want to wire specific tools, knowledge bases, or guardrails before anything is deployed, or when you're building a voice/IVR flow where the node kinds matter. The Studio is a **configuration canvas, not a runtime flow**. A banner at the top says it plainly: cards on the canvas configure the agent — system prompt, model, tools, knowledge bases, guardrails. At runtime the agent's LLM-orchestrated reasoning loop decides which tool to call and when; the edges you draw on the canvas are visual aids, not an execution order. **Condition** nodes are the one exception the UI flags: the canvas shows an amber warning that branching logic is ignored at runtime until the visual-workflow interpreter ships — Save and Deploy still work, but remove Condition nodes for predictable behavior. ## 2. Canvas tour The screen has four regions: the toolbar on top, the node palette on the left, the canvas in the middle, and a config panel on the right. ### The node palette Drag a node onto the canvas, or click its card for the same result through your keyboard. The palette ships these node kinds: | Node | What it configures | | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **User Input** | Conversation entry point. | | **LLM Call** | The model call — pick the model, temperature, max tokens, and write the system prompt. | | **Tool Call** | Attach one of the workspace's tools (Send SMS, Send WhatsApp, Send Email, Look up contact, Check balance, Create ticket, Search knowledge base, Transfer to human, plus any custom tools you've built). | | **Condition** | Branch on a condition. Decorative until the workflow interpreter ships — the canvas warns when one is present. | | **Human Handoff** | Escalate to a human agent on a named destination (e.g. `support-queue`). | | **Response** | Terminal node — send the reply to the user. | | **Play Prompt (TTS)** | Voice node — speak a message to the caller; supports `{{state_var}}` placeholders from earlier nodes. | | **Collect Digits** | Voice node — gather DTMF input (store variable, digit count, timeout) and branch on it. | | **Answering Machine Branch** | Voice node — route on human vs. voicemail detection. | | **Warm Transfer** | Voice node — bridge the caller to a human via the Devotel softswitch, with a hold message. | A fresh canvas starts from a default text workflow — User Input → LLM Call → Condition ("needs tool?") → Tool Call / Response — which is a useful shape to modify rather than a blank page. ### The config panel Click a node and the right panel switches from the workflow-level form (workflow name + guardrails) to that node's settings: * **LLM Call** — model picker with per-model blended cost estimates (\~\$/1M tokens shown in the option text), a temperature slider, and a system-prompt textarea with a character count and approximate token estimate. If the saved model id isn't in the live list (e.g. a newer version pin), the picker keeps it as a labelled "saved selection" so an edit never silently downgrades the model. * **Tool Call** — a tool selector fed from `GET /agents/tools`, so custom tools appear alongside the built-ins. * **Voice nodes** — Play Prompt takes the spoken text; Collect Digits takes the variable to store, digit count, and timeout; Warm Transfer takes a destination name (matched against the agent's transfer destinations) and a hold message. The workflow-level form, visible when no node is selected, holds the **guardrails** block: block PII in responses, block profanity, require human approval, and a max cost per conversation in dollars. These travel with the agent when you save or deploy. ### Edges, saving, and undo Connect nodes by dragging from an output handle (bottom of a node) to an input handle (top of the next). Response, Human Handoff, and Warm Transfer are terminal — they have no output handle. Undo/redo, auto-layout, and a reset (restores the default workflow) live in the toolbar. The toolbar's **Save** writes the workflow draft without deploying; **Deploy** does the full publish. Changes mark the canvas unsaved until one of the two lands. ## 3. Build example: knowledge-base agent with a sensitive-words guardrail and human handoff Build a support agent that answers from your knowledge base, refuses sensitive topics, and hands billing disputes to a human — entirely on the canvas. 1. **Open the Studio tab** and press Reset if the canvas isn't at the default shape, then delete the Condition node (it isn't executed at runtime and would trigger the warning). 2. **Configure the LLM node.** Click **LLM Call**, pick the model that fits the traffic (Sonnet 4.6 for general support — the picker shows the estimated blended cost per 1M tokens per choice), set temperature \~0.3 for factual retrieval, and write the system prompt: what the agent answers, what it refuses, and when it escalates. 3. **Attach the knowledge base.** Drag a **Tool Call** from the palette, select **Search knowledge base** in its tool dropdown. At deploy time the Studio extracts the knowledge-base ids and tool ids from the nodes and ships them with the agent — so retrieval actually attaches instead of being silently skipped. 4. **Wire the human escape route.** Drag a **Human Handoff** node, name a destination (`support-queue` in the Destination field), and connect the LLM node to it so the escape path is visible on the canvas. 5. **Pin the guardrails.** Click the canvas to deselect all nodes; the right panel switches to the workflow form. Turn on **Block PII in responses** and set a **max cost per conversation**. If you need the stricter word-based screen — e.g. refuse to discuss competitor offers or legal topics — that is the sensitive-words guardrail, configured at the dashboard level and documented in [Sensitive words guardrail](/agents/sensitive-words-guardrail). 6. **Save, then deploy** (next section). The finished canvas reads top to bottom: User Input → LLM Call → Tool Call (knowledge lookup), with Human Handoff and Response as the two exit cards. Save keeps it as a draft you can reopen from the Agents hub. ## 4. Validate before you deploy — the sandbox test chat The **Test** button in the toolbar opens a chat dialog that talks to your deployed agent over a sandbox channel. Save and deploy first — the input is disabled until the agent exists server-side, and the dialog says so. * Send a message that should hit the knowledge base ("what does the parking permit cost?") and confirm the answer grounds in your documents. * Send a message the guardrail should block and confirm the refusal path. * Send an escalation trigger ("I want to dispute this charge") and confirm the agent takes the handoff route. Each turn streams in the dialog; the conversation id is reused while the dialog stays open, so follow-up questions test multi-turn behavior, not isolated turns. Because the test runs against the deployed record with `sandbox: true`, nothing here touches real customer traffic — but it does exercise the real executor, so a misconfiguration shows up here, not in production. ## 5. Deploy and promote to production **Deploy** publishes in two steps behind a single click: it saves the agent record (workflow, model, tools, knowledge-base ids, guardrails) and then calls `POST /agents/:id/deploy` with the **webhook** channel, which binds the channel, issues the webhook endpoint, and moves the agent from draft to deployed. Redeploying from the same canvas updates the same agent — the Studio keeps the agent id after the first deploy. From here the canvas hands off to the standard lifecycle: 1. Every material change you promote becomes a new **version** — see [Agent versions](/agents/agent-versions) for how saved configurations stack and how to roll back. 2. Promote through a staged rollout, not straight to 100% — the canary mechanics (stages, regression gates, rollback) are in [Safely Roll Out an AI Agent](/guides/ai-agent-rollout-pipeline). The same persona simulation and red-team gate from the prompt route apply to canvas-built agents — they validate the same agent record. 3. Once live, keep the agent honest with [Continuous production evals](/agents/continuous-production-evals) — sampled live traffic is graded against your quality bar so drift is caught on evidence, not complaints. ## Troubleshooting | Symptom | Fix | | -------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | | The Studio tab shows a "desktop browser required" notice | The builder is disabled below a desktop-size viewport. Widen the window or move to a desktop; mobile is intentionally unsupported. | | Test chat input is greyed out | Save and deploy first — the test dialog talks to a deployed agent over sandbox mode, not to the unsaved canvas. | | Amber banner about Condition nodes | Condition nodes don't execute at runtime yet. Save and Deploy still work, but remove the Condition nodes or accept that the branching is ignored. | | Agent deploys but never calls the knowledge base | The node must carry a real knowledge-base id — configure the tool/knowledge node fully; the deploy payload only ships ids it can extract from nodes. | | Model you pinned reverts after an edit | It shouldn't — the picker preserves an unlisted saved id as "saved selection". If you see a downgrade, reselect the model and Save before Deploy. | | Changes lost after closing the tab | The canvas is local state until you Save. Press Save (draft) or Deploy (publish) before navigating away. | ## See also * [Author an AI Agent from a Prompt](/guides/agent-from-prompt) — the natural-language route to the same agent record. * [Safely Roll Out an AI Agent](/guides/ai-agent-rollout-pipeline) — persona simulation, the red-team gate, and canary stages. * [Agent versions](/agents/agent-versions) — the saved configurations promotion moves between. * [Continuous production evals](/agents/continuous-production-evals) — the always-on grading loop after deploy. * [Sensitive words guardrail](/agents/sensitive-words-guardrail) — the stricter word-based screen beyond the canvas guardrail toggles. * [Custom tools for agents](/guides/agents-custom-tools) — build the tools that pop up in the Tool Call node's dropdown.