Skip to content

Human-AI Interaction Design • Optimizes collaboration between humans and AI

License

Notifications You must be signed in to change notification settings

Qredence/Agentic-UI

Repository files navigation

Agentic UI

Caution

Not Production Ready, don't use it in your workload yet !.

A modern, accessible React component library designed for AI-powered interfaces.

Features

  • 🎨 Beautiful dark theme with consistent design tokens
  • 🔧 Fully typed with TypeScript
  • 📦 Tree-shakeable and side-effect free
  • 🎭 Smooth animations with Framer Motion
  • 🎯 Focused on AI interactions
  • 🌙 Dark mode by default
  • ♿️ Accessible components
  • 📱 Responsive design

Installation

# Install core package
npm install @agentic-ui/core

# Install components package
npm install @agentic-ui/components

Usage

import { Button } from '@agentic-ui/components';
import { theme } from '@agentic-ui/core';

function App() {
  return (
    <Button variant="primary" size="md">
      Click me
    </Button>
  );
}

Available Packages

@agentic-ui/core

Core design tokens and utilities:

  • Color system
  • Typography
  • Spacing
  • Shadows
  • Border radius
  • CSS utilities
  • Theme configuration

@agentic-ui/components

React components optimized for AI interfaces:

  • AgentMessage
  • TracingPanel
  • AgentConversation
  • Button
  • Input
  • Select
  • Card
  • Modal
  • Toolbar
  • SettingsPanel
  • And more...

Development

# Install dependencies
yarn install

# Build all packages
yarn build

# Run tests
yarn test

# Run linting
yarn lint

# Format code
yarn format

Contributing

We welcome contributions! Please see our contributing guide for details.

License

This project is licensed under the MIT License - see the LICENSE file for details.

About

Human-AI Interaction Design • Optimizes collaboration between humans and AI

Topics

Resources

License

Code of conduct

Security policy

Stars

Watchers

Forks

Sponsor this project

 

Packages

No packages published