How can I embed my custom assistant bot onto my website?

Below is an example of how you can embed your assistant into your website using the assistant-ui framework. Once you have a working bot on the assistant page, you can import the assistant component into your site and render it in your page’s component.

For instance, if you're using Next.js, you might create or update your main page to import and use the assistant component:

TSXCopied
import { MyAssistant } from "@/components/MyAssistant";

export default function Home() {
  return (
    <main className="h-dvh">
      <MyAssistant />
    </main>
  );
}

Steps to Embed the Assistant

1. Create or Identify the Assistant Component:
   Make sure you have a component (like MyAssistant) that encapsulates your assistant logic using the useAssistant hook. This component handles interaction with the OpenAI Assistants API.

2. Import the Component in Your Page:
   In your website’s entry point (e.g., page.tsx in a Next.js project), import the assistant component.

3. Render the Component:
   Place the imported component within your page layout. The above example renders the assistant inside a <main> element.

4. Ensure Proper Setup:
   Review the Getting Started guide and the useAssistant runtime documentation for any additional setup (such as configuring API keys, styling, and additional capabilities).

By following these steps, your bot should be successfully embedded on your website, ready to interact with users.