Installation

Prerequisites

Before installing, ensure you have the following:

Node.js version 18 or later
React version 19 or later
A Next.js, Vite, or Remix project

Install shadcn/ui

chatblocks is built on top of shadcn/ui, so you'll need it as a foundation. If you haven't already, set up shadcn/ui by following their installation guide.

With shadcn/ui configured, you're ready to add chatblocks components to your project.

Using the shadcn CLI

Install individual components using the shadcn CLI:

npx shadcn@latest add https://chatblocks.dev/r/ai-input.json

You can also use other package managers:

# Using pnpm
pnpm dlx shadcn@latest add https://chatblocks.dev/r/ai-input.json

# Using yarn
yarn dlx shadcn@latest add https://chatblocks.dev/r/ai-input.json

# Using bun
bunx shadcn@latest add https://chatblocks.dev/r/ai-input.json

Usage

After installation, import and start using the components in your project:

import { AiInput } from "@/components/ui/ai-input";

export default function MyPage() {
  return (
    <div>
      <AiInput placeholder="Ask me anything..." />
    </div>
  );
}

Manual Installation

You can also manually copy and paste components from our documentation if you prefer not to use the CLI.

Introduction AI Input