# Agent Builder SDK Playground: Step-by-Step Guide

> You're reading the Mindset v3 documentation. v3 is no longer sold; this is reference for existing customers. Mindset 4 docs are at /docs.

Agent Builder SDK Playground

The Agent Builder SDK Playground lets you preview and configure embeddable UI components that your tenants can use to build agents and contexts. You can generate integration code, customize themes, and test components before embedding them in your platform.

> **Info:** The Agent Builder SDK is a premium feature that enables you to embed agent-building capabilities directly into your product.

The Agent Builder SDK lets you embed components that enable your tenants to build and manage their own agents and knowledge contexts—directly inside your platform. This guide walks you through:

### 1. Preview and Configure Components

Use the playground to see how components look and work

### 2. Customize Appearance

Match your brand with theme settings

### 3. Generate Integration Code

Copy ready-to-use code for your platform

### 4. Understand Deployment

Learn how agents get deployed to end-users

- **Part 1: Enable Agent Creation**: Enable tenants to create agents and contexts (covered in this guide)
- **Part 2: Deploy to End-Users**: Deploy those agents to end-users via Agent Sessions API

## Understanding the Components

Agent Builder SDK provides embeddable UI components for both agents and knowledge contexts. Each has two component types you can choose from.

#### Agent Components

**Agents** are autonomous units tailored to specific roles—think of them as subject matter experts that can perform tasks, make decisions, and use tools.

#### Agent Builder

`<mindset-agents-manager>`

- Complete list view of all agents
- Built-in create, edit, and delete functionality
- Search and filtering capabilities
- **Best for:** Complete out-of-box experience with minimal customization

#### Agent Configuration

`<mindset-agent-configuration>`

- Only the create/edit interface
- No list view included
- **Best for:** Building your own custom list view UI (tiles, cards, tables)

- [Learn More About Agents](https://docs4.mindset.ai/v3/build-optimize/guides/agents/howto-create-agents): Read the complete guide to creating agents

#### Context Components

**Knowledge Contexts** are bundles of files, links, and data that agents can reference—essentially a dynamic library for your agents.

#### Context Builder

`<mindset-contexts-manager>`

- Complete list view of all contexts
- Built-in create, edit, and delete functionality
- Search and filtering capabilities
- **Best for:** Complete out-of-box experience with minimal customization

#### Context Configuration

`<mindset-context-configuration>`

- Only the create/edit interface
- No list view included
- **Best for:** Building your own custom list view UI

- [Learn More About Contexts](https://docs4.mindset.ai/v3/build-optimize/guides/knowledge/choosing-data-for-your-agents): Read the complete guide to knowledge contexts

## How to Use the Playground

### Step 1: Access the Playground

Navigate to the Agent Builder SDK Playground in your Mindset AI application:

### 1. Open Developer Tools

Go to **Developer Tools** in your left sidebar

### 2. Select Agent Builder SDK Playground

Click **Agent Builder SDK Playground**

### 3. Launch

Click **Launch Playground** to open the preview environment

> **Info:** The playground helps you preview components, customize styling, and generate integration code before embedding them in your platform.

### Step 2: Initialize the SDK Components

The playground pre-populates your app credentials automatically:

- **App ID**: Your current app identifier
- **External Tenant ID**: A unique test tenant for your app

This test tenant keeps all your playground experiments separate from real tenant data, making it easy to filter out test objects later.

**To initialize:**

1. Select the components and tabs you want to display
2. Click **Initialize SDK Components**

### Step 3: Choose Your Component

Select which component you want to preview and configure.

#### For Agents

- **Agent Builder**: Complete list view + create/edit functionality
- **Agent Configuration**: Create/edit only (for custom list UI)

#### For Knowledge Contexts

- **Context Builder**: Complete list view + create/edit functionality
- **Context Configuration**: Create/edit only (for custom list UI)

### Step 4: Configure What Your Tenants See

Once you've chosen your component, customize which tabs and options appear to your tenants.

#### Agent Configuration

#### Default Tabs (Always Visible)

- **Settings:** Name, description, and purpose
- **Personality:** Tone of voice and brand attributes

#### Optional Tabs (Toggle On/Off)

- **Policy Rules:** Rules the agent must never break
- **Options:** Additional agent configuration options
- **LLM:** Language model settings and parameters
- **Contexts:** Which contexts this agent can access
- **Bias:** Guidance on how the agent should weigh information
- **Preview:** Test the agent before deploying

> **Tip:** Check the boxes for tabs you want tenants to access. Uncheck any tabs you want to hide.

#### Context Configuration

#### Default Tabs (Always Visible)

- **Settings:** Name, description, and content management
- **Content:** Upload files, add links, manage knowledge

#### Optional Tabs (Toggle On/Off)

- **Prompt:** Custom instructions for how agents use this context
- **Bias:** Guidance on information weighting or prioritization

> **Tip:** Check the boxes for tabs you want tenants to access. Uncheck any tabs you want to hide.

### Step 5: Customize Theme and Styling

Make the component match your brand by adjusting theme settings.

- **Theme Mode**: Light or dark
- **Seed Color**: Preset colors or custom hex value
- **Font**: Available fonts (defaults to Manrope)

> **Note:** The preview updates in real-time as you adjust settings.

### Step 6: Preview the Component

Test how the component works before generating integration code.

### 1. Click the Preview Tab

Switch to the preview interface

### 2. Interact as Your Tenants Would

- Create a test agent or context
- Navigate between tabs
- Test form inputs and actions

### Step 7: Generate Integration Code

Once you're satisfied with the configuration, grab the code to embed in your platform.

### 1. Open Integration Code

Click **Integration Code** at the top of the playground

### 2. Review the Code

Check the generated code snippet

### 3. Copy to Clipboard

Click **Copy Code**

### 4. Embed in Your Platform

Paste the code where you want the component to appear

## Understanding Tenant Isolation

### How externalTenantId Works

The `externalTenantId` parameter determines what tenants see in the embedded components:

- **Same externalTenantId**: Users see each other's agents and contexts in component list views
- **Different externalTenantId**: Users don't see each other's agents and contexts in component list views

**Example:**

```javascript
// Tenant A
externalTenantId: "company-acme-123"

// Tenant B  
externalTenantId: "company-techcorp-456"
```

In the Agent Builder SDK components, Tenant A and B will not see each other's agents or contexts.

> **Warning:** **Important Security Note**
>
> The `externalTenantId` filters what appears in the Builder and Configuration components. However, when creating agent sessions (deploying agents to end-users), you have flexibility to pair agents and contexts from different tenants.
>
> **This means your backend is responsible for enforcing proper tenant isolation** when creating agent sessions through the Agent Sessions API.

## What Happens Next: Deploying Agents to End-Users

After tenants create agents using these embedded components, you'll need to deploy those agents to end-users. This happens through the Agent Sessions API.

### What is an Agent Session?

An Agent Session couples:

- **Agent**: 1 tenant-created agent
- **Knowledge**: Contexts OR RAG MCP
- **Tools**: MCP server integrations
- **User**: 1 specific end-user (externalUserId)

### Knowledge Source Options

#### Option A: Contexts

- **Contexts**
  - Provision up to 30 contexts per agent session
  - Can be app-level, tenant-level, or mixed
  - Contexts are created via Contexts API or embedded Context components

#### Option B: RAG MCP

- **RAG MCP**
  - Provision exactly 1 RAG-type MCP per agent session
  - Cannot combine with contexts (mutually exclusive)

> **Warning:** You must choose **one** of these options for each agent session. You cannot combine contexts and RAG MCP.

### How Tenants Get Knowledge

#### Method 1: Tenant Uploads Their Own Files

- Tenant uses Context Builder or Context Configuration component
- Tenant creates contexts and manually uploads files
- You provision these tenant-level contexts in agent sessions

#### Method 2: You Provide App-Level Contexts

- You create app-level contexts via Contexts API
- You provision these to tenants through agent sessions
- Tenants don't need to upload anything

#### Method 3: You Create Tenant-Level Contexts on Their Behalf

- Use Contexts API with `externalTenantId` parameter
- Create contexts programmatically for specific tenants
- Option to set up synced ingestion (e.g., from Google Drive)

#### Method 4: RAG MCP

- Provision a RAG MCP instead of contexts
- Cannot be combined with contexts in the same session

### Adding Tool Integrations

Beyond knowledge sources, you can add tool integrations:

- **MCP Server Limits**
  - Up to **5 MCP servers total** per agent session (including RAG if used)
  - Add tools like Salesforce MCP, custom MCPs, etc.
  - **Example:** 1 RAG MCP + 4 Tools MCPs = 5 total

### Tagging Agent Sessions

> **Tip:** Add tags to agent sessions for reporting and filtering:
>
> - **Recommended:** Include `externalTenantId` as a tag
> - Helps identify which sessions belong to which tenants in your data

## Decision Framework

### Question 1: Do you want to use Mindset's list view UI or build your own?

- **Use Mindset's List View**: Embed Builder Components

  `<mindset-agents-manager>`

  `<mindset-contexts-manager>`
- **Build Your Own List View**: Embed Configuration Components

  `<mindset-agent-configuration>`

  `<mindset-context-configuration>`

### Question 2: Who provides the knowledge/context for agents?

#### Tenants Upload Their Own Files

Embed Context Builder or Context Configuration

#### You Provide Centrally

Create app-level contexts and upload files, don't embed context components

#### Mix of Both

Embed context components AND create app-level contexts

#### Use RAG MCP Instead

No contexts needed, provision RAG MCP in agent sessions

### Question 3: Do agents need tool integrations?

- **Yes**: Add tool MCPs when creating agent sessions (up to 5 total)
- **No**: Create agent sessions with only knowledge sources

## The Complete Flow

### 1. Part 1: Enable Agent Creation (This Guide)

- Configure components in the playground
- Embed components on your platform
- Tenants create and configure agents
- Optionally: Tenants create contexts and upload files

### 2. Part 2: Deploy to End-Users (Next Step)

- Use Agent Sessions API to couple agents with knowledge and tools
- Provision appropriate contexts or RAG MCP based on user permissions
- Embed agent chat SDK for end-users
- Tag sessions with externalTenantId for tracking

## Next Steps

- [Integration Guide](https://docs4.mindset.ai/v3/deploy/ams-sdk/ams-sdk-integration-guide): Review Agent Builder SDK Complete Integration Guide for technical implementation details
- [Agent Sessions API](https://docs4.mindset.ai/v3/deploy/api/agentsessions-api): Review Agent Sessions API documentation for deployment specifics
