shadcn-chat

To install every available component from shadcn-chat at once, run the following command in your project's root directory:

npx shadcn-chat-cli@latest add --all

Components will be added to the src/components/ui/chat directory.

To quickly scaffold a complete Next.js application with the Vercel AI SDK already integrated with shadcn-chat, use the following command:

npx create-next-app --example https://github.com/jakobhoeg/shadcn-chat/tree/master/examples/shadcn-chat-example-vercel-ai nextjs-shadcn-chat-vercel-ai

You can add the ChatMessageList component to your project using the shadcn-chat-cli.

npx shadcn-chat-cli@latest add chat-message-list

Before installing shadcn-chat components, ensure your project meets the following requirements:

1. Tailwind CSS: The components are built using Tailwind CSS.
2. shadcn-ui: The components rely on existing shadcn-ui components. You must initialize shadcn-ui in your project before proceeding with the shadcn-chat installation.

You can bootstrap a new Next.js project using this specific shadcn-chat example by running the create-next-app command with the example URL. Replace nextjs-shadcn-chat-vercel-ai with your desired project name.

npx create-next-app --example https://github.com/jakobhoeg/shadcn-chat/tree/master/examples/shadcn-chat-example-vercel-ai nextjs-shadcn-chat-vercel-ai

To add chat components to your project, use the shadcn-chat-cli. Note that some components depend on shadcn-ui, so ensure shadcn-ui is already installed in your project before proceeding.

To install all available components at once (recommended), run:

npx shadcn-chat-cli add --all

To install a specific component, run:

npx shadcn-chat-cli add [component]

To see a list of all available components, run:

npx shadcn-chat-cli add

After bootstrapping the project, follow these steps to get the development server running:

1. Obtain an API Key: Create an API key in your OpenAI dashboard.
2. Configure Environment Variables: Create a .env.local file in the project root and add the required environment variables (refer to the example .env file in the repository for the exact keys).
3. Install Dependencies: Run npm install (or your preferred package manager).
4. Start Development Server: Run npm run dev.

You can install the expandable-chat component using the shadcn-chat-cli.

npx shadcn-chat-cli@latest add expandable-chat

You can choose to install only specific components instead of the entire library.

To see a list of all available components, run:

npx shadcn-chat-cli@latest add

To install a specific component, append its name to the command:

npx shadcn-chat-cli@latest add <component-name>

Components will be added to the src/components/ui/chat directory.

Use the shadcn-chat-cli to add the ChatInput component to your project via the following command:

npx shadcn-chat-cli@latest add chat-input