A comprehensive design system for CopilotKit components built with React, TypeScript, and styled-components
npm install @agentiffai/designA 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.


- šØ 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
``bash`
npm install @agentiffai/design
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.
`bash`
npm install react react-dom styled-components @copilotkit/react-core @copilotkit/react-ui
`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 (
);
}
export default App;
`
- Core Components: AssistantThinking, ChatInput, NotificationCard, SideMenu, UserMessageActions
- CopilotKit Components: , AgentState, Button, Input, Messages, Window, etc.Layout
- Layout Components: , NavHorizontal, NavVertical, Icon, PaneMenusFacebookIcon
- Brand Icons: , LinkedInIcon, InstagramIcon, XIcon, etc.darkTheme
- Theme: , lightTheme, GlobalStyle, tokens
See full documentation for detailed usage examples.
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';
`
- TypeScript
- React
- Styled-components
- React ARIA
- Playwright (testing)
This project is scaffolded for optimal AI-assisted development with Claude Code.
- Node.js (v18+)
`bash`
./scripts/launch.sh
This script will:
- Check for required dependencies
- Start any necessary services
- Open Claude Code with optimal context
1. Check current tasks: /tech tasks or check Archon/prime-feature
2. Select a task to work on
3. Use to load feature context/lint-and-commit "message"
4. Develop and test
5. Commit with
6. Archive feature spec with /spec-compact
``
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
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
See .claude/docs/` for detailed documentation on:
- Architecture patterns
- Development guidelines
- Testing strategies
- Deployment procedures
This project integrates with Archon for:
- Task management
- Knowledge base (RAG)
- Code examples
- Project documentation
Access Archon at: http://localhost:8181
MIT