AI Input

Component

About

An AI input

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

Code

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

Usage.tsx

"use client";

import AIInput from './components/ui/ai-input';

export default function Home() {
  const handleAISubmit = (message: string, model: string, thinkingMode: boolean, files: File[]) => {
    console.log('AI Input Submitted:', { message, model, thinkingMode, files });
    // Here you would typically send the data to your AI service
  };

  return (
    <div className="min-h-screen bg-neutral-950 px-4 flex items-center justify-center">
      <div className="w-full max-w-4xl">
        <AIInput onSubmit={handleAISubmit} />
      </div>
    </div>
  );
}