Inputs

AI Chat Input

A responsive prompt composer with textarea, label, and high-contrast send button.

aichatform

Installation

Copy and paste the code into your project.

Accessibility notes

The textarea includes a label for screen readers; connect submit behavior to your own handler.

Preview accent

TypeScript

export function AiChatInput() {
  return (
    <form className="w-[min(28rem,100%)] rounded-lg border border-white/12 bg-[#0b0f14]/70 p-2 shadow-2xl">
      <label htmlFor="ai-message" className="sr-only">Message</label>
      <div className="flex min-w-0 items-end gap-2">
        <textarea
          id="ai-message"
          className="min-h-20 min-w-0 flex-1 resize-none rounded-md border border-white/10 bg-white/[0.04] px-3 py-2 text-sm text-white outline-none transition placeholder:text-slate-500 focus:border-[#40E0D0]/40"
          placeholder="Ask the agent to design a flow..."
        />
        <button className="shrink-0 rounded-md bg-[#40E0D0] px-4 py-2 text-sm font-bold text-[#0b0f14]">Send</button>
      </div>
    </form>
  );
}

Usage

<AiChatInput />

Related components

I can turn that product brief into a component map, then draft the first screen.

AI Interfaces

Streaming Response Bubble

Beginner

A conversational response card with subtle animated streaming indicators.

streamingchatresponse

View component

Grounded responses should show the trail back to source material.

Source · docs/agent-interface.md

AI Interfaces

Source Citation Card

Beginner

A citation card for grounded AI responses and research-backed interfaces.

sourcecitationai

View component

/

Inputs

Neural Search Input

Beginner

A rounded search field for command palettes, component galleries, and prompt libraries.

searchcommandinput

View component