logo

Aki UI

アキ ウイ

AI Input Search

エーアイインプットサーチ

A composer that grows with what is typed into it and carries a web-search toggle in its toolbar. The textarea is collapsed to its floor before every measurement, because scrollHeight↗↗ only reports a smaller number once the element has stopped holding itself open — measure without collapsing first and the field can only ever get taller. The search pill animates its width rather than swapping its label in and out, so the toolbar never jumps as it opens. Enter submits, Shift+Enter breaks the line. Adapted from Kokonut UI↗↗ under the MIT licence.

Installation

Copy and paste the following code into a new component file:1

"use client"

/**
* Adapted for Aki UI from Kokonut UI's AI Input Search.
* Original author: @dorianbaffier — https://kokonutui.com
* Copyright (c) 2025 kokonutUI, MIT License.
* https://github.com/kokonut-labs/kokonutui
*
* Reworked here onto the local palette, with the shadcn Textarea removed, the
* auto-resize hook inlined and motion/react swapped for framer-motion.

How to use it2

"use client"

import { AiInputSearch } from "@/components/ui/ai-input-search"

export default function Page() {
return (
<AiInputSearch
placeholder="Ask anything, or search the web"
onSubmit={(value, search) => ask(value, { web: search })}
/>

Props

AiInputSearch

NameDefaultDescription
placeholder"Search the web..."

string

Placeholder shown in the empty field

searchLabel"Search"

string

Label revealed when the search pill is on

minHeight52

number

Height in pixels the field collapses back to

maxHeight200

number

Height in pixels past which the field scrolls instead of growing

onSubmit—

(value: string, search: boolean) => void

Called on Enter or the send button, with the state of the search pill

darkfalse

boolean

Render the dark palette