Skip to main content

Deployment Options for AI Studio Agents

AI Studio agents can be deployed across multiple channels to maximize accessibility and user engagement. This guide outlines the available deployment options, including detailed instructions, benefits, prerequisites, setup steps, and configuration examples for each method.

Table of Contents​

Overview​

AI Studio agents can be integrated into your digital ecosystem using several deployment methods. Choose the option that best fits your users' needs and your technical environment.

1. Web Chat​

Benefits​

  • Quick integration with web applications and portals.
  • Real-time, interactive user experience.
  • No need for users to install additional software.

Prerequisites​

  • Access to your AI Studio agent's API endpoint or deployment URL.
  • Permission to embed JavaScript in your web application.

Setup Steps​

  1. Obtain the Web Chat Embed Code
    In AI Studio, navigate to your agent's deployment settings and copy the provided Web Chat embed code.

  2. Embed in Your Web Application
    Paste the embed code into the HTML of your website where you want the chat to appear.

  3. Configure Appearance and Behavior (Optional)
    Customize the chat widget's style, position, and behavior using configuration options.

Configuration​

A typical embed code looks like:

<!-- AI Studio Web Chat Widget -->
<script src="https://cdn.beak.ai/ai-studio-webchat.js"></script>
<script>
  window.AIStudioWebChat.init({
    agentId: 'YOUR_AGENT_ID',
    apiBaseUrl: 'https://api.beak.ai/agents',
    theme: 'light', // or 'dark'
    position: 'bottom-right',
    welcomeMessage: 'Hi! How can I help you today?',
    // ...other options
  });
</script>

Configuration Options:

OptionDescriptionExample Value
agentIdYour AI Studio agent's unique ID"12345-abcde"
apiBaseUrlAPI endpoint for agent communication"https://api.beak.ai/agents"
themeWidget theme"light" or "dark"
positionWidget position on the page"bottom-right"
welcomeMessageInitial message shown to users"Hello!"

Example​

Add the following to your website's <body>:

<!-- Place this at the end of your body tag -->
<script src="https://cdn.beak.ai/ai-studio-webchat.js"></script>
<script>
  window.AIStudioWebChat.init({
    agentId: '12345-abcde',
    apiBaseUrl: 'https://api.beak.ai/agents',
    theme: 'dark',
    position: 'bottom-right',
    welcomeMessage: 'Welcome to Beak AI Studio!',
  });
</script>

2. Microsoft Teams App​

Benefits​

  • Seamless integration with Microsoft Teams for enterprise users.
  • Enables collaboration and agent access within team channels and chats.
  • Supports Teams authentication and security policies.

Prerequisites​

  • Microsoft Teams admin access to register and configure custom apps.
  • AI Studio agent with Teams channel enabled.
  • Azure AD app registration (for authentication, if required).

Setup Steps​

  1. Enable Teams Channel in AI Studio
    In your agent's deployment settings, enable the Microsoft Teams channel and note the Bot/Agent endpoint.

  2. Register a Bot in Azure Portal

    • Go to Azure Portal.
    • Register a new Bot Channels Registration.
    • Set the messaging endpoint to your agent's endpoint.

  3. Configure Teams App Manifest

    • Download or create a Teams app manifest (manifest.json).
    • Set the bot ID, endpoints, and permissions.

  4. Upload App to Teams

    • In Teams, go to "Apps" > "Upload a custom app".
    • Upload your manifest package (including icons).

  5. Test and Publish

    • Add the bot to a team or chat.
    • Test interactions and adjust configuration as needed.

Configuration​

Sample manifest.json:

{
  "manifestVersion": "1.0",
  "version": "1.0.0",
  "id": "YOUR-BOT-ID",
  "packageName": "com.beak.ai.agent",
  "name": {
    "short": "Beak AI Agent",
    "full": "Beak AI Studio Agent"
  },
  "description": {
    "short": "AI Studio agent for Teams",
    "full": "Interact with your Beak AI Studio agent directly in Microsoft Teams."
  },
  "bots": [
    {
      "botId": "YOUR-BOT-ID",
      "scopes": ["team", "personal"],
      "supportsFiles": false,
      "isNotificationOnly": false
    }
  ],
  "icons": {
    "outline": "outline-icon.png",
    "color": "color-icon.png"
  },
  "permissions": ["identity", "messageTeamMembers"]
}

Key Configuration Details:

  • botId: The Azure Bot registration ID.
  • messagingEndpoint: Should point to your agent's endpoint.
  • permissions: Adjust as needed for your use case.

Example​

Quick Start:

  1. Enable Teams channel in AI Studio.
  2. Register bot in Azure with your agent's endpoint.
  3. Download and edit the manifest as above.
  4. Upload to Teams and start chatting with your agent.

3. Browser-based Chat Widget or Application​

Benefits​

  • Full control over UI/UX and integration with your web app.
  • Can be embedded as a widget or built as a standalone chat application.
  • Supports advanced customization and branding.

Prerequisites​

  • Access to your agent's API endpoint.
  • Web development experience (HTML, JS, CSS).

Setup Steps​

  1. Choose Integration Method

    • Use the provided JavaScript SDK/widget.
    • Or, build a custom chat UI using the agent's REST API.

  2. Install or Import SDK (Optional)

    • Use CDN or npm/yarn to add the SDK to your project.

  3. Initialize and Configure the Widget or App

    • Set agent ID, API endpoint, and UI options.

  4. Handle Authentication (If Required)

    • Implement user authentication if your agent requires it.

  5. Test and Deploy

    • Verify chat functionality and deploy to production.

Configuration​

Using the JavaScript SDK:

<script src="https://cdn.beak.ai/ai-studio-webchat.js"></script>
<script>
  window.AIStudioWebChat.init({
    agentId: 'YOUR_AGENT_ID',
    apiBaseUrl: 'https://api.beak.ai/agents',
    theme: 'light',
    // ...other options
  });
</script>

Building a Custom Chat App:

// Example: Sending a message to the agent API
fetch('https://api.beak.ai/agents/YOUR_AGENT_ID/message', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ message: 'Hello, agent!' })
})
  .then(res => res.json())
  .then(data => {
    // Handle agent response
    console.log(data.reply);
  });

Example​

Minimal Custom Widget Example:

<div id="chat"></div>
<script>
  async function sendMessage(msg) {
    const res = await fetch('https://api.beak.ai/agents/YOUR_AGENT_ID/message', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ message: msg })
    });
    const data = await res.json();
    document.getElementById('chat').innerHTML += `<div>User: ${msg}</div><div>Agent: ${data.reply}</div>`;
  }
  // Example usage:
  sendMessage('Hello!');
</script>

Additional Notes​

  • For advanced use cases, refer to the AI Studio API documentation.
  • Ensure CORS is enabled on your agent's API endpoint for browser-based integrations.
  • For security, never expose sensitive keys or credentials in client-side code.