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

    113
  • Meter

    Meter

    11
  • Skeleton Loader

    Skeleton Loader

    11
  • Textarea

    Textarea

    2
  • Soft Hardware Spinner

    Soft Hardware Spinner

    2
  • Well

    Well

    1
  • Settings List

    Settings List

  • Perfect Preview

    Perfect Preview

More in AI chats

View all
  • AI Actions

    AI Actions

    341
  • Aquarium Prompt

    Aquarium Prompt

    62
  • Commit

    Commit

    35
  • Cost Meter

    Cost Meter

    50
  • Research Report

    Research Report

    2
  • Agent Chat

    Agent Chat

    19
  • Color Picker

    Color Picker

    175
  • Streaming Text

    Streaming Text

    26