Mike Browser Integration

Learn how to integrate the Mike Browser client into your web application

Installation

Add the Mike client script to your HTML document:

var script = document.createElement("script");
script.src = "https://api.prod.centralus.az.sindarin.tech/PersonaClientPublicV2?apikey=<YOUR_11X_KEY>";
script.onload = () => {
  var personaClient = new window.PersonaClient.default("<YOUR_11X_KEY>");
  // ... initialize, etc
};
document.head.appendChild(script);

Configuration

Configure your agent with the following options:

const config = {
  userId: "admin", // optional (or "user_" + Date.now() to generate a unique user ID)
  personaId: "<YOUR_MIKE_ID>", // required
  details: { firstName: "John" }, // optional; arbitrary data that 11x can inject into your agent with {{details.x}}
}

Basic Usage

Initialize Chat

Start a chat session with your configured agent:

const handleStartChatButtonClick = async () => {
  // Example config using a agent defined in the Playground
  const config = {
    userId: "admin",
    personaName: "John",
    options: {
      debugMode: true,
      streamTranscripts: true,
      shouldNotSaveConversation: true,
    },
  };

  try {
    await personaClient.init(config);
    configurePersonaEvents();
  } catch (error) {
    console.log(error);
  }
};

Control Chat Session

Manage the chat session with these methods:

// Pause the chat
const handlePauseChatButtonClick = async () => {
  try {
    await personaClient.pause();
  } catch (error) {
    console.log(error);
  }
};

// Resume the chat
const handleResumeChatButtonClick = async () => {
  try {
    await personaClient.resume();
  } catch (error) {
    console.log(error);
  }
};

// End the chat
const handleStopChatButtonClick = async () => {
  try {
    await personaClient.end();
  } catch (error) {
    console.log(error);
  }
};

Event Handling

Configure event listeners to respond to agent updates:

const configurePersonaEvents = () => {
  // Listen for message updates
  personaClient.on("messages_update", (messages) => {
    console.log(messages);
  });

  // Listen for state updates
  personaClient.on("state_updated", (newState) => {
    console.log(newState);
  });

  // Listen for actions
  personaClient.on("action", (action) => {
    console.log(action);
  });
};

Next Steps

After integrating the Mike Browser client, you can customize the user interface, add additional event handlers, and implement business logic specific to your application.