> ## Documentation Index > Fetch the complete documentation index at: https://docs.mindset.ai/llms.txt > Use this file to discover all available pages before exploring further. # Agent Builder SDK Complete Integration Guide > Embed agent-building capabilities directly into your platform. ## What is the Agent Builder SDK? Agent Builder SDK lets your tenants create, build, and manage custom AI agents directly inside your application — without you building the UI or managing hundreds of custom agent requests. Embed pre-built components that give your customers the power to create, configure, and manage their own agents in minutes. The Agent Builder SDK is a premium feature that enables you to embed agent-building capabilities directly into your product. ## Currently Available Components **Agent Management:** * Agent Builder (``) — List and manage AI agents * Agent Configuration (``) — Create and edit individual agents **Knowledge Context Management:** * Context Builder (``) — List and manage knowledge contexts * Context Configuration (``) — Create and edit individual contexts ## How It Works Load Mindset AI's JavaScript via a ` {/* 3. Initialize the SDK */} ``` ## Available Components **Tab Control Works for Both Component Types** The `displayTabs` attribute works identically for both Builder and Configuration components: * Builder components (``, ``) — Controls tabs in the built-in create/edit dialogs * Configuration components (``, ``) — Controls tabs in the standalone interface Use `displayTabs` to show only the tabs your tenants need, regardless of which component type you choose. ### 1. Agent Builder — `` Displays a list of all agents for the tenant with the ability to: * View all agents * Create new agents * Edit existing agents * Delete agents * Search and filter agents **Usage:** ```html theme={null} ``` **Optional Attributes:** | Attribute | Type | Description | | :------------ | :---------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `displayTabs` | string (optional) | Comma-separated list of tabs to display when creating or editing agents. Available tabs: Policy, Options, LLM, Contexts, Bias, Preview. Works the same as in ``. | **Examples:** ```html theme={null} {/* Show all default tabs */} {/* Show only specific tabs */} ``` This component provides the complete agent management interface, including list view and built-in create/edit dialogs. ### 2. Agent Configuration — `` Displays the agent creation or editing dialog for a single agent. This component is useful when you want to: * Embed agent creation/editing in a form * Control when and how the configuration interface appears * Build your own custom list view UI **Attributes:** | Attribute | Type | Description | | :--------------------------------- | :---------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `agentUid` | string (optional) | UID of agent to edit. If omitted, creates new agent | | `onClose` | string (optional) | JavaScript code to execute when configuration UI is dismissed | | `displayTabs` | string (optional) | Comma-separated list of tabs to display. Available tabs: Policy, Options, LLM, Contexts, Bias, Preview | | `hideBackButtonForAgentEditDialog` | string (optional) | Set to `"true"` to hide the Back button in the top-left of the configuration screen. Useful when embedding without the parent manager, where there is no previous screen to navigate back to. Omit or set to `"false"` to keep it visible (default). | **Usage Examples:** ```html theme={null} {/* Create new agent */} {/* Edit existing agent */} {/* With close handler */} {/* Show only specific tabs */} {/* Hide the Back button for standalone embeds */} ``` #### Agent Configuration Tabs The `` component displays multiple configuration tabs: **Always Displayed:** * Settings — Basic agent configuration (name, description, etc.) * Personality — Agent behavior and tone **`Optional Tabs (controlled via displayTabs):`** * Policy — Agent policies and guidelines * Options — Additional agent options * LLM — Language model configuration * Contexts — Knowledge base associations * Bias — Bias detection configuration * Preview — Agent preview **Controlling Tab Display:** ```html theme={null} {/* Display all tabs (default) */} {/* Display only required tabs (Settings, Personality) */} {/* Display specific optional tabs */} ``` Settings and Personality tabs are always displayed regardless of the `displayTabs` value. ### 3. Context Builder — `` Displays a list of all knowledge contexts for the tenant with the ability to: * View all contexts * Create new contexts * Edit existing contexts * Delete contexts * Search and filter contexts **Usage:** ```html theme={null} ``` **Optional Attributes:** | Attribute | Type | Description | | :------------ | :---------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `displayTabs` | string (optional) | Comma-separated list of tabs to display when creating or editing contexts. Available tabs: Prompts, Bias. Works the same as in ``. | **Examples:** ```html theme={null} {/* Show all default tabs */} {/* Show only specific tabs */} ``` This component provides the complete context management interface including list view and built-in create/edit dialogs. **Note on Synced Contexts** The Context Builder SDK does not allow tenants to create synced contexts directly. However, if an application administrator creates a synced context for a specific tenant using the Contexts API, that synced context will be visible to the tenant in the builder. #### What are Knowledge Contexts? Knowledge Contexts are bundles of files, links, and data that agents can reference — essentially a dynamic library for your agents. * Contexts — Documents, articles, and structured knowledge * Custom Prompts — Instructions that guide the AI's responses * Bias — Overview of bias within your Contexts ### 4. Context Configuration — `` Displays the context creation or editing dialog for a single knowledge context. This component is useful when you want to: * Embed context creation/editing in a form * Build your own custom list view UI **Attributes:** | Attribute | Type | Description | | :----------------------------------- | :---------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `contextUid` | string (optional) | UID of context to edit. If omitted, creates new context | | `onClose` | string (optional) | JavaScript code to execute when dialog closes | | `displayTabs` | string (optional) | Comma-separated list of tabs to display. Available tabs: Prompts, Bias | | `hideBackButtonForContextEditDialog` | string (optional) | Set to `"true"` to hide the Back button in the top-left of the configuration screen. Useful when embedding without the parent manager, where there is no previous screen to navigate back to. Omit or set to `"false"` to keep it visible (default). | **Usage Examples:** ```html theme={null} {/* Create new context */} {/* Edit existing context */} {/* With close handler */} {/* Show only specific tabs */} {/* Hide the Back button for standalone embeds */} ``` The Back button is always visible on the manager components (``, ``). The `hideBackButton...` attributes only apply to the standalone configuration components, since users need the Back button to return to the list view. #### Context Configuration Tabs The `` component displays configuration tabs: **Always Displayed:** * General — Basic context information (name, description, type) **`Optional Tabs (controlled via displayTabs):`** * Prompts — Custom system prompts and instructions * Bias — Allows you to analyze the bias within your content **Controlling Tab Display:** ```html theme={null} {/* Display all tabs (default) */} {/* Display specific tabs */} ``` ## Integration Patterns ### Pattern 1: Builder Components Only (Recommended) Use builder components for a complete, zero-configuration experience: ```html theme={null}

``` ### Pattern 2: Configuration Component Integration Use configuration components in forms if you want to create your own list view UI. ```javascript theme={null} function createAgent() { const container = document.getElementById('agent-config-container'); container.innerHTML = ''; document.getElementById('agent-modal').style.display = 'block'; } function editAgent(agentUid) { const container = document.getElementById('agent-config-container'); container.innerHTML = ``; document.getElementById('agent-modal').style.display = 'block'; } function closeAgentModal() { document.getElementById('agent-modal').style.display = 'none'; document.getElementById('agent-config-container').innerHTML = ''; } ``` ## Shadow DOM Support The Agent Builder SDK supports Shadow DOM encapsulation, allowing you to embed admin widgets with proper style isolation. This is useful when integrating into applications that use Shadow DOM for component encapsulation. ### Basic Setup Pass an optional `shadowRoot` parameter to `window.mindset.init()`. You can provide either a direct reference or a function getter: ```javascript theme={null} // Option 1: Direct reference (simple cases where shadow root is stable) const shadowRoot = document.getElementById('my-container').shadowRoot; await window.mindset.init({ fetchAuthentication: () => getAuthToken(), appUid: 'your-app-uid', externalTenantId: 'your-tenant-id', shadowRoot: shadowRoot }); // Option 2: Function getter (recommended — always returns the latest reference) await window.mindset.init({ fetchAuthentication: () => getAuthToken(), appUid: 'your-app-uid', externalTenantId: 'your-tenant-id', shadowRoot: () => document.getElementById('my-container').shadowRoot }); ``` | Approach | When to use | | --------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- | | **Direct reference** | The shadow root is created once and never destroyed during the application lifecycle | | **Function getter (recommended)** | The shadow root may be destroyed and recreated during navigation or dynamic UI updates (e.g., SPA route changes, conditional rendering) | When `shadowRoot` is a function, the SDK calls it each time it needs to access the shadow root, ensuring it always has the latest valid reference. This prevents stale reference errors that can occur when a shadow root is destroyed and recreated while the SDK holds an old reference. ### How It Works When you provide the `shadowRoot` parameter, the SDK: 1. **Resolves function getters** — Calls the function to obtain the current shadow root each time access is needed 2. **Scopes element detection** — Restricts its MutationObserver to detect widgets only within that boundary 3. **Provides style isolation** — Prevents conflicts between your host application and admin widgets ### Backward Compatibility The `shadowRoot` parameter is optional. If not provided, the SDK operates in standard DOM mode without any changes needed: ```javascript theme={null} // Standard DOM mode (no Shadow DOM) document.body.innerHTML += ''; await window.mindset.init({ fetchAuthentication: getAuthToken, appUid: 'your-app-uid', externalTenantId: 'your-tenant-id' // No shadowRoot parameter — works as before }); ``` ### Technical Details **Element Detection:** * With Shadow DOM: `shadowRoot.querySelectorAll(selector)` * Without Shadow DOM: `document.querySelectorAll(selector)` **MutationObserver Scope:** * With Shadow DOM: Observes `shadowRoot` with `{ childList: true, subtree: true }` * Without Shadow DOM: Observes `document.body` with `{ childList: true, subtree: true }` ## Appendix: Complete Component Reference ### Agent Components **``** | Feature | Details | | :--------- | :---------------------------------- | | Purpose | Complete agent management interface | | Includes | List view, create, edit, delete | | Attributes | `displayTabs` (optional) | | Min Height | 600px | **``** | Feature | Details | | :---------------- | :------------------------------------------------------------------------------------------------------------------- | | Purpose | Single agent create/edit interface | | Includes | Configuration dialog only | | Attributes | `agentUid` (optional), `onClose` (optional), `displayTabs` (optional), `hideBackButtonForAgentEditDialog` (optional) | | Available Tabs | Policy, Options, LLM, Contexts, Bias, Preview | | Always Shown Tabs | Settings, Personality | | Min Height | 400px | ### Context Components **``** | Feature | Details | | :--------- | :------------------------------------ | | Purpose | Complete context management interface | | Includes | List view, create, edit, delete | | Attributes | `displayTabs` (optional) | | Min Height | 600px | **``** | Feature | Details | | :---------------- | :----------------------------------------------------------------------------------------------------------------------- | | Purpose | Single context create/edit interface | | Includes | Configuration dialog only | | Attributes | `contextUid` (optional), `onClose` (optional), `displayTabs` (optional), `hideBackButtonForContextEditDialog` (optional) | | Available Tabs | Prompts, Bias | | Always Shown Tabs | General | | Min Height | 400px |