vijayksingh

AI Composer

AI chats

About

A chat thread block with a growing composer, file attachments, and a model picker whose assistant replies stream in word by word with stop, copy and retry controls.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds AI Composer to your project and fits it to your theme.

Code

How AI Composer is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import AiComposer from "@/components/ui/block-ai-composer";

export default function AiComposerDemo() {
  return (
    <div className="w-full max-w-2xl mx-auto">
      <AiComposer />
    </div>
  );
}

Dependencies

More by vijayksingh

View all
  • Weather Widget

    Weather Widget

    73
  • Meter

    Meter

    10
  • Skeleton Loader

    Skeleton Loader

    8
  • Textarea

    Textarea

    2
  • Well

    Well

    1
  • Soft Hardware Spinner

    Soft Hardware Spinner

    1
  • Settings List

    Settings List

  • Perfect Preview

    Perfect Preview

More in AI chats

View all
  • AI Actions

    AI Actions

    319
  • Agent Chat

    Agent Chat

    17
  • System Message

    System Message

    53
  • Message Thread

    Message Thread

    34
  • Color Picker

    Color Picker

    81
  • Quota Banner

    Quota Banner

    21
  • AI Task List

    AI Task List

    159
  • Code Block

    Code Block

    8