chatblocks

Installation

How to install chatblocks components in your project.

Prerequisites

Before installing, ensure you have the following:

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

Usage

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

'use client';

import { useState } from 'react';
import {
  AIInput,
  AIInputField,
  AIInputSubmit,
  AIInputToolbar,
  AIInputToolbarRight,
} from '@/components/chatblocks/ai-input';

export default function AIInputDemo() {
  const [value, setValue] = useState('');

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (value.trim()) {
      // Handle sending the message to the AI Provider
      setValue('');
    }
  };

  return (
    <AIInput onSubmit={handleSubmit}>
      <AIInputField
        onChange={(e) => setValue(e.target.value)}
        placeholder="Ask anything"
        value={value}
      />
      <AIInputToolbar>
        <AIInputToolbarRight>
          <AIInputSubmit />
        </AIInputToolbarRight>
      </AIInputToolbar>
    </AIInput>
  );
}

Manual Installation

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

All component source code is also available on GitHub.

IntroductionAI Input