Quickstart

Deploy your personalized AI chatbot in under 5 minutes

Two lines of code

We provide a white-glove service to help you deploy. Just reach out.

Add the following two lines of code to your HTML, Next.js, React, or any web framework of your choice.

  1. Script

Add the script to your app/

<script async src="https://appliedlabs.ai/cdn/applied-chat.umd.js"></script>

  1. Component

Add the component to the page or layout you want it displayed on

<applied-chat agent-id={agentId}/>

Setting user details

We aggregate conversations and tag based on the passed in user ID. Additionally, metadata fields name, email, phone are associated with the user in addition to the conversation.

<applied-chat 
  agent-id={agentId} 
  user-id={yourUserId}
  metadata={JSON.stringify({
    name: "Alice", 
    email: "alice@wonderland.com",
    coins: 100,
    // any other fields you want
  })}
/>

Passing metadata directly into the component needs to be converted into a string.

You can also set the metadata using

window.applied.setMetadata({
  name: "Hatter",
  email: "hatter@wonderland.com",
  coins: -5,
})

Visibility

To mount the chat as a hidden component, use the hide attribute

<applied-chat agent-id={agentId} hide/>

Call the hide and show functions to toggle chat visibility

window.applied.hide()
window.applied.show()

On message callback

To hook into user or agent messages for logging, use the setOnMessage method.

window.applied.setOnMessage(
  async (message: {text: string, role: "user" | "assistant"}) => {
    await log(message);
  }
)

Make sure that the onMessage function is async

Full page embed

Style the parent container to be large and place it anywhere you want. We will render the chat inside the container.

<div style={{height: "100%", width: "100%"}}>
  <applied-chat agent-id={agentId} size="full"/>
</div>

Themes

Applied Labs supports light and dark theme for both full page embed and chat popover

<applied-chat agent-id={agentId} theme="dark"/>

Typescript

Typescript may yell at you for adding <applied-chat> as a component. To fix this, simply add the following snippet to the top of your file

declare global {
  namespace JSX {
    interface IntrinsicElements {
      "applied-chat": any;
    }
  }
}

Next.js example

import Script from "next/script";

export default function Page() {
  return (
    <div>
      <Script src="https://appliedlabs.ai/cdn/applied-chat.umd.js" />
      <applied-chat agent-id={agentId}/>
    </div>
  )
}

HTML example

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script async src="https://appliedlabs.ai/cdn/applied-chat.umd.js"></script>
    <title>Chat</title>
  </head>
  <body style="width: 100vw; height: 100vh;">
    <applied-chat size="sm" agent-id="agentId"/>
  </body>
</html>

Deploy your
AI agent today

Join the frontier of companies redefining work.