Integrate with the app

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

  • Alan AI Browser Plugin: you can embed the Agentic Interface button and Agentic Interface 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 Agentic Interface 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 Browser Plugin to quickly embed the Agentic Interface into your app and test how it interacts with users. Once you are satisfied with the Agentic Interface 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 Agentic Interface. For details, see Sign up for Alan AI Studio.

Set up the Alan AI Browser Plugin

To set up the Alan AI Browser 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 Browser 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 Agentic Interface button added to the app. Now, you can interact with the Agentic Interface 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 agentic interface:

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

    2. Update the AppComponent: copy the code for the Alan AI agentic interface 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 Agentic Interface 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 Agentic Interface button added to the app. Now, you can interact with the Agentic Interface an query static and dynamic corpuses you have set up:

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