AI ComponentsAI Input

AI Input

A sleek AI input component featuring an animated Siri orb that morphs between dock and input states. Includes smooth spring animations, click-outside behavior, and keyboard shortcuts (⌘+Enter). Perfect for AI chat interfaces with elegant micro-interactions.

Code

Install with shadcn Beta

Terminal

npx shadcn@latest add "https://smoothui.dev/r/ai-input.json"

Or install the demo

Terminal

npx shadcn@latest add "https://smoothui.dev/r/ai-input-demo.json"

How to use

Demo.tsx

"use client"

import { MorphSurface } from "@/components/smoothui/ui/AiInput"

export default function AiInputDemo() {
  return (
    <div className="flex flex-col items-center space-y-8">
      {/* Main Demo */}
      <div className="relative">
        <MorphSurface />
      </div>
    </div>
  )
}

Props

Prop	Type	Default
onSubmit?	(message: string) => void	-
placeholder?	string	Ask me anything...
disabled?	boolean
loading?	boolean
expandable?	boolean
success?	boolean
className?	string	-
children?	React.ReactNode	-

AI Branch

Manages conversation history where users can switch between different versions of their questions and see the corresponding AI responses. Perfect for scenarios where users edit their questions and want to see how the AI response changes.