@lastbrain/ai-ui-theme-heroui

HeroUI theme implementation for LastBrain AI UI Kit.

Features

• Styled components using HeroUI primitives
• Drop-in replacements for headless components
• Beautiful, accessible UI
• Tailwind CSS compatible

Installation

npm install @lastbrain/ai-ui-theme-heroui @lastbrain/ai-ui-react @lastbrain/ai-ui-core
# or
pnpm add @lastbrain/ai-ui-theme-heroui @lastbrain/ai-ui-react @lastbrain/ai-ui-core

Usage

import { AiProvider } from "@lastbrain/ai-ui-react";
import {
  HerouiAiInput,
  HerouiAiTextarea,
  HerouiAiSettingsButton,
} from "@lastbrain/ai-ui-theme-heroui";

function App() {
  return (
    <AiProvider baseUrl="https://api.lastbrain.com" apiKeyId="your-key">
      <div className="space-y-4">
        <HerouiAiInput
          model="openai/gpt-4o-mini"
          prompt="Improve this text"
          placeholder="Enter text to improve..."
          onValue={(text) => console.log(text)}
          onToast={(toast) => {
            if (toast.type === "success") {
              // Show success toast
            } else {
              // Show error toast
            }
          }}
        />

        <HerouiAiTextarea
          model="openai/gpt-4o-mini"
          prompt="Write a detailed response"
          placeholder="Enter your topic..."
        />

        <HerouiAiSettingsButton />
      </div>
    </AiProvider>
  );
}

Components

All components are prefixed with Heroui and provide styled implementations of the headless components:

• HerouiAiInput - Styled input with AI button
• HerouiAiTextarea - Styled textarea with AI button
• HerouiAiSelect - Styled select dropdown
• HerouiAiChipLabel - Styled chip/label
• HerouiAiImageButton - Styled image generation button
• HerouiAiSettingsButton - Styled settings button with popover
• HerouiAiPromptPanel - Styled modal/drawer for prompt selection
• HerouiAiModelSelect - Styled model select dropdown

Customization

Components accept all HeroUI props for styling:

<HerouiAiInput
  color="primary"
  variant="bordered"
  size="lg"
  radius="md"
  model="openai/gpt-4o-mini"
  prompt="Improve this"
/>

API Reference

See the full documentation for detailed API reference.