🚀 EmpireUI - AI-Powered React Component Library

EmpireUI is a modern, feature-rich component library designed specifically for AI-powered applications. Built with React, TypeScript, and TailwindCSS, our components leverage the latest in AI technology to help you create sophisticated, intelligent interfaces with minimal effort.

🌟 Features

• 🤖 AI-Ready Components: Pre-built components optimized for AI applications
• 🎨 Modern Design: Clean, responsive design with customizable themes
• 📱 Next.js Integration: Seamless integration with Next.js applications
• 🔒 TypeScript Support: Full type safety for all components
• ♿ Accessibility: WCAG compliant components for inclusive applications
• 🌐 Open Source: 100% open source, community-driven development

📦 Installation

# Install via npm
npm install @empireui/components

# Or using yarn
yarn add @empireui/components

# Or using pnpm
pnpm add @empireui/components

🚀 Quick Start

import { AISummarizer } from "@empireui/components";

function App() {
  return (
    <AISummarizer
      openAIApiKey="your-api-key"
      onSummaryGenerated={(summary) => console.log(summary)}
    />
  );
}

🤖 AI Components

1. AISummarizer

Document summarization component that uses OpenAI's GPT model to generate concise summaries from text files.

2. SpeechToText

Real-time speech-to-text conversion with browser's Web Speech API and OpenAI Whisper integration.

3. ChatInterface

Interactive chat interface with OpenAI GPT integration, message history, and real-time responses.

4. AIImageGenerator

AI-powered image generation using DALL·E, with customizable prompts and image sizes.

5. SmartDataTable

Natural language querying of tabular data with AI-powered filtering and analysis.

6. PromptEditor

A powerful component for creating, editing, and testing AI prompts with variable support.

7. VoiceCommandButton

Voice command interface for triggering actions through speech recognition.

🛠️ Development

Prerequisites

• Node.js 16+
• npm/yarn/pnpm
• TypeScript 4.5+

Setup

# Clone the repository
git clone https://github.com/empirecodefoundation/ui.git

# Install dependencies
cd ui
npm install

# Start development server
npm run dev

Project Structure

ui/
├── packages/
│   └── components/          # Main component library
│       ├── src/
│       │   ├── components/  # React components
│       │   └── lib/        # Shared utilities
│       └── dist/           # Build output
└── examples/               # Example applications

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

Development Workflow

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Code Style

• Follow the TypeScript Style Guide
• Use Prettier for code formatting
• Write meaningful commit messages

📚 Documentation

For detailed documentation, visit our documentation site.

🏗️ Architecture

EmpireUI is built with:

• React 19+
• TypeScript
• TailwindCSS
• Radix UI Primitives
• OpenAI API Integration

📄 License

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

🌟 Community

Join our community of developers building the future of AI interfaces:

• GitHub Discussions
• Discord Community
• Twitter

🙏 Acknowledgments

• OpenAI for their powerful AI models
• Radix UI for accessible primitives
• TailwindCSS for utility-first CSS
• All our contributors and supporters

---

Made with ❤️ by the Empire Code Foundation

📖 Table of Contents

• About Empire UI
• Features
• Installation
• Getting Started
• Documentation
• Contributing
• License
• Community
• Acknowledgments

---

🔍 About Empire UI

Empire UI is more than just a component library—it's a complete solution for developers building AI-powered applications on Next.js. Whether you're creating a chatbot interface, an AI-driven dashboard, or any other AI-infused project, Empire UI provides the tools and components you need to build stunning, performant applications.

🎨 Design Philosophy

• Minimalist: Simple, elegant, and modern design.
• AI-Ready: Seamlessly integrate AI features using Vercel AI SDK and other tools.
• Developer-Friendly: Easy to use, extend, and customize.

---

✨ Features

• AI-Ready Components: Pre-built components ready for AI integration.
• Next.js Optimized: Components optimized for use with Next.js applications.
• Vercel AI SDK Integration: Out-of-the-box support for Vercel AI SDK.
• Responsive Design: Fully responsive components for all screen sizes.
• Customizable: Easily extend and customize components to suit your needs.
• Open Source: 100% open source, community-driven.

---

⚙️ Installation

Install Empire UI in your Next.js project with the following commands:

npm install @empire-ui/core
# or
yarn add @empire-ui/core
# or
pnpm add @empire-ui/core