npm package: @principal-ade/industry-themed-ai-sdk
Description: Industry-themed AI SDK wrapper with integrated theming and panel support
Author: Principal ADE Team
Latest version: 0.3.1

# @principal-ade/industry-themed-ai-sdk

Industry-themed AI SDK wrapper with integrated theming support for Vercel AI SDK.

> **Status**: Core components implemented and functional. Panel framework integration coming soon.

## Features

### ✅ Implemented
- ✅ Seamless integration with `@a24z/industry-theme`
- ✅ Complete UI layer for AI SDK's headless `useChat` hook
- ✅ Built-in message rendering with markdown support
- ✅ Code syntax highlighting with copy-to-clipboard
- ✅ Lucide React icons throughout
- ✅ TypeScript support with full type definitions
- ✅ Loading states and error handling
- ✅ Auto-scrolling message list
- ✅ Empty state handling
- ✅ Responsive layout with CSS custom properties
- ✅ Storybook documentation

### 🚧 Coming Soon
- Panel framework compatibility (`@principal-ade/panel-framework-core`)
- `useCompletion` and `useObject` hook support
- Advanced syntax highlighting with `react-syntax-highlighter`
- Context enrichment for panel integration
- Event emission system
- Unit and E2E tests

## Installation

```bash
npm install @principal-ade/industry-themed-ai-sdk ai @a24z/industry-theme
```

or with bun:

```bash
bun add @principal-ade/industry-themed-ai-sdk ai @a24z/industry-theme
```

## Quick Start

```tsx
import { ThemedAIChat } from '@principal-ade/industry-themed-ai-sdk';
import { useTheme } from '@a24z/industry-theme';
import '@principal-ade/industry-themed-ai-sdk/styles.css';

function App() {
  const { theme } = useTheme();

  return (
    <ThemedAIChat
      theme={theme}
      api="/api/chat"
      placeholder="Ask me anything..."
    />
  );
}
```

## Available Components

### `<ThemedAIChat />`
Main chat component with full AI SDK integration.

**Props:**
- `theme` - Industry theme object from `@a24z/industry-theme`
- `api` - API endpoint or handler function
- `placeholder` - Input placeholder text
- `initialMessages` - Initial messages to display
- `hideToolbar` - Hide the toolbar (default: true)
- `onFinish` - Callback when message is complete
- `onError` - Error handler

**Example:**
```tsx
<ThemedAIChat
  theme={theme}
  api="/api/chat"
  placeholder="How can I help you?"
  initialMessages={[
    { role: 'assistant', content: 'Hello! How can I assist you today?' }
  ]}
  onFinish={(message) => console.log('Message complete:', message)}
/>
```

### `useThemedAIChat`
Hook for building custom chat UIs.

```tsx
const chat = useThemedAIChat({
  theme,
  api: '/api/chat',
  onFinish: (message) => console.log(message),
});

// Access chat state
const { messages, input, isLoading, error } = chat;
const { handleSubmit, handleInputChange } = chat;
const { getCSSVariables, themeClassName } = chat;
```

### Additional Components
- `<ChatMessageList />` - Message display with auto-scroll
- `<ChatMessage />` - Individual message with role-based styling
- `<ChatInput />` - Themed input form
- `<MarkdownRenderer />` - Markdown content renderer
- `<CodeBlock />` - Code syntax highlighting with copy button

## Documentation

- [DESIGN.md](./DESIGN.md) - Detailed architecture and design decisions
- [Storybook](http://localhost:6009) - Interactive component documentation (run `bun run storybook`)

## API Integration

The chat component works with any backend that follows the AI SDK protocol:

```typescript
// Next.js API route example
import { streamText } from 'ai';
import { openai } from '@ai-sdk/openai';

export async function POST(req: Request) {
  const { messages } = await req.json();

  const result = await streamText({
    model: openai('gpt-4'),
    messages,
  });

  return result.toDataStreamResponse();
}
```

## Development

```bash
# Install dependencies
bun install

# Start Storybook
bun run storybook

# Build
bun run build

# Type checking
bun run typecheck

# Linting
bun run lint
```

## License

MIT © Principal ADE Team