React AI Prompt Input

ChatGPT-style input with auto-resize and model selector. React component with TypeScript, keyboard shortcuts, and shadcn/ui for AI chat.

AI Elements

Radix UI

Trying to implement AI Elements?

Join our Discord community for help from other developers.

Auto-resizing textarea with toolbar for AI prompts in conversational AI applications. This free open source React component handles Enter submits, Shift+Enter adds new lines, and includes model selection with proper form handling for Next.js projects.

Textarea with submit button and model selection:

Loading component...

'use client';import {  PromptInput,  PromptInputButton,  PromptInputModelSelect,  PromptInputModelSelectContent,  PromptInputModelSelectItem,  PromptInputModelSelectTrigger,  PromptInputModelSelectValue,  PromptInputSubmit,  PromptInputTextarea,  PromptInputToolbar,  PromptInputTools,} from '@/components/ui/shadcn-io/ai/prompt-input';import { MicIcon, PaperclipIcon } from 'lucide-react';import { type FormEventHandler, useState } from 'react';const models = [  { id: 'gpt-4o', name: 'GPT-4o' },  { id: 'claude-3-5-sonnet-20241022', name: 'Claude 3.5 Sonnet' },  { id: 'gemini-1.5-pro', name: 'Gemini 1.5 Pro' },];const Example = () => {  const [text, setText] = useState<string>('');  const [model, setModel] = useState<string>(models[0].id);  const [status, setStatus] = useState<    'submitted' | 'streaming' | 'ready' | 'error'  >('ready');  const handleSubmit: FormEventHandler<HTMLFormElement> = (event) => {    event.preventDefault();    if (!text) {      return;    }    setStatus('submitted');    setTimeout(() => {      setStatus('streaming');    }, 200);    setTimeout(() => {      setStatus('ready');      setText('');    }, 2000);  };  return (    <div className='p-8 w-full'>    <PromptInput onSubmit={handleSubmit}>      <PromptInputTextarea        onChange={(e) => setText(e.target.value)}        value={text}        placeholder="Type your message..."      />      <PromptInputToolbar>        <PromptInputTools>          <PromptInputButton>            <PaperclipIcon size={16} />          </PromptInputButton>          <PromptInputButton>            <MicIcon size={16} />            <span>Voice</span>          </PromptInputButton>          <PromptInputModelSelect onValueChange={setModel} value={model}>            <PromptInputModelSelectTrigger>              <PromptInputModelSelectValue />            </PromptInputModelSelectTrigger>            <PromptInputModelSelectContent>              {models.map((model) => (                <PromptInputModelSelectItem key={model.id} value={model.id}>                  {model.name}                </PromptInputModelSelectItem>              ))}            </PromptInputModelSelectContent>          </PromptInputModelSelect>        </PromptInputTools>        <PromptInputSubmit disabled={!text} status={status} />      </PromptInputToolbar>    </PromptInput></div>  );};export default Example;

'use client';import { Button } from '@/components/ui/button';import {  Select,  SelectContent,  SelectItem,  SelectTrigger,  SelectValue,} from '@/components/ui/select';import { Textarea } from '@/components/ui/textarea';import { cn } from '@/lib/utils';import type { ChatStatus } from 'ai';import { Loader2Icon, SendIcon, SquareIcon, XIcon } from 'lucide-react';import type {  ComponentProps,  HTMLAttributes,  KeyboardEventHandler,} from 'react';import { Children } from 'react';export type PromptInputProps = HTMLAttributes<HTMLFormElement>;export const PromptInput = ({ className, ...props }: PromptInputProps) => (  <form    className={cn(      'w-full divide-y overflow-hidden rounded-xl border bg-background shadow-sm',      className    )}    {...props}  />);export type PromptInputTextareaProps = ComponentProps<typeof Textarea> & {  minHeight?: number;  maxHeight?: number;};export const PromptInputTextarea = ({  onChange,  className,  placeholder = 'What would you like to know?',  minHeight = 48,  maxHeight = 164,  ...props}: PromptInputTextareaProps) => {  const handleKeyDown: KeyboardEventHandler<HTMLTextAreaElement> = (e) => {    if (e.key === 'Enter') {      if (e.shiftKey) {        // Allow newline        return;      }      // Submit on Enter (without Shift)      e.preventDefault();      const form = e.currentTarget.form;      if (form) {        form.requestSubmit();      }    }  };  return (    <Textarea      className={cn(        'w-full resize-none rounded-none border-none p-3 shadow-none outline-none ring-0',        'field-sizing-content max-h-[6lh] bg-transparent dark:bg-transparent',        'focus-visible:ring-0',        className      )}      name="message"      onChange={(e) => {        onChange?.(e);      }}      onKeyDown={handleKeyDown}      placeholder={placeholder}      {...props}    />  );};export type PromptInputToolbarProps = HTMLAttributes<HTMLDivElement>;export const PromptInputToolbar = ({  className,  ...props}: PromptInputToolbarProps) => (  <div    className={cn('flex items-center justify-between p-1', className)}    {...props}  />);export type PromptInputToolsProps = HTMLAttributes<HTMLDivElement>;export const PromptInputTools = ({  className,  ...props}: PromptInputToolsProps) => (  <div    className={cn(      'flex items-center gap-1',      '[&_button:first-child]:rounded-bl-xl',      className    )}    {...props}  />);export type PromptInputButtonProps = ComponentProps<typeof Button>;export const PromptInputButton = ({  variant = 'ghost',  className,  size,  ...props}: PromptInputButtonProps) => {  const newSize =    (size ?? Children.count(props.children) > 1) ? 'default' : 'icon';  return (    <Button      className={cn(        'shrink-0 gap-1.5 rounded-lg',        variant === 'ghost' && 'text-muted-foreground',        newSize === 'default' && 'px-3',        className      )}      size={newSize}      type="button"      variant={variant}      {...props}    />  );};export type PromptInputSubmitProps = ComponentProps<typeof Button> & {  status?: ChatStatus;};export const PromptInputSubmit = ({  className,  variant = 'default',  size = 'icon',  status,  children,  ...props}: PromptInputSubmitProps) => {  let Icon = <SendIcon className="size-4" />;  if (status === 'submitted') {    Icon = <Loader2Icon className="size-4 animate-spin" />;  } else if (status === 'streaming') {    Icon = <SquareIcon className="size-4" />;  } else if (status === 'error') {    Icon = <XIcon className="size-4" />;  }  return (    <Button      className={cn('gap-1.5 rounded-lg', className)}      size={size}      type="submit"      variant={variant}      {...props}    >      {children ?? Icon}    </Button>  );};export type PromptInputModelSelectProps = ComponentProps<typeof Select>;export const PromptInputModelSelect = (props: PromptInputModelSelectProps) => (  <Select {...props} />);export type PromptInputModelSelectTriggerProps = ComponentProps<  typeof SelectTrigger>;export const PromptInputModelSelectTrigger = ({  className,  ...props}: PromptInputModelSelectTriggerProps) => (  <SelectTrigger    className={cn(      'border-none bg-transparent font-medium text-muted-foreground shadow-none transition-colors',      'hover:bg-accent hover:text-foreground [&[aria-expanded="true"]]:bg-accent [&[aria-expanded="true"]]:text-foreground',      className    )}    {...props}  />);export type PromptInputModelSelectContentProps = ComponentProps<  typeof SelectContent>;export const PromptInputModelSelectContent = ({  className,  ...props}: PromptInputModelSelectContentProps) => (  <SelectContent className={cn(className)} {...props} />);export type PromptInputModelSelectItemProps = ComponentProps<typeof SelectItem>;export const PromptInputModelSelectItem = ({  className,  ...props}: PromptInputModelSelectItemProps) => (  <SelectItem className={cn(className)} {...props} />);export type PromptInputModelSelectValueProps = ComponentProps<  typeof SelectValue>;export const PromptInputModelSelectValue = ({  className,  ...props}: PromptInputModelSelectValueProps) => (  <SelectValue className={cn(className)} {...props} />);

Automatically adjusts height based on content in React applications, handles Enter/Shift+Enter shortcuts correctly in TypeScript components, and provides a flexible toolbar system for JavaScript frameworks. Integrates seamlessly with Vercel AI SDK status.

Installation

npx shadcn@latest add https://www.shadcn.io/registry/ai.json

npx shadcn@latest add https://www.shadcn.io/registry/ai.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/ai.json

bunx shadcn@latest add https://www.shadcn.io/registry/ai.json

Usage

import {
  PromptInput,
  PromptInputTextarea,
  PromptInputToolbar,
  PromptInputSubmit,
} from "@/components/ai/prompt-input";

<PromptInput onSubmit={() => {}}>
  <PromptInputTextarea
    value={input}
    onChange={(e) => setInput(e.currentTarget.value)}
    placeholder="Type your message..."
  />
  <PromptInputToolbar>
    <PromptInputSubmit disabled={!input.trim()} />
  </PromptInputToolbar>
</PromptInput>;

Why not just use a regular textarea?

Fixed-height textareas cut off AI prompts in React applications. Users write long, complex prompts and need to see what they're typing without scrolling in a tiny box in Next.js projects.

Enter/Shift+Enter behavior has to be right in JavaScript implementations. Users expect Enter to submit, Shift+Enter for new lines in TypeScript components. Get this wrong and your chat feels broken.

Usage with Vercel AI SDK

Complete chat interface using Vercel AI SDK with model selection and status integration in React applications:

"use client";

import {
  PromptInput,
  PromptInputTextarea,
  PromptInputToolbar,
  PromptInputTools,
  PromptInputButton,
  PromptInputSubmit,
  PromptInputModelSelect,
  PromptInputModelSelectTrigger,
  PromptInputModelSelectContent,
  PromptInputModelSelectItem,
  PromptInputModelSelectValue,
} from "@/components/ai/prompt-input";
import {
  Conversation,
  ConversationContent,
} from "@/components/ai/conversation";
import { Message, MessageContent } from "@/components/ai/message";
import { useChat } from "@ai-sdk/react";
import { useState } from "react";
import { MicIcon, PaperclipIcon } from "lucide-react";

const models = [
  { id: "gpt-4o", name: "GPT-4o" },
  { id: "claude-3-5-sonnet-20241022", name: "Claude 3.5 Sonnet" },
];

export default function Chat() {
  const [input, setInput] = useState("");
  const [selectedModel, setSelectedModel] = useState(models[0].id);

  const { messages, append, status } = useChat({
    body: { model: selectedModel },
  });

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (input.trim()) {
      append({ role: "user", content: input });
      setInput("");
    }
  };

  return (
    <div className="flex flex-col h-full max-w-4xl mx-auto">
      <Conversation>
        <ConversationContent>
          {messages.map((message) => (
            <Message from={message.role} key={message.id}>
              <MessageContent>{message.content}</MessageContent>
            </Message>
          ))}
        </ConversationContent>
      </Conversation>

      <PromptInput onSubmit={handleSubmit}>
        <PromptInputTextarea
          value={input}
          onChange={(e) => setInput(e.currentTarget.value)}
          placeholder="Type your message..."
        />
        <PromptInputToolbar>
          <PromptInputTools>
            <PromptInputButton>
              <PaperclipIcon size={16} />
            </PromptInputButton>
            <PromptInputButton>
              <MicIcon size={16} />
              <span>Voice</span>
            </PromptInputButton>
            <PromptInputModelSelect
              value={selectedModel}
              onValueChange={setSelectedModel}
            >
              <PromptInputModelSelectTrigger>
                <PromptInputModelSelectValue />
              </PromptInputModelSelectTrigger>
              <PromptInputModelSelectContent>
                {models.map((model) => (
                  <PromptInputModelSelectItem key={model.id} value={model.id}>
                    {model.name}
                  </PromptInputModelSelectItem>
                ))}
              </PromptInputModelSelectContent>
            </PromptInputModelSelect>
          </PromptInputTools>
          <PromptInputSubmit disabled={!input.trim()} status={status} />
        </PromptInputToolbar>
      </PromptInput>
    </div>
  );
}

Backend route handling model selection:

// app/api/chat/route.ts
import { streamText, convertToModelMessages } from "ai";

export async function POST(req: Request) {
  const { messages, model } = await req.json();

  const result = streamText({
    model: model || "openai/gpt-4o",
    messages: convertToModelMessages(messages),
  });

  return result.toUIMessageStreamResponse();
}

Features

Auto-resizing textarea with configurable min/max height (prevents layout jumps) in React applications
Keyboard shortcuts that work like users expect (Enter to submit, Shift+Enter for new lines) in TypeScript components
Submit button states that integrate with Vercel AI SDK status in Next.js projects
Flexible toolbar system for custom actions and model selection in JavaScript frameworks
Form validation that prevents empty submissions
Proper focus management for continuous conversation
Works with any Vercel AI SDK setup and AI chat applications
Free open source component designed for conversational AI interfaces and prompt-based applications

API Reference

PromptInput

Form container for the prompt input system.

Prop	Type	Description
`onSubmit`	`FormEventHandler`	Form submission handler
`className`	`string`	Additional CSS classes
`...props`	`HTMLAttributes<HTMLFormElement>`	Standard form attributes

PromptInputTextarea

Auto-resizing textarea with keyboard shortcuts.

Prop	Type	Default	Description
`placeholder`	`string`	`"What would you like to know?"`	Placeholder text
`minHeight`	`number`	`48`	Minimum height in pixels
`maxHeight`	`number`	`164`	Maximum height in pixels
`className`	`string`	-	Additional CSS classes
`...props`	`ComponentProps<typeof Textarea>`	-	Textarea component props

PromptInputToolbar

Container for toolbar actions and submit button.

Prop	Type	Description
`className`	`string`	Additional CSS classes
`...props`	`HTMLAttributes<HTMLDivElement>`	Standard div attributes

PromptInputTools

Container for tool buttons and controls.

Prop	Type	Description
`className`	`string`	Additional CSS classes
`...props`	`HTMLAttributes<HTMLDivElement>`	Standard div attributes

PromptInputButton

Toolbar button with automatic sizing.

Prop	Type	Default	Description
`variant`	`ButtonVariant`	`"ghost"`	Button style variant
`size`	`ButtonSize`	`"icon"` (auto)	Button size
`className`	`string`	-	Additional CSS classes
`...props`	`ComponentProps<typeof Button>`	-	Button component props

PromptInputSubmit

Submit button with status indicators.

Prop	Type	Default	Description
`status`	`ChatStatus`	-	Current chat status for icon display
`variant`	`ButtonVariant`	`"default"`	Button style variant
`size`	`ButtonSize`	`"icon"`	Button size
`className`	`string`	-	Additional CSS classes
`...props`	`ComponentProps<typeof Button>`	-	Button component props

Model Selection Components

All model selection components forward props to their underlying shadcn/ui Select components:

PromptInputModelSelect - Select root component
PromptInputModelSelectTrigger - Select trigger with custom styling
PromptInputModelSelectContent - Select dropdown content
PromptInputModelSelectItem - Individual model option
PromptInputModelSelectValue - Selected value display

Keyboard interactions

Key	Description
`Enter`	Submit form (when not in composition)
`Shift + Enter`	Insert new line
`Tab`	Navigate between toolbar elements
`Escape`	Blur textarea

Prompt input gotchas

Unconstrained auto-resize breaks layouts: Set reasonable minHeight/maxHeight in React applications. Long AI prompts can grow to 500+ lines without constraints in TypeScript components.

Mobile keyboard inconsistency: Enter behavior varies across mobile keyboards in JavaScript implementations. Test on real devices, not just desktop browsers in Next.js projects.

Empty input submission: Users will hit Enter on empty textareas in React applications. Validate and disable submit for empty/whitespace-only input.

Model selection persistence: Consider saving user's model preference to localStorage in TypeScript projects. They don't want to reselect every session.

Focus management after submit: Return focus to the textarea after successful submission in React components so users can continue the conversation.

Integration with other components

Works great with Conversation for scrolling chat interfaces in React applications. Combine with Message for complete chat UI in Next.js projects. Add Actions for message interactions like copy, regenerate, or edit. This free open source component integrates seamlessly with modern JavaScript frameworks.

React AI Prompt Input

Installation

Usage

Why not just use a regular textarea?

Usage with Vercel AI SDK

Features

API Reference

PromptInput

PromptInputTextarea

PromptInputToolbar

PromptInputTools

PromptInputButton

PromptInputSubmit

Model Selection Components

Keyboard interactions

Prompt input gotchas

Integration with other components

Questions developers actually ask

On this page

React AI Prompt Input

Reactai/prompt-input

How do I control textarea auto-resizing?

Can I customize keyboard shortcuts?

What submit button states are available?

How do I add custom toolbar buttons?

How does this work on mobile devices?

On this page