ProUnlock everything for $49.99 a year, or $79.99 once. See plans ›

Nexus UI

AI Composer, animated React component

The prompt box every AI product needs. It grows as you type, cycles through suggestions while it is empty and lets you pick a model. The + opens a menu like the ones in AI apps: add photos (they show as thumbnails, and you can paste one), add files, or switch on a skill such as web search, deep research, image creation or code, which sits in the box as a chip you can remove. Send, and your words dissolve into particles that drift up into the thread while the send button folds into Stop; the reply shows a shimmering Thinking, then streams in word by word. Enter sends, Shift+Enter adds a line, Escape stops the reply. Until you touch it, it types and sends suggestions on its own, opening the + menu now and then. Pass onSend to stream your own replies.

  • Pro
  • AI Components
  • Spring

Play with it

Move the controls and watch it change. Copy code gives you a snippet with only the props you changed.

What can I help with?

Enter sends, Shift+Enter adds a line, Escape stops the reply.

Props

PropTypeDefaultWhat it does
models{ id: string; name: string; note: string }[]Swift, Deep, VisionThe models in the picker. The first one is selected to start with.
skills{ id: string; name: string; note: string; icon?: "globe" | "search" | "image" | "code" | "spark"; used?: string }[]Web search, Deep research, Create image, Write codeThe skills listed under the + menu. Switching one on adds a chip to the box and passes it to onSend; the reply notes what it used. Pass an empty array to leave the skills out.
ideasstring[]4 promptsSuggestions shown as the rotating placeholder and as the chips under the greeting (the first three).
greetingstring"What can I help with?"The heading shown above the box before the first message.
onSend(message: { text: string; files: ComposerFile[]; skills: ComposerSkill[]; model: ComposerModel }) => string | Promise<string> | void—Called when a message is sent, with the text, the attached files (photos carry a preview URL), the skills switched on and the chosen model. Return the reply, or a promise of it, and it streams in word by word. Without it, a short demo reply is used.
autoplaybooleantrueTypes and sends the suggestions in turn until the first touch. Off under reduced motion.
classNamestring—Extra classes for the outer wrapper. The composer is at most 560px wide.

Add it to your project

  1. 1

    Set up your project once

    You need a Next.js project with Tailwind CSS and the @/ import alias. In its root folder, run this once. It creates components.json and the cn() helper in src/lib/utils.ts:

    npx shadcn@latest init -d

    Starting from nothing? The Quick Start walks through the whole thing.

  2. 2

    Connect the registry with your API key

    AI Composer is a Pro item, so the CLI has to send your API key. Do this once per project:

    1. Create a key at nexus-ui.com/dashboard/api-key. Copy it straight away: it starts with nxs_ and is shown only once.
    2. In your project root, next to package.json, create a file named .env.local with this line, using your own key:
      NEXUS_API_KEY=nxs_your_key_here
    3. Open components.json and add this entry inside the outermost braces, next to "aliases". Leave {name} and ${NEXUS_API_KEY} exactly as written; the CLI fills them in:
      "registries": {
  "@nexus-labs": {
    "url": "https://www.nexus-ui.com/api/registry/{name}",
    "headers": {
      "Authorization": "Bearer ${NEXUS_API_KEY}"
    }
  }
}

More ai components