Wensity Labs

AI Prompt Input

AI chats 55

About

An AI chat prompt input that grows as you type, with a glowing drag and drop zone for files, file attachments and a model picker. Built for ChatGPT style chat apps and AI agents.

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

Code

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

Usage.tsx

"use client";

import { LiquidMultimodalInput } from "@/components/ui/liquid-multimodal-input";

export function LiquidMultimodalInputPreview() {
  return (
    <div className="w-full max-w-3xl px-4">
      <LiquidMultimodalInput placeholder="Ask Wensity, or drop a file…" />
    </div>
  );
}

export default function Demo() {
  return <LiquidMultimodalInputPreview />;
}

Dependencies

More by Wensity Labs

View all
  • Sidebar

    Sidebar

    296
  • Calendar

    Calendar

    197
  • Button

    Button

    93
  • Color Picker

    Color Picker

    71
  • Image Comparison Slider

    Image Comparison Slider

    68
  • Text Morphing

    Text Morphing

    43
  • Carousel

    Carousel

    39
  • Text Blur Reveal

    Text Blur Reveal

    37

More in AI chats

View all
  • AI Actions

    AI Actions

    326
  • Agent Chat

    Agent Chat

    18
  • Message Thread

    Message Thread

    49
  • Attachments

    Attachments

    23
  • Memory Scope

    Memory Scope

    3
  • Color Picker

    Color Picker

    118
  • AI Task List

    AI Task List

    169
  • Code Block

    Code Block

    13