Aki UI

AI Prompt

エーアイプロンプト

A chat composer with a model picker built into its toolbar. The field grows with the message up to a ceiling and then scrolls; the picker is a plain button and list rather than a menu primitive, dismissed on mousedown↗↗ outside it or on Escape, and it opens upward because the trigger sits on the bottom edge of the box. Vendor marks are matched on the model family rather than on an exact name, so passing your own list still resolves an icon, falling back to a generic one when nothing matches. 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 Prompt Input.

* Original author: @dorianbaffier — https://kokonutui.com

* https://github.com/kokonut-labs/kokonutui

* Reworked here onto the local palette: the shadcn Textarea, Button and

* DropdownMenu are gone, the vendor marks are inlined in currentColor, the

How to use it2

"use client"

import { AiPrompt } from "@/components/ui/ai-prompt"

export default function Page() {

return (

<AiPrompt

models={["Claude Sonnet 4.5", "GPT-5.1", "Gemini 3 Pro"]}

defaultModel="Claude Sonnet 4.5"

onSubmit={(value, model) => send(value, model)}

Props

AiPrompt

Name	Default	Description
models	["Claude Sonnet 4.5", …]	string[] Models offered in the picker
defaultModel	first model	string Model selected before the user picks one
placeholder	"What can I do for you?"	string Placeholder shown in the empty field
minHeight	72	number Height in pixels the field collapses back to
maxHeight	300	number Height in pixels past which the field scrolls instead of growing
onSubmit	—	(value: string, model: string) => void Called on Enter or the send button, with the selected model
dark	false	boolean Render the dark palette