Getting Started

Start with a new project

animated gif showing the steps to create a new project

Create a new project

Create a new project with assistant-ui pre-configured:

npx create-assistant-ui@latest my-app
cd my-app

Add API key

Add a new .env file to your project with your OpenAI API key:

OPENAI_API_KEY="sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"

Start the app

npm run dev

Install in an existing app

Install `@assistant-ui/react`

npm install @assistant-ui/react

Setup Backend Endpoint

Install provider SDK:

Terminal

npm install @ai-sdk/openai

Add an API endpoint:

/app/api/chat/route.ts

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

Define environment variables:

/.env.local

OPENAI_API_KEY="sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"

If you aren't using Next.js, you can also deploy this endpoint to Cloudflare Workers, or any other serverless platform.

Import CSS styles

Add the following to your tailwind.config.ts:

/tailwind.config.ts

{
  plugins: [
    require("tailwindcss-animate"), // make sure to "npm install tailwindcss-animate"
    require("@assistant-ui/react/tailwindcss")
  ],
}

Use it in your app

/app/page.tsx

import { Thread, useEdgeRuntime } from "@assistant-ui/react";
 
const MyApp = () => {
  const runtime = useEdgeRuntime({
    api: "/api/chat",
  });
 
  return (
    <div className="h-full">
      <Thread runtime={runtime} />
    </div>
  );
};

Getting Started

On this page