@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

``bash
npm install @agentiffai/design
`

$3

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

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

$3

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

Quick Start

`typescript
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 (




Send

);
}

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:

`typescript
// ✅ 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.

$3


- Node.js (v18+)

$3

`bash
./scripts/launch.sh
`

This script will:
- Check for required dependencies
- Start any necessary services
- Open Claude Code with optimal context

$3

1. Check current tasks: /tech tasks or check Archon
2. Select a task to work on
3. Use /prime-feature 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:

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

function App() {
return (





);
}
`

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