# Ai Chat Box — Skecher UI

A morphing AI chat composer with configurable models, actions, messages, labels, and controlled state hooks.

## Install

```bash
bunx --bun shadcn@latest add CoDesign-Spa27/skecher-ui/ai-chat-box
```

## Dependencies

- lucide-react
- motion

## Implementation guidance

- No additional implementation constraints are documented.

## Usage

```tsx
"use client";

import { Brain, Sparkles, Zap } from "lucide-react";
import { useState } from "react";

import {
  AiChatBox,
  type AiChatMessage,
  type AiChatModel,
} from "@/components/ui/ai-chat-box";

const models: AiChatModel[] = [
  {
    id: "balanced",
    name: "Balanced",
    description: "Useful for most everyday tasks",
    capability: "General",
    icon: Sparkles,
  },
  {
    id: "reasoning",
    name: "Reasoning",
    description: "Best for complex planning",
    capability: "Deep",
    icon: Brain,
  },
  {
    id: "fast",
    name: "Fast",
    description: "Quick drafts and summaries",
    capability: "Quick",
    icon: Zap,
  },
];

export default function AiChatBoxExample() {
  const [messages, setMessages] = useState<AiChatMessage[]>([]);

  return (
    <AiChatBox
      models={models}
      messages={messages}
      onMessagesChange={setMessages}
      defaultSelectedModelId="balanced"
      onSend={(message, model) => {
        console.info("Send", message.text, "with", model?.name);
      }}
      labels={{
        empty: "What can I help you build?",
        input: "Describe your idea",
        send: "Send message",
      }}
      maxLength={2000}
      submitOnEnter
      className="mx-auto max-w-3xl"
    />
  );
}
```

## Source files

- components/ui-components/ai-chat-box.tsx — Ai Chat Box component

## Canonical resources

- Documentation: https://skecher-ui.com/docs/ai-chat-box
- Registry item with complete source: https://skecher-ui.com/r/ai-chat-box.json
- Component AI context: https://skecher-ui.com/llms/ai-chat-box