> ## Documentation Index > Fetch the complete documentation index at: https://hellotars.com/docs/llms.txt > Use this file to discover all available pages before exploring further. # Builder basics > Find your way around the builder, add gambits from the palette, and connect them into a flow. export const Browser = ({url, children}) =>
{url ? {url} : null}
{children}
; export const img = { activity: { activityTimeline: "/docs/guides/activity/images/activity-timeline.png", capturedVariablesPanel: "/docs/guides/activity/images/captured-variables-panel.png", dataViewCards: "/docs/guides/activity/images/data-view-cards.png", exportDataDialog: "/docs/guides/activity/images/export-data-dialog.png", tasksPanelExportReady: "/docs/guides/activity/images/tasks-panel-export-ready.png" }, analytics: { analyticsOverview: "/docs/guides/analytics/images/analytics-overview.png", exploreGallery: "/docs/guides/analytics/images/explore-gallery.png", exploreTab: "/docs/guides/analytics/images/explore-tab.png", goalForm: "/docs/guides/analytics/images/goal-form.png", goalsTab: "/docs/guides/analytics/images/goals-tab.png", improveDiagnostics: "/docs/guides/analytics/images/improve-diagnostics.png", improveTab: "/docs/guides/analytics/images/improve-tab.png", teamTab: "/docs/guides/analytics/images/team-tab.png" }, billing: { billingOverview: "/docs/guides/billing/images/billing-overview.png", buyConversationsDialog: "/docs/guides/billing/images/buy-conversations-dialog.png", buySeatsDialog: "/docs/guides/billing/images/buy-seats-dialog.png", livechatSeatsTab: "/docs/guides/billing/images/livechat-seats-tab.png", organizationDeletionLifecycle: "/docs/guides/billing/images/organization-deletion-lifecycle.svg", organizationSwitcher: "/docs/guides/billing/images/organization-switcher.png", rolesAndAccessMatrix: "/docs/guides/billing/images/roles-and-access-matrix.png" }, building: { agentBehaviorGuardrails: "/docs/guides/building/images/agent-behavior-guardrails.png", agentCardMenu: "/docs/guides/building/images/agent-card-menu.png", agentConfigure: "/docs/guides/building/images/agent-configure.png", agentExitRoutesDialog: "/docs/guides/building/images/agent-exit-routes-dialog.png", agentLibrary: "/docs/guides/building/images/agent-library.png", agentModelParameters: "/docs/guides/building/images/agent-model-parameters.png", aiAgentGambitLoop: "/docs/guides/building/images/ai-agent-gambit-loop.svg", builderBasics: "/docs/guides/building/images/builder-basics.png", builderConnectHandlePanel: "/docs/guides/building/images/builder-connect-handle-panel.png", builtInToolsDialog: "/docs/guides/building/images/built-in-tools-dialog.png", configureDebugTab: "/docs/guides/building/images/configure-debug-tab.png", configureLanguage: "/docs/guides/building/images/configure-language.png", configureNotifications: "/docs/guides/building/images/configure-notifications.png", createAgentDialog: "/docs/guides/building/images/create-agent-dialog.png", draftPublishRollbackPinning: "/docs/guides/building/images/draft-publish-rollback-pinning.svg", draftSwitcherChip: "/docs/guides/building/images/draft-switcher-chip.png", duplicateAgentDialog: "/docs/guides/building/images/duplicate-agent-dialog.png", flowConditions: "/docs/guides/building/images/flow-conditions.png", gambitPalette: "/docs/guides/building/images/gambit-palette.png", gambits: { gambitAiAgent: "/docs/guides/building/gambits/images/gambit-ai-agent.png", gambitApiCall: "/docs/guides/building/gambits/images/gambit-api-call.png", gambitAutoSuggestion: "/docs/guides/building/gambits/images/gambit-auto-suggestion.png", gambitButton: "/docs/guides/building/gambits/images/gambit-button.png", gambitCard: "/docs/guides/building/gambits/images/gambit-card.png", gambitChannel: "/docs/guides/building/gambits/images/gambit-channel.png", gambitCustomCode: "/docs/guides/building/gambits/images/gambit-custom-code.png", gambitDateTime: "/docs/guides/building/gambits/images/gambit-date-time.png", gambitGeoLocation: "/docs/guides/building/gambits/images/gambit-geo-location.png", gambitLanguage: "/docs/guides/building/gambits/images/gambit-language.png", gambitLiveChat: "/docs/guides/building/gambits/images/gambit-live-chat.png", gambitMediaUpload: "/docs/guides/building/gambits/images/gambit-media-upload.png", gambitNoInput: "/docs/guides/building/gambits/images/gambit-no-input.png", gambitRedirect: "/docs/guides/building/gambits/images/gambit-redirect.png", gambitStarRating: "/docs/guides/building/gambits/images/gambit-star-rating.png", gambitStartAndEnd: "/docs/guides/building/gambits/images/gambit-start-and-end.png", gambitText: "/docs/guides/building/gambits/images/gambit-text.png", gambitTrigger: "/docs/guides/building/gambits/images/gambit-trigger.png" }, languagesTranslateGambit: "/docs/guides/building/images/languages-translate-gambit.png", languageSystemMessages: "/docs/guides/building/images/language-system-messages.png", newDraftDialog: "/docs/guides/building/images/new-draft-dialog.png", outputComponentsGrid: "/docs/guides/building/images/output-components-grid.png", publishDialog: "/docs/guides/building/images/publish-dialog.png", systemPromptDialog: "/docs/guides/building/images/system-prompt-dialog.png", testModeEventLog: "/docs/guides/building/images/test-mode-event-log.png", testModePanel: "/docs/guides/building/images/test-mode-panel.png", validationProblemsPanel: "/docs/guides/building/images/validation-problems-panel.png", variablePickerPanel: "/docs/guides/building/images/variable-picker-panel.png", variablePillInserted: "/docs/guides/building/images/variable-pill-inserted.png", versionsDraftsPanel: "/docs/guides/building/images/versions-drafts-panel.png" }, campaigns: { campaignFlavorsTriggers: "/docs/guides/campaigns/images/campaign-flavors-triggers.svg", campaignReplyRouting: "/docs/guides/campaigns/images/campaign-reply-routing.svg", campaignSendAnatomy: "/docs/guides/campaigns/images/campaign-send-anatomy.svg", createACampaign: "/docs/guides/campaigns/images/create-a-campaign.png", walletReserveSettleRefund: "/docs/guides/campaigns/images/wallet-reserve-settle-refund.svg", webhookCampaignContractLocking: "/docs/guides/campaigns/images/webhook-campaign-contract-locking.svg", webhookCampaignLifecycleStates: "/docs/guides/campaigns/images/webhook-campaign-lifecycle-states.svg", webhookCampaignOneCallOneDelivery: "/docs/guides/campaigns/images/webhook-campaign-one-call-one-delivery.svg" }, channels: { distributeWhatsappConnect: "/docs/guides/channels/images/distribute-whatsapp-connect.png", whatsappConnectDialogWaiting: "/docs/guides/channels/images/whatsapp-connect-dialog-waiting.png", whatsappEmptyState: "/docs/guides/channels/images/whatsapp-empty-state.png" }, deploy: { bridgeEventGambitSection: "/docs/guides/deploy/images/bridge-event-gambit-section.png", deploymentSurfacesAndChannels: "/docs/guides/deploy/images/deployment-surfaces-and-channels.svg", designAgentTab: "/docs/guides/deploy/images/design-agent-tab.png", designLauncherTab: "/docs/guides/deploy/images/design-launcher-tab.png", embedIframeTab: "/docs/guides/deploy/images/embed-iframe-tab.png", embedTheWidget: "/docs/guides/deploy/images/embed-the-widget.png", mobileAppIntegration: "/docs/guides/deploy/images/mobile-app-integration.png", onYourDomain: "/docs/guides/deploy/images/on-your-domain.png", shareYourAgentLink: "/docs/guides/deploy/images/share-your-agent-link.png" }, developer: { api: { channelSendTemplateVsMessage: "/docs/developer/api/images/channel-send-template-vs-message.svg", endUsers: { endUsersListCursorPagination: "/docs/developer/api/end-users/images/end-users-list-cursor-pagination.svg" }, triggerCallConversationLifecycle: "/docs/developer/api/images/trigger-call-conversation-lifecycle.svg" }, developerSurfacesMap: "/docs/developer/images/developer-surfaces-map.svg", embed: { embedConfigToWidgetContext: "/docs/developer/embed/images/embed-config-to-widget-context.svg", hostPageBridgeFlow: "/docs/developer/embed/images/host-page-bridge-flow.svg", identitySigningFlow: "/docs/developer/embed/images/identity-signing-flow.svg", scriptVsIframeEmbed: "/docs/developer/embed/images/script-vs-iframe-embed.svg" }, mobile: { bridgeMessageProtocol: "/docs/developer/mobile/images/bridge-message-protocol.svg", webviewBridgeArchitecture: "/docs/developer/mobile/images/webview-bridge-architecture.svg" } }, endUsers: { anonymousToIdentifiedProfile: "/docs/guides/end-users/images/anonymous-to-identified-profile.svg", bulkActionBar: "/docs/guides/end-users/images/bulk-action-bar.png", campaignConsentGate: "/docs/guides/end-users/images/campaign-consent-gate.svg", consentPerChannelStates: "/docs/guides/end-users/images/consent-per-channel-states.svg", dynamicVsStaticSegments: "/docs/guides/end-users/images/dynamic-vs-static-segments.svg", endUserDirectory: "/docs/guides/end-users/images/end-user-directory.png", endUserProfileAcrossChannels: "/docs/guides/end-users/images/end-user-profile-across-channels.svg", endUserProfilePanes: "/docs/guides/end-users/images/end-user-profile-panes.png", profileMergeAndTakeoverProtection: "/docs/guides/end-users/images/profile-merge-and-takeover-protection.svg", segmentBuilder: "/docs/guides/end-users/images/segment-builder.png", segmentsPage: "/docs/guides/end-users/images/segments-page.png" }, getStarted: { agentStates: "/docs/get-started/images/agent-states.svg", buildToLivePath: "/docs/get-started/images/build-to-live-path.svg", dashboardSidebarMap: "/docs/get-started/images/dashboard-sidebar-map.png", organizationOwnershipAndRoles: "/docs/get-started/images/organization-ownership-and-roles.svg", quickstart: { step1CreateYourAccount: "/docs/get-started/images/quickstart/step-1-create-your-account.png", step3ConnectTheAiAgent: "/docs/get-started/images/quickstart/step-3-connect-the-ai-agent.png", step4TestMode: "/docs/get-started/images/quickstart/step-4-test-mode.png" }, quickstartCanvas: "/docs/get-started/images/quickstart-canvas.png" }, knowledge: { addASource: "/docs/guides/knowledge/images/add-a-source.png", addRetrieverPicker: "/docs/guides/knowledge/images/add-retriever-picker.png", attachKnowledgeGambit: "/docs/guides/knowledge/images/attach-knowledge-gambit.png", configureARetriever: "/docs/guides/knowledge/images/configure-a-retriever.png", createKnowledgeBaseDialog: "/docs/guides/knowledge/images/create-knowledge-base-dialog.png", customRetrieverDialog: "/docs/guides/knowledge/images/custom-retriever-dialog.png", datasetTab: "/docs/guides/knowledge/images/dataset-tab.png", documentChangeReindexLifecycle: "/docs/guides/knowledge/images/document-change-reindex-lifecycle.svg", documentsTabPreview: "/docs/guides/knowledge/images/documents-tab-preview.png", importAWebsite: "/docs/guides/knowledge/images/import-a-website.png", kbList: "/docs/guides/knowledge/images/kb-list.png", retrieverIndexStates: "/docs/guides/knowledge/images/retriever-index-states.svg", retrieverQueryPipeline: "/docs/guides/knowledge/images/retriever-query-pipeline.svg", standardVsParentChildChunking: "/docs/guides/knowledge/images/standard-vs-parent-child-chunking.svg", syncManagement: "/docs/guides/knowledge/images/sync-management.png", testRetriever: "/docs/guides/knowledge/images/test-retriever.png" }, liveChat: { agentWorkspace: "/docs/guides/live-chat/images/agent-workspace.png", assignedAgentPicker: "/docs/guides/live-chat/images/assigned-agent-picker.png", automaticAssignmentRouting: "/docs/guides/live-chat/images/automatic-assignment-routing.svg", availabilityDropdown: "/docs/guides/live-chat/images/availability-dropdown.png", cannedResponses: "/docs/guides/live-chat/images/canned-responses.png", composerPreferences: "/docs/guides/live-chat/images/composer-preferences.png", copilotPanel: "/docs/guides/live-chat/images/copilot-panel.png", filterConversationsDialog: "/docs/guides/live-chat/images/filter-conversations-dialog.png", inboxAnalyticsTab: "/docs/guides/live-chat/images/inbox-analytics-tab.png", inboxAvailabilityTab: "/docs/guides/live-chat/images/inbox-availability-tab.png", inboxesSettings: "/docs/guides/live-chat/images/inboxes-settings.png", inboxRoutingTab: "/docs/guides/live-chat/images/inbox-routing-tab.png", labelsSettings: "/docs/guides/live-chat/images/labels-settings.png", newAttributeDialog: "/docs/guides/live-chat/images/new-attribute-dialog.png", newCannedResponseDialog: "/docs/guides/live-chat/images/new-canned-response-dialog.png", notificationPreferences: "/docs/guides/live-chat/images/notification-preferences.png", notificationsPage: "/docs/guides/live-chat/images/notifications-page.png", pickupTargetCard: "/docs/guides/live-chat/images/pickup-target-card.png", resolveMenu: "/docs/guides/live-chat/images/resolve-menu.png", searchDialog: "/docs/guides/live-chat/images/search-dialog.png", seatGateConversation: "/docs/guides/live-chat/images/seat-gate-conversation.png", seatsSettings: "/docs/guides/live-chat/images/seats-settings.png", workTheInbox: "/docs/guides/live-chat/images/work-the-inbox.png" }, security: { addOpenRouterKeyDialog: "/docs/guides/security/images/add-open-router-key-dialog.png", auditChainVerified: "/docs/guides/security/images/audit-chain-verified.png", auditEventDrawer: "/docs/guides/security/images/audit-event-drawer.png", auditExportDialog: "/docs/guides/security/images/audit-export-dialog.png", auditLogViewer: "/docs/guides/security/images/audit-log-viewer.png", auditRecordLifecycle: "/docs/guides/security/images/audit-record-lifecycle.svg", logPrivacyRedactionEnabled: "/docs/guides/security/images/log-privacy-redaction-enabled.png", modelProviderEmptyState: "/docs/guides/security/images/model-provider-empty-state.png", privacySettings: "/docs/guides/security/images/privacy-settings.png", siemConnectWizard: "/docs/guides/security/images/siem-connect-wizard.png", supportActorMasking: "/docs/guides/security/images/support-actor-masking.svg" }, tools: { addToolModal: "/docs/guides/tools/images/add-tool-modal.png", addToolsPanel: "/docs/guides/tools/images/add-tools-panel.png", codekitActionEditor: "/docs/guides/tools/images/codekit-action-editor.png", codekitConnectToolkitsDialog: "/docs/guides/tools/images/codekit-connect-toolkits-dialog.png", codekitSchemaDialog: "/docs/guides/tools/images/codekit-schema-dialog.png", codekitToolkit: "/docs/guides/tools/images/codekit-toolkit.png", codekitToolkitAnatomy: "/docs/guides/tools/images/codekit-toolkit-anatomy.svg", createActionDialog: "/docs/guides/tools/images/create-action-dialog.png", createCodekitDialog: "/docs/guides/tools/images/create-codekit-dialog.png", responseFilteringDialog: "/docs/guides/tools/images/response-filtering-dialog.png", toolGambitEditorAgentMode: "/docs/guides/tools/images/tool-gambit-editor-agent-mode.png", toolGambitEditorWorkflowMode: "/docs/guides/tools/images/tool-gambit-editor-workflow-mode.png", toolkitDetail: "/docs/guides/tools/images/toolkit-detail.png", toolsConnected: "/docs/guides/tools/images/tools-connected.png", toolsDirectory: "/docs/guides/tools/images/tools-directory.png", viewActionsModal: "/docs/guides/tools/images/view-actions-modal.png", workflowModeResponse: "/docs/guides/tools/images/workflow-mode-response.png" } }; export const urls = { app: "https://dashboard.hellotars.com", site: "https://hellotars.com", support: "mailto:support@hellotars.com", status: "https://status.hellotars.com" }; At the end of this page, your first gambits sit on the **Make** page wired together, and you know which toolbar control and shortcut does what. Builder with the gambit palette on the left, a branching flow of six gambits in the center, and Test Mode open on the right ## Before you start Before you start, sign in to the dashboard and select the organization you want to work in. * Open an agent and select **Make** in the builder sidebar. See [Create an agent](/docs/guides/building/create-an-agent) if you do not have one yet. ## Add and connect gambits The gambit appears where you drop it, ready to configure. The gambit editor panel opens on the right with the gambit's settings. Each gambit shows connection handles along its bottom edge. The edge you draw defines the conversation's path. A panel opens with two tabs. The **Add Gambits** tab creates a connected gambit. The **Connect** tab links the handle to an existing gambit. The Add Gambits panel anchored under an AI Agent gambit's Resolved handle, with its Connect tab beside it, a search box, filter chips, and gambit types grouped under AI Gambits and User Inputs The panel is anchored to the handle you started from, so the new gambit is wired to that branch. Edges take their labels from the branch and option names you set in the gambit editor. See [Flow control and branching](/docs/guides/building/flow-control-and-branching) for wiring branches. ## The builder at a glance The **Make** page is the builder, the visual editor for your flow. The gambit palette sits on the left and the flow fills the center. A panel on the right shows one thing at a time: the gambit editor, **Test Mode**, or **Versions & drafts**. A ribbon above the flow names the environment you are editing: **Editing live flow** with the version number, **Editing draft** with the draft name, or **Not published**. Presence avatars in the toolbar show members editing with you. See [Drafts and publishing](/docs/guides/building/drafts-and-publishing) for how environments work. ## The gambit palette The palette is the left panel titled **Gambit Types**. Its **Gambits** tab groups gambit types into five categories, each with a count in its header. The search icon at the top filters the list, and the chevron collapses the palette into an icon rail. | Category | Gambit types | | ---------------- | ----------------------------------------------------------------------------------------- | | **AI Agents** | AI Agent | | **Input Types** | Auto Suggestion, Button, Card, Date & Time, Geo Location, Media Upload, Star Rating, Text | | **Flow Control** | End, Language, No Input, Redirect | | **Integrations** | API Call, Channel, Custom Code, Trigger | | **Handoff** | Live Chat | The Gambit Types palette on the left of the builder, with its Gambits and Tools tabs, the search field, and the AI Agents, Input Types, Flow Control, and Integrations categories expanded The **Tools** tab lists the built-in **Knowledge Retrieval** tool, **CodeKit**, and your connected toolkits. Dragging one onto the builder adds it as a tool gambit. The **Connect more tools** link at the bottom opens the Tools section. ## The toolbar The bar above the builder holds the flow-level controls. Hold the pointer over an icon to see its name. | Control | What it does | | -------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | | Agent name | Select the pencil to rename the agent in place. | | Gambit count | Shows how many gambits the flow has. | | Environment chip | Shows **Live**, **Draft**, or **Not published**, and switches between drafts. See [Drafts and publishing](/docs/guides/building/drafts-and-publishing). | | Undo and redo | Step backward and forward through builder edits. Cmd+Z or Ctrl+Z undoes. Cmd+Shift+Z, Ctrl+Shift+Z, or Ctrl+Y redoes. | | **Fit to view** | Zooms the whole flow into the window. | | **Lock gambit positions** | Locks the layout so nothing moves by accident. | | Zoom out, readout, zoom in | Zoom controls with the current percentage between them. | | **Import / Export flow** | Opens a dialog that moves the flow in and out as JSON. | | **Add notes** | Places notes on the builder. Notes never affect the running agent. | | **Toggle minimap** | Shows or hides a minimap for navigating large flows. | | **Search gambits** | Opens the command palette. Cmd+F or Ctrl+F opens it too. | | **Validate** | Checks the flow and opens the **Problems** panel. See [Test your agent](/docs/guides/building/testing-your-agent). | | **Test** | Opens the **Test Mode** panel. | | **Versions & drafts** | Opens the drafts and versions panel. | | **Publish** | Opens the publish dialog. The label reads **Make live** while you edit a draft. | | **Open agent** | Opens the agent's chat in a new tab. The button reads **View draft** while you edit a draft. | ## The Configure screen The sidebar on the far left of the builder switches between the agent's pages. **Configure** holds the agent's settings on its own left rail. The sections are **General**, **Language**, **Notifications**, **Voice & Audio**, **Goals & Behavior**, and **Debug**. The Configure screen on its General section, with the Settings list on the left and the Name, Description, and Require Data Consent fields beside it Other pages send you here by section name. **General** names the agent and turns on the consent message. The rest are covered in [Build a multi-language agent](/docs/guides/building/languages), [Agent email notifications](/docs/guides/building/agent-email-notifications), and [Define and track goals](/docs/guides/analytics/goals). ## Test your flow **Test** in the toolbar opens the **Test Mode** panel on the right. **Run** starts a conversation against the flow you are editing, without touching the live agent. See [Test your agent](/docs/guides/building/testing-your-agent) for the run controls, variable overrides, and the **Event Log**. ## Work faster * Select multiple gambits to get a floating bar with the count, **Duplicate**, and **Delete**. Deleting asks you to confirm first. * The command palette runs builder actions such as validate, test, and history, and jumps to any gambit by name. * **Search Canvas** in the command palette opens a **Search nodes...** box on the builder. It counts matches, such as **2 of 5**. Enter moves to the next match, Shift+Enter to the previous one, and Esc closes the box. * Collapse the palette into its icon rail when you need more room. You can still drag gambits from the icons. ## Verify Run a conversation in the **Test Mode** panel. The run highlights the active edge, keeps visited edges lit, and dims the rest of the flow. ## Related pages * [Create an agent](/docs/guides/building/create-an-agent) * [Flow control and branching](/docs/guides/building/flow-control-and-branching) * [Drafts and publishing](/docs/guides/building/drafts-and-publishing) * [Test your agent](/docs/guides/building/testing-your-agent)