How can I deploy and embed a tested Assistant on my website?

Below is an overview of how you can deploy your ready Assistant:

Standard Production Deployment

After you’ve built and tested your Assistant locally (for example using the development server with npm run dev), you need to deploy your entire application. This generally means building your project for production and hosting it on your preferred platform (for example, Vercel, Netlify, Cloudflare Workers, etc.). The process is similar to many modern web applications:

• Build your project: Run your production build command (commonly something like npm run build).
• Deploy your build: Upload or deploy your build to your hosting provider.
  For Next.js apps, this is as straightforward as deploying to Vercel; if you aren’t using Next.js, you might consider deploying to any serverless platform such as Cloudflare Workers.

Adding the Assistant to an Existing Website

While the documentation shows you how to install and initialize a project with assistant‑ui, it also provides guidance for adding it to already existing apps. This integration involves:

1. Installing the Required SDK and Dependencies:
   For example, to integrate the OpenAI provider, you’d install the SDK:

   BASHCopied
   npm install @ai-sdk/openai

2. Setting Up an API Endpoint:
   Add an endpoint (for instance, in a Next.js app/api/chat/route.ts file) to handle chat requests:

   JSCopied
   import { openai } from "@ai-sdk/openai";
   import { createEdgeRuntimeAPI } from "@assistant-ui/react/edge";
   
   export const { POST } = createEdgeRuntimeAPI({
     model: openai("gpt-4o"),
   });

3. Configuring Environment Variables:
   Define your API key in your environment file:

   ENVCopied
   OPENAI_API_KEY="sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"

Script-Based Integration?

The documentation does not offer a one-click “insert script tag” method to embed the Assistant into a website as a standalone widget. Instead, integration is done by adding the necessary components and API endpoints into your app’s codebase. Once integrated, deploying your app (or its serverless functions) takes care of making the Assistant available on your website.

In Summary

• Deploy your full app: Use your standard production build and deployment workflow.
• Integrate using components/API endpoints: Follow the documentation to add assistant-ui to your codebase rather than simply embedding a script.
• Use serverless platforms if needed: If not using frameworks like Next.js, you can opt for platforms like Cloudflare Workers for your API endpoints.

This approach ensures that your Assistant is fully integrated and secure within your website’s environment.