AI Input

Component 16

About

A chat-style AI prompt composer with agent and model chips, a plus-button attachment menu, a settings dropdown, and an animated gradient wave that plays when a message is sent.

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,
  type AIInputMenuItem,
  type PromptSettingGroup,
} from "@/components/ui/ai-input";
import { Archive, Camera, LayoutGrid, Paperclip, Plug } from "lucide-react";

const settingGroups: PromptSettingGroup[] = [
  {
    id: "model",
    label: "Model",
    display: "featured",
    options: [
      { value: "claude-5", label: "Claude 5", description: "Most capable" },
      { value: "claude-5-fast", label: "Claude 5 Fast", description: "Faster" },
    ],
  },
  {
    id: "effort",
    label: "Effort",
    display: "submenu",
    options: [
      { value: "high", label: "High" },
      { value: "medium", label: "Medium" },
      { value: "low", label: "Low" },
    ],
  },
];

const menuItems: AIInputMenuItem[] = [
  {
    value: "add-files",
    label: "Add files or photos",
    icon: Paperclip,
    shortcut: "⌘U",
  },
  { value: "screenshot", label: "Take a screenshot", icon: Camera },
  {
    value: "add-to-project",
    label: "Add to project",
    icon: Archive,
    items: [
      { value: "new-project", label: "New project" },
      { value: "existing-project", label: "Existing project" },
    ],
  },
  { value: "sep-1", type: "separator" },
  {
    value: "skills",
    label: "Skills",
    icon: LayoutGrid,
    items: [
      { value: "skill-creator", label: "skill-creator" },
      { value: "manage-skills", label: "Manage skills" },
      { value: "browse-skills", label: "Browse skills" },
    ],
  },
  { value: "add-connector", label: "Add connector", icon: Plug },
];

export default function AIInputPreview() {
  return (
    <div className="mx-auto w-full max-w-2xl px-4 py-10">
      <AIInput
        menuItems={menuItems}
        settingGroups={settingGroups}
        onMenuSelect={(value) => console.log("menu:", value)}
        onSettingsChange={(settings) => console.log("settings:", settings)}
        onSend={(message, meta) => console.log(message, meta)}
        placeholder="Ask for follow-up changes"
      />
    </div>
  );
}