Embed SDK is available only to paid plans.

​
Overview

Our Embed SDK lets you interact with TeamAI chatbots embedded on your web pages. It provides methods to update context and retrieve current context, giving you full control over your embedded chatbots.

If you embedded your chatbot before September 29, 2024, you may need to update the embed code on your website. The new embed code now includes the Embed SDK automatically.

To use the Embed SDK, ensure that you have the correct assistant ID and the appropriate plan.

​
Methods

​
Initialize Embed SDK

The SDK automatically initializes when the chatbot is embedded on your page. You don’t need to call an explicit init function.

​
Get Chatbot Instance

Retrieves an instance of the chatbot for interaction.

const chatbotInstance = tai.getInstance("YOUR_ASSISTANT_ID");
​
assistantId
string
required

The unique identifier for your chatbot instance.

This method returns a chatbot instance that you can use to interact with your embedded chatbot.

​
Wait for Chatbot Ready State

window.addEventListener("teamAIChatbotReady", function () {
  const chatbotInstance = tai.getInstance("YOUR_ASSISTANT_ID");
  // Your code here
});

​
Update Chatbot Context

Updates the context for your chatbot.

chatbotInstance.updateContext({ userEmail: "user@example.com" });
​
newContext
object
required

The new context data to update the chatbot with.

This method allows you to update the context for the chatbot dynamically. You can use these context variables in your assistant’s instructions like so: {{userEmail}}.

​
Get Chatbot Context

Retrieves the current context of the chatbot.

const currentContext = chatbotInstance.getContext();

This method returns the current context of the chatbot.

​
Register Client-side Tools

Register custom tools that your chatbot can execute on the client side. This allows your chatbot to interact with the user’s browser environment.

chatbotInstance.registerTool({
  name: "getCurrentTime",
  description: "Gets the current time in the user's timezone",
  parameters: {
    format: {
      type: "string",
      description: "Format to display the time (optional)"
    }
  },
  execute: (params) => {
    const now = new Date();
    return {
      time: now.toLocaleTimeString(),
      timezone: Intl.DateTimeFormat().resolvedOptions().timeZone
    };
  }
});
​
tool
object
required
​
name
string
required

The name of the tool, which the chatbot will use to call it.

​
description
string
required

A description of what the tool does.

​
parameters
object
required

The parameters the tool accepts (similar to OpenAI function schema).

​
execute
function
required

A function that will be called when the chatbot uses this tool. It receives the parameters provided by the chatbot and should return a result.

​
Unregister Client-side Tools

Remove a previously registered client-side tool.

chatbotInstance.unregisterTool("getCurrentTime");
​
toolName
string
required

The name of the tool to unregister.

​
Get Registered Tools

Retrieve a list of all currently registered client-side tools.

const registeredTools = chatbotInstance.getRegisteredTools();

​
Upload Data

Uploads a file (e.g., a CSV or text file) to your chatbot so you can query that data directly within the conversation. Once uploaded, the chatbot will have immediate access to the file contents. If you attempt to upload the same file again, the SDK will detect a matching file fingerprint and re-use the previous upload — so you won’t need to re-upload duplicates.

chatbotInstance.uploadBlob(myFile: Blob): Promise<UploadResponse>;
​
myFile
Blob
required
A Blob or File object. Currently, only CSV-formatted files are supported.

​
Example: Updating Context

In this example, we’re setting up the chatbot and updating the context with the user’s email and name.

Example: Updating Context

window.addEventListener("teamAIChatbotReady", function () {
  console.log('The TeamAI Chatbot is ready!');

  const chatbotInstance = tai.getInstance("YOUR_ASSISTANT_ID");

  // Update context with user's email and name
  chatbotInstance.updateContext({
    "userEmail": "user@example.com",
    "userName": "John Doe"
  });
});

This example demonstrates how to set up the chatbot, log its readiness, and update its context programmatically.

​
Example: Chat with a CSV or Excel file

Upload your CSV file to let your chatbot parse and answer questions about it.

// Create CSV content on the fly (or fetch from server)
const csvContent = `name,age,city
John Smith,32,New York
Sarah Johnson,28,San Francisco`;

// Convert CSV string to a File object
const csvFile = new File([csvContent], "dummy.csv", { type: "text/csv" });

// Upload the file so the chatbot can access it
chatbotInstance.uploadBlob(csvFile)
  .then(uploadResponse => {
    console.log("Upload successful:", uploadResponse);
    // After upload, you can instruct your chatbot:
    chatbotInstance.sendMessage("Hi, please analyze the CSV data you just received.");
  })
  .catch(error => {
    console.error("Upload failed:", error);
  });

​
Example: Add Client-side Tools

This example shows how to register client-side tools that allow your chatbot to interact with the user’s browser.

window.addEventListener("teamAIChatbotReady", function () {
  const chatbotInstance = tai.getInstance("YOUR_ASSISTANT_ID");

  // Register a tool to get user's location (with permission)
  chatbotInstance.registerTool({
    name: "getUserLocation",
    description: "Gets the user's current location (requires permission)",
    parameters: {},
    execute: async () => {
      return new Promise((resolve, reject) => {
        if (!navigator.geolocation) {
          reject({ error: "Geolocation not supported by this browser" });
          return;
        }

        navigator.geolocation.getCurrentPosition(
          (position) => {
            resolve({
              latitude: position.coords.latitude,
              longitude: position.coords.longitude,
              accuracy: position.coords.accuracy
            });
          },
          (error) => {
            reject({ error: error.message });
          }
        );
      });
    }
  });

  // Register a tool to get data from your application
  chatbotInstance.registerTool({
    name: "getProductDetails",
    description: "Gets details about a product by ID",
    parameters: {
      productId: {
        type: "string",
        description: "The ID of the product to look up"
      }
    },
    execute: async (params) => {
      try {
        // This is where you would call your API or access your app state
        const response = await fetch(`/api/products/${params.productId}`);
        const product = await response.json();
        return product;
      } catch (error) {
        return { error: "Failed to fetch product details" };
      }
    }
  });

  // Let the chatbot know it can use these tools
  chatbotInstance.sendMessage("Hi, I'm ready to help with product information or location-based services.");
});

​
Debug Mode

To enable debug mode in TeamAI, add ?teamAIDebug=true to your app’s URL.

For example, if you’ve embedded your TeamAI instance in your app hosted at https://example.com, you can activate debug mode by changing the URL to:

https://example.com?teamAIDebug=true

After adding this parameter, refresh the page and open your browser’s developer console (usually by pressing F12 or right-clicking and selecting “Inspect” then navigating to the “Console” tab).

Was this page helpful?