AI Prompt Input: Free React + Tailwind Component

An AI chat input — auto-growing height, IME-safe Enter to submit, and a submit arrow that flies out.

Bring this into your project

Run this command in your project folder. The CLI adds the source and dependencies; then follow the usage example below.

npx webberui@latest add ai-prompt-input.en

New project or installation trouble? Start here →

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Placeholder textplaceholder

Max linesmaxRows

Disable inputdisabled

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

Active edited usageDefault props

<AIPromptInput/>

    </div>
  );
}

The complete example includes the preview layout and data. Install the component first, then paste this file into your project.

Installation

npx webberui@latest add https://webberui.com/r/ai-prompt-input.en.json

Installing also writes the --wb-duration-fast and --wb-ease-out CSS variables into your global stylesheet.

Usage

import { AIPromptInput } from "@/components/ui/ai-prompt-input";

<AIPromptInput onSubmit={(value) => console.log(value)} />

Props

Prop	Type	Default	Description
`placeholder`	`string`	`"Ask me any questions..."` ("Ask me anything…")	Placeholder text
`onSubmit`	`(value: string) => void`	—	Fires on submit
`maxRows`	`number`	`8`	Maximum number of rows; scrolls beyond that
`disabled`	`boolean`	`false`	Disables the input

How it works

IME-safe: pressing Enter mid-composition in Chinese Bopomofo (Zhuyin) or Pinyin does not submit by accident (it checks isComposing)
Auto-growing height: it grows with the content, then switches to internal scrolling once it reaches maxRows
When the user has "reduce motion" enabled at the system level, the submit animation degrades to a fade out

This is the core version from phase one; for the advanced version (attachments, model menu, voice waveform, slash commands) see roadmap item #12.

AI Prompt Input