AI Input - Mechanical & Steampunk

A dynamic, steampunk-inspired AI input component with animated effects, recording, and sending actions.

The AIInputIndustrial component provides a futuristic, industrial-style text input with built-in send and record controls.
It uses Framer Motion for animations and supports dynamic props for customization.

Live Preview

Open in

INDUSTRIAL AI UNIT

MODEL: IA-2024 | STATUS: READY

TEMP: 98°C

PRESSURE: 100 PSI

READY

GSAP

Framer Motion

Import

import AIInputIndustrial from "@/components/ui/ai-input-industrial"

Basic Usage

<AIInputIndustrial />

Example Usage

This example shows how to integrate AIInputIndustrial with a backend or external API.
When the user sends a command, it will make a fetch request to /api/chat and display the response.

"use client"

import { useState } from "react"
import AIInputIndustrial from "@/components/ui/ai-input-industrial"

export default function IndustrialChatExample() {
  const [messages, setMessages] = useState<{ role: string; text: string }[]>([])

  const handleSend = async (message: string) => {
    // Add user message
    setMessages((prev) => [...prev, { role: "user", text: message }])

    try {
      const res = await fetch("/api/chat", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ message }),
      })

      const data = await res.json()

      // Add AI response
      setMessages((prev) => [...prev, { role: "ai", text: data.reply }])
    } catch (err) {
      setMessages((prev) => [
        ...prev,
        { role: "ai", text: "⚠️ Error: Failed to fetch response" },
      ])
    }
  }

  return (
    <div className="space-y-6">
      <div className="p-4 rounded-lg border border-gray-700 bg-gray-900 text-gray-200 font-mono">
        {messages.length === 0 && (
          <p className="text-gray-500">No messages yet...</p>
        )}
        {messages.map((m, i) => (
          <p key={i} className={m.role === "user" ? "text-orange-400" : "text-green-400"}>
            <strong>{m.role.toUpperCase()}:</strong> {m.text}
          </p>
        ))}
      </div>

      <AIInputIndustrial
        placeholder="Enter your industrial command..."
        onSend={handleSend}
        temperature={95}
        pressure={110}
        status="READY"
      />
    </div>
  )
}