Integrate with the app

Alan AI offers two modes of integration, allowing you to seamlessly embed the AI agent into the app:

  • Alan AI Plugin: you can embed the AI agent button and chat UI without making any changes to the app itself. This mode is ideal for testing and proof-of-concept (POC) projects, enabling you to quickly assess the AI agent capabilities in a live environment.

  • Alan AI SDK: For a more seamless integration, you can use the Alan AI SDK. This involves a few simple steps and adding a few code snippets to the app.

Use case

You can start by using the Alan AI Plugin to quickly embed the AI agent into your app and test how it interacts with users. Once you are satisfied with the AI agent performance, you can move to a more integrated solution using the Alan AI SDK.

Prerequisites

To successfully follow this exercise, make sure you have signed up for Alan AI Studio and created a project for the AI agent. For details, see Sign up for Alan AI Studio.

Set up the Alan AI Plugin

To set up the Alan AI Plugin:

  1. Run the sample app used for this tutorial. When the app starts, notice the URL at which the app is launched, for example: http://localhost:4200/.

  2. In Google Chrome, go to the Alan AI Plugin page in the Chrome web store.

  3. On the plugin page, click Add to Chrome to install the plugin.

  4. In Alan AI Studio, at the top of the code editor, click Integrations.

  5. To the right of Browser plugin, click Configure.

  6. In the field, enter the URL of the app:

    ../../_images/plugin.png

  7. In the top right corner of the view, click Copy Application Code.

  8. In Google Chrome, go to the Browser Plugin page at alan.app.

  9. In the Application Code field, paste the copied code and click Apply.

    ../../_images/plugin-code.png

Validation

Refresh the app page to see the Alan AI agent button and chat added to the app. Now, you can interact with the AI agent and query static and dynamic corpuses:

../../_images/plugin-integrated.png

Use the Alan AI SDK

Note

Alan AI does not allow several button instances on the same web page. Before following this exercise, in the Browser Plugin page, click Delete next to the button code added as part of the exercise above.

To integrate with the app using the Alan AI SDK:

  1. In the sample app folder, run the following command to install the Alan AI SDK:

    Terminal
    npm install @alan-ai/alan-sdk-web --save

  2. To get the integration code snippets, in Alan AI Studio, at the top of the code editor, click Integrations, scroll down and in the Embed code example section, click the Angular tab.

    ../../_images/integration-code.png

  3. In the sample app, modify the src/app/app.component.ts file:

    1. At the top of the file, add the import statement for the Alan AI button:

      app.component.ts file
      import alanBtn from '@alan-ai/alan-sdk-web';

    2. Update the AppComponent: copy the code for the Alan AI button from the Integrations view:

      app.component.ts file
      export class AppComponent {

  alanBtnInstance;

  constructor(){
    this.alanBtnInstance = alanBtn({
      key: '8d9549c4edc01559753f233fc7dff7d62e956eca572e1d8b807a3e2338fdd0dc/stage',
      host: 'v1.alan.app',
      onCommand: (commandData: any) => {
        if (commandData.command === 'go:back') {
          //call client code that will react to the received command
        }
      },
    });
  }
}

  1. To the <head> section of src/index.html file, add a link to fonts used in the chat UI by default:

    index.html file
    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">

Validation

Run the app to see the Alan AI agent button and chat added to the app. Now, you can interact with the AI agent an query static and dynamic corpuses you have set up:

../../_images/plugin-integrated.png