m4Mindset docs
llms.txt

Mindset v3 / Deploy in your app / Integrate Agent Chat SDK 3

View as Markdown

Embed an agent in your application

Step-by-step guide for embedding a Mindset AI agent in your web application (frontend)

Quick Start

There are 3 steps to embed a Mindset AI agent in your application:

  1. Add the SDK Script

    Include the SDK script in your HTML:

    html
    <script src="MINDSET-SERVER-URL/mindset-sdk3.umd.js"></script>

    Replace MINDSET-SERVER-URL with the URL provided by Mindset AI.

  2. Add the Agent HTML Tag

    Place the <mindset-agent> tag where you want the chat interface to appear:

    html
    <mindset-agent 
    agentUid='YOUR-AGENT-UID'
    style='width: 100%; height: 600px; display: block; background-color: rgb(255, 255, 255); overflow: hidden; border-radius: 12px;'>
</mindset-agent>

    Replace YOUR-AGENT-UID with the Agent UID you want to embed.

  3. Initialize the SDK

    Call the mindset.init() method with your configuration:

    html
    <script>
   mindset.init({
    appUid: "YOUR-APP-UID",
    enableVoice: true
    })
</script>

    Replace YOUR-APP-UID with your application UID.

Getting Your Configuration Parameters

You can get your configuration parameters in two ways:

Option 1: Agent Management Studio Dashboard

Go to your Agent Management Studio dashboard and view your live agents. For each agent, you can display full deployment instructions with your specific configuration parameters already populated.

Option 2: Contact Mindset AI

Ask the Mindset AI team directly for these parameters:

MINDSET-SERVER-URLstringpathrequired

The SDK server URL configured for you by the Mindset AI team

YOUR-APP-UIDstringpathrequired

Your application UID provided by Mindset AI (often your company name)

YOUR-AGENT-UIDstringpathrequired

The UID of the agent you want users to chat with. Find this in the agent settings in the Agent Management Portal.

Authentication Methods

SDK 3.0 supports two authentication methods:

For agents using anonymous access, you'll need to whitelist the URLs where your agent will be embedded. Please contact your CS manager to help you do so.

Complete Example

html
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="MINDSET-SERVER-URL/mindset-sdk3.umd.js"></script>

        <script>
            mindset.init({
                appUid: "YOUR-APP-UID",
                enableVoice: true
            })
        </script>   
    </head>

    <body>
        <div class="main-container">
            <h1>Mindset Embedded Agent</h1>
        
            <mindset-agent 
                agentUid='YOUR-AGENT-UID'
                style='width: 100%; height: 600px; display: block; background-color: rgb(255, 255, 255); overflow: hidden; border-radius: 12px;'>
            </mindset-agent>
        </div> 
    </body>
</html>

For agents using authenticated access, provide a fetchAuthentication method that retrieves the auth token from your backend.

The fetchAuthentication Method

Set the fetchAuthentication parameter in mindset.init():

javascript
mindset.init({
    fetchAuthentication: getAuthToken,
    appUid: "YOUR-APP-UID",
    enableVoice: true
})

Sample Implementation

Here's an example getAuthToken method that fetches the token from your backend:

javascript
async function getAuthToken() {
    const userAuthTokenServerUrl = `YOUR-BACKEND-API-RETURNING-AUTHTOKEN`;
    // e.g. https://mycompany-backend/api/getusertoken

    try {
        const headers = {
            "accept": "application/json",
            "Content-Type": "application/json"
        };
        const response = await fetch(userAuthTokenServerUrl, {
            method: 'POST',
            headers: headers
        });
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        const responseData = await response.json();
        return responseData.authToken;
    } catch (error) {
        console.log('Error fetching auth token:', error);
        throw error;
    }
}

Complete Example

html
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="MINDSET-SERVER-URL/mindset-sdk3.umd.js"></script>

        <script>
            async function getAuthToken() {
                const userAuthTokenServerUrl = `YOUR-BACKEND-API-RETURNING-AUTHTOKEN`; 
                // e.g. https://mycompany-backend/api/getusertoken/${currentUserId}

                try {
                    const headers = {
                        "accept": "application/json",
                        "Content-Type": "application/json"
                    };
                    const response = await fetch(userAuthTokenServerUrl, {
                        method: 'POST',
                        headers: headers
                    });
                    if (!response.ok) {
                        throw new Error(`HTTP error! status: ${response.status}`);
                    }
                    const responseData = await response.json();
                    return responseData.authToken;
                } catch (error) {
                    console.log('Error fetching auth token:', error);
                    throw error;
                }
            }

            mindset.init({
                fetchAuthentication: getAuthToken, 
                appUid: "YOUR-APP-UID",
                enableVoice: true
            })
        </script>   
    </head>

    <body>
        <div class="main-container">
            <h1>Mindset Embedded Agent</h1>
        
            <mindset-agent 
                agentUid='YOUR-AGENT-UID'
                style='width: 100%; height: 600px; display: block; background-color: rgb(255, 255, 255); overflow: hidden; border-radius: 12px;'>
            </mindset-agent>
        </div> 
    </body>
</html>

Shadow DOM Support

If you're rendering the agent inside a Shadow DOM (commonly used in web components for style encapsulation), you need to explicitly pass the agent element to the mindset.init() method.

For Standard Agent Embedding

When using <mindset-agent> inside Shadow DOM:

javascript
const agentElement = shadowRoot.querySelector('mindset-agent');

await window.mindset.init({
  appUid: "YOUR-APP-UID",
  element: agentElement  // Pass your Shadow DOM element
});

For Dynamic Views (Container Mode)

When using <mindset-container> for dynamic agent switching inside Shadow DOM:

javascript
const containerElement = shadowRoot.querySelector('mindset-container');

await window.mindset.init({
  appUid: "YOUR-APP-UID",
  fetchAuthentication: yourAuthFunction,
  container: containerElement  // Use container parameter for dynamic views
});

Customization Options

Customize UI Colors

The agent UI includes a default theme color palette, but you can customize it by passing a theme parameter to mindset.init().

Agent UI Color Theme

Learn how to customize colors, gradients, and visual styling

Customize Fonts

The agent UI includes a default font, but you can customize it by passing a customFontTheme parameter to mindset.init().

Agent Fonts Customization

Learn how to apply custom fonts to your agent interface

Flexible Agent UI

The <mindset-agent> tag can be wrapped in any <div> element on your page. For a more flexible UI that remains visible without being intrusive, enable Flexible Agent UI mode.

Flexible Agent UI

Learn how to create floating, expandable agent interfaces