@agentiffai/design

A comprehensive design system for CopilotKit components built with React, TypeScript, and styled-components. Features modern UI components optimized for AI-powered applications with full tree-shaking support.

Features

• 🎨 30+ Components: Comprehensive set of UI components for AI applications
• 🌲 Tree-Shakeable: Only bundle what you use
• 📦 TypeScript: Full type safety and autocomplete
• 🎭 Theming: Light and dark themes with custom styling
• ♿ Accessible: Built with React ARIA for accessibility
• 📱 Responsive: Mobile-first design
• 🚀 Modern: ES2022+ with ESM and CJS support

Installation

npm install @agentiffai/design

⚠️ IMPORTANT: Vite Configuration Required

If using Vite, you MUST add this to your vite.config.ts to prevent build errors:

export default defineConfig({
  optimizeDeps: {
    exclude: ['@agentiffai/design'],
  },
});

Without this configuration, you may encounter Maximum call stack size exceeded errors during build. See VITE_CONFIG.md for details.

Peer Dependencies

npm install react react-dom styled-components @copilotkit/react-core @copilotkit/react-ui

Quick Start

import React from 'react';
import { ThemeProvider } from 'styled-components';
import { darkTheme, GlobalStyle } from '@agentiffai/design/theme';
import { Button, Input, Messages } from '@agentiffai/design/copilotkit';

function App() {
  return (
    <ThemeProvider theme={darkTheme}>
      <GlobalStyle />
      <Messages />
      <Input placeholder="Type a message..." />
      <Button>Send</Button>
    </ThemeProvider>
  );
}

export default App;

Component Categories

• Core Components: AssistantThinking, ChatInput, NotificationCard, SideMenu, UserMessage
• CopilotKit Components: Actions, AgentState, Button, Input, Messages, Window, etc.
• Layout Components: Layout, NavHorizontal, NavVertical, Icon, PaneMenus
• Brand Icons: FacebookIcon, LinkedInIcon, InstagramIcon, XIcon, etc.
• Theme: darkTheme, lightTheme, GlobalStyle, tokens

See full documentation for detailed usage examples.

Tree-Shaking

Import only what you need to minimize bundle size:

// ✅ Category-specific import (recommended)
import { Button, Input } from '@agentiffai/design/copilotkit';
import { LinkedInIcon } from '@agentiffai/design/icons';
import { darkTheme } from '@agentiffai/design/theme';

// ✅ Main entry point also works
import { Button } from '@agentiffai/design';

Technology Stack

• TypeScript
• React
• Styled-components
• React ARIA
• Playwright (testing)

Getting Started

This project is scaffolded for optimal AI-assisted development with Claude Code.

Prerequisites

• Node.js (v18+)

Launch Claude Code

./scripts/launch.sh

This script will:

• Check for required dependencies
• Start any necessary services
• Open Claude Code with optimal context

Development Workflow

1. Check current tasks: /tech tasks or check Archon

2. Select a task to work on

3. Use /prime-feature <name> to load feature context

4. Develop and test

5. Commit with /lint-and-commit "message"

6. Archive feature spec with /spec-compact

Project Structure

agentiffai-design/
├── .claude/           # Claude Code configuration
│   ├── commands/      # Custom slash commands
│   ├── agents/        # Sub-agent definitions
│   ├── hooks.json     # Workflow automation hooks
│   └── docs/          # Project documentation
├── .specify/          # SpecKit constitution
├── specs/             # Feature specifications
├── scripts/          # Utility scripts
└── src/               # Source code

CopilotKit Integration

This design system includes a complete integration with CopilotKit's CopilotSidebar:

import { CopilotKit } from "@copilotkit/react-core";
import { IntegratedSidebar } from "@agentiffai/design/copilotkit";

function App() {
  return (
    <CopilotKit runtimeUrl="/api/copilotkit">
      <IntegratedSidebar>
        <YourApp />
      </IntegratedSidebar>
    </CopilotKit>
  );
}

Documentation:

• 📖 Quick Start Guide - 5-minute setup
• 📚 Integration Guide - Complete technical documentation
• 🏗️ Architecture - Visual diagrams and data flow
• 📝 Summary - Overview and key features

Features:

• ✅ Custom-designed AI chat sidebar
• ✅ Full React ARIA accessibility
• ✅ Theme support (light/dark)
• ✅ Loading states with AssistantThinking component
• ✅ TypeScript support
• ✅ Storybook examples

Documentation

See .claude/docs/ for detailed documentation on:

• Architecture patterns
• Development guidelines
• Testing strategies
• Deployment procedures

Archon Integration

This project integrates with Archon for:

• Task management
• Knowledge base (RAG)
• Code examples
• Project documentation

Access Archon at: http://localhost:8181

License

MIT