Saltar al contenido principal

Opciones de Implementación para Agentes de AI Studio

Los agentes de AI Studio pueden implementarse en múltiples canales para maximizar la accesibilidad y el compromiso de los usuarios. Esta guía describe las opciones de implementación disponibles, incluyendo instrucciones detalladas, beneficios, requisitos previos, pasos de configuración y ejemplos de configuración para cada método.

Tabla de Contenidos​

Descripción General​

Los agentes de AI Studio pueden integrarse en su ecosistema digital mediante varios métodos de implementación. Elija la opción que mejor se adapte a las necesidades de sus usuarios y a su entorno técnico.

1. Chat Web​

Beneficios​

  • Integración rápida con aplicaciones web y portales.
  • Experiencia de usuario interactiva en tiempo real.
  • No es necesario que los usuarios instalen software adicional.

Requisitos Previos​

  • Acceso al endpoint de API o URL de implementación de su agente de AI Studio.
  • Permiso para incrustar JavaScript en su aplicación web.

Pasos de Configuración​

  1. Obtener el Código de Incrustación del Chat Web
    En AI Studio, navegue hasta la configuración de implementación de su agente y copie el código de incrustación del Chat Web proporcionado.

  2. Incrustar en su Aplicación Web
    Pegue el código de incrustación en el HTML de su sitio web donde desea que aparezca el chat.

  3. Configurar Apariencia y Comportamiento (Opcional)
    Personalice el estilo, la posición y el comportamiento del widget de chat usando las opciones de configuración.

Configuración​

Un código de incrustación típico tiene el siguiente aspecto:

<!-- 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>

Opciones de Configuración:

OpciónDescripciónValor de Ejemplo
agentIdID único de su agente de AI Studio"12345-abcde"
apiBaseUrlEndpoint de API para la comunicación con el agente"https://api.beak.ai/agents"
themeTema del widget"light" o "dark"
positionPosición del widget en la página"bottom-right"
welcomeMessageMensaje inicial que se muestra a los usuarios"Hello!"

Ejemplo​

Agregue lo siguiente a la etiqueta <body> de su sitio web:

<!-- 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. Aplicación de Microsoft Teams​

Beneficios​

  • Integración fluida con Microsoft Teams para usuarios empresariales.
  • Permite la colaboración y el acceso al agente dentro de canales y chats de equipo.
  • Compatible con las políticas de autenticación y seguridad de Teams.

Requisitos Previos​

  • Acceso de administrador a Microsoft Teams para registrar y configurar aplicaciones personalizadas.
  • Agente de AI Studio con el canal de Teams habilitado.
  • Registro de aplicación en Azure AD (para autenticación, si es necesario).

Pasos de Configuración​

  1. Habilitar el Canal de Teams en AI Studio
    En la configuración de implementación de su agente, habilite el canal de Microsoft Teams y anote el endpoint del Bot/Agente.

  2. Registrar un Bot en el Portal de Azure

    • Vaya al Portal de Azure.
    • Registre un nuevo Bot Channels Registration.
    • Establezca el endpoint de mensajería como el endpoint de su agente.

  3. Configurar el Manifiesto de la Aplicación de Teams

    • Descargue o cree un manifiesto de aplicación de Teams (manifest.json).
    • Establezca el ID del bot, los endpoints y los permisos.

  4. Subir la Aplicación a Teams

    • En Teams, vaya a "Apps" > "Upload a custom app".
    • Suba su paquete de manifiesto (incluyendo los iconos).

  5. Probar y Publicar

    • Agregue el bot a un equipo o chat.
    • Pruebe las interacciones y ajuste la configuración según sea necesario.

Configuración​

Ejemplo de 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"]
}

Detalles Clave de Configuración:

  • botId: El ID de registro del Bot de Azure.
  • messagingEndpoint: Debe apuntar al endpoint de su agente.
  • permissions: Ajuste según sea necesario para su caso de uso.

Ejemplo​

Inicio Rápido:

  1. Habilite el canal de Teams en AI Studio.
  2. Registre el bot en Azure con el endpoint de su agente.
  3. Descargue y edite el manifiesto como se indica anteriormente.
  4. Súbalo a Teams y comience a chatear con su agente.

3. Widget de Chat o Aplicación Basada en Navegador​

Beneficios​

  • Control total sobre la interfaz/experiencia de usuario y la integración con su aplicación web.
  • Puede incrustarse como widget o construirse como una aplicación de chat independiente.
  • Compatible con personalización avanzada y marca corporativa.

Requisitos Previos​

  • Acceso al endpoint de API de su agente.
  • Experiencia en desarrollo web (HTML, JS, CSS).

Pasos de Configuración​

  1. Elegir el Método de Integración

    • Use el SDK/widget de JavaScript proporcionado.
    • O bien, construya una interfaz de chat personalizada utilizando la API REST del agente.

  2. Instalar o Importar el SDK (Opcional)

    • Use CDN o npm/yarn para agregar el SDK a su proyecto.

  3. Inicializar y Configurar el Widget o la Aplicación

    • Establezca el ID del agente, el endpoint de API y las opciones de interfaz.

  4. Gestionar la Autenticación (Si es Necesario)

    • Implemente la autenticación de usuarios si su agente lo requiere.

  5. Probar e Implementar

    • Verifique la funcionalidad del chat e impleméntelo en producción.

Configuración​

Usando el SDK de JavaScript:

<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>

Construyendo una Aplicación de Chat Personalizada:

// 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);
  });

Ejemplo​

Ejemplo Mínimo de Widget Personalizado:

<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>

Notas Adicionales​

  • Para casos de uso avanzados, consulte la documentación de la API de AI Studio.
  • Asegúrese de que CORS esté habilitado en el endpoint de API de su agente para integraciones basadas en navegador.
  • Por seguridad, nunca exponga claves sensibles o credenciales en el código del lado del cliente.