<PromptInput />

<PromptInput /> is the main text-entry surface across the AI starter. It is not just a single input field, but a small component family for building chat, image, RAG, and TTS composers with the same design language.

Web

The web version is the broader implementation. It supports provider-driven state, drag and drop, attachment actions, referenced sources, menus, selects, hover cards, and richer composition around the textarea.

Mobile

The mobile version keeps the same overall structure, but adapts it to native interaction patterns. Instead of drag and drop and hover-based UI, it leans on bottom sheets, touch-friendly buttons, and platform pickers for camera, photos, and files.

What makes it useful

Prompt input is where a lot of AI product complexity shows up. This component family gives that complexity a clean place to live without turning the composer into one giant custom component.

Blocks

The component family is intentionally broad, but most implementations only need a handful of pieces. The root container handles submission flow, while the surrounding helpers shape the final composer UI.

On web, the family also includes extras like PromptInputDropzone, PromptInputActionAddAttachments, PromptInputHoverCard*, PromptInputCommand*, and referenced source helpers.

Usage

The most common pattern is a root prompt input with a textarea and footer. From there, you can add tools and actions depending on the product surface.

import {
  PromptInput,
  PromptInputFooter,
  PromptInputSubmit,
  PromptInputTextarea,
  PromptInputTools,
} from "@workspace/ui-web/ai-elements/prompt-input";
import type { PromptInputMessage } from "@workspace/ui-web/ai-elements/prompt-input";

export function ChatComposer() {
  return (
    <PromptInput
      status="ready"
      attachments={{
        maxFiles: 5,
        allowedMimeTypes: ["image/*", "application/pdf"],
      }}
      onSubmit={async (message: PromptInputMessage) => {
        console.log(message.text, message.files);
      }}
      className="w-full"
    >
      <PromptInputTextarea placeholder="Ask anything..." />

      <PromptInputFooter>
        <PromptInputTools />
        <PromptInputSubmit status="ready" />
      </PromptInputFooter>
    </PromptInput>
  );
}

import {
  PromptInput,
  PromptInputFooter,
  PromptInputSubmit,
  PromptInputTextarea,
  PromptInputTools,
} from "@workspace/ui-mobile/ai-elements/prompt-input";
import type { PromptInputMessage } from "@workspace/ui-mobile/ai-elements/prompt-input";

export function ChatComposer() {
  return (
    <PromptInput
      status="ready"
      attachments={{
        maxFiles: 5,
        allowedMimeTypes: ["image/*", "application/pdf"],
      }}
      onSubmit={async (message: PromptInputMessage) => {
        console.log(message.text, message.files);
      }}
    >
      <PromptInputTextarea placeholder="Ask anything..." />

      <PromptInputFooter>
        <PromptInputTools />
        <PromptInputSubmit status="ready" />
      </PromptInputFooter>
    </PromptInput>
  );
}

Shared state

If the composer needs to be controlled from outside the prompt input itself, both platforms expose a provider and controller hook. That is useful when examples, attachment previews, or external UI need to read or update the same state.

On web, the provider also keeps track of the dropzone state so actions like “add attachments” can open the file dialog from elsewhere in the composer tree.

Attachments and actions

Attachments are a core part of the prompt input family, but the interaction model differs between web and mobile.

That split is important: the API stays conceptually similar, but each platform uses the interaction pattern users already expect.

References

You do not need the entire component family every time. These are the parts most apps will end up using first.

On web, the command and hover-card primitives are also worth reaching for when the composer needs richer inline UX, such as search, slash commands, or contextual help.

In the starter

The prompt input is one of the most reused UI systems in the AI starter. It shows up in the Chat, Image, RAG, and TTS apps, with each surface composing a slightly different set of tools around the same foundation.

That reuse is the main reason the component family matters. Instead of rebuilding the composer for every app, the starter uses the same primitives and swaps in app-specific controls, selectors, and attachment behavior.

Related components

The prompt input usually sits next to other AI UI primitives rather than standing alone. These pages are the closest companions in the docs set.