logoassistant-ui

Getting Started

Start with a new project

Create a new project

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

npx assistant-ui@latest create 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

Setup Runtime

You wrap your entire app in a <AssistantRuntimeProvider runtime={runtime}> component.

This component makes a Runtime available to the rest of your app. The Runtime takes care of LLM communication, tools, streaming, state management, branching, persistence, authentication and more.

Refer to Picking a Runtime to pick the right runtime for your use case.

Setup UI Components

The easiest way to get started is with shadcn/ui + tailwind components.

Currently, three modes are supported:

On this page

Edit on Github