@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

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

or with bun:

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

Quick Start

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:

<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.

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 - Detailed architecture and design decisions
• Storybook - Interactive component documentation (run bun run storybook)

API Integration

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

// 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

# 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