Keygen UI is a comprehensive, enterprise-grade frontend application that provides a beautiful interface for managing software licensing through the Keygen API. Built with modern web technologies, it offers complete CRUD operations for licenses, machines, products, policies, groups, entitlements, webhooks, and users with advanced organizational and notification capabilities.

• 🎨 Beautiful Design: Modern, responsive interface built with shadcn/ui components
• 🚀 Production Ready: Fully functional with real API integration and enterprise features
• 📱 Mobile First: Responsive design that works on all devices
• ⚡ Fast & Modern: Built with Next.js 15, React 19, and Turbopack
• 🔒 Secure: Complete authentication system with protected routes
• 🏢 Enterprise Grade: Advanced organizational features with groups, entitlements, and webhooks
• 🛠 Developer Friendly: Full TypeScript support with comprehensive type safety

• Secure Login System - Email/password authentication with session management
• Protected Routes - Role-based access control throughout the application
• User Profiles - Integrated user management with logout functionality

• Real-time Overview - Live statistics from your Keygen instance
• Interactive Charts - Visual data representation with responsive design
• Quick Actions - Easy access to common management tasks

• Complete CRUD Operations - Create, read, update, delete licenses with professional dialogs
• Advanced Search & Filtering - Find licenses by status, user, or policy
• License Actions - Suspend, reinstate, renew licenses with one click
• Edit License Properties - Update name, expiry, usage limits, and metadata
• Activation Token Generation - Generate secure tokens for license activation
• License Key Management - Copy keys, view detailed usage statistics

• Device Monitoring - Real-time heartbeat status tracking
• Machine Details - Hardware information and activation history
• Fingerprint Management - Unique device identification
• Status Controls - Activate, deactivate, and manage machine states

• Product Catalog - Comprehensive product lifecycle management
• Distribution Strategies - Licensed, Open, and Closed distribution models
• Platform Support - Multi-platform configuration and management
• Metadata Management - Custom product information and settings

• Smart Policy Creation - API-compliant minimal parameter approach
• Policy Templates - Floating, strict, protected, and timed policies
• Search & Filter - Find policies by type and configuration
• Professional Dialogs - Beautiful delete confirmations with proper warnings

• Organization Structure - Create and manage user/license groups
• Resource Limits - Set maximum licenses, machines, and users per group
• Group Relationships - Assign users and licenses to groups
• Group Analytics - View group usage and member details

• Feature Toggles - Create and manage feature-based entitlements
• Code-Based System - Unique identifier system for integration
• License Association - Link entitlements to specific licenses
• Auto-Code Generation - Smart code generation from entitlement names

• Real-time Notifications - Configure endpoints for event notifications
• Event Selection - Subscribe to 35+ event types organized by category
• Webhook Testing - Send test events to validate endpoints
• Status Management - Enable/disable webhooks with instant toggles
• Delivery Tracking - Monitor webhook delivery history and success rates
• Security - Signing key support for secure webhook verification

• User Directory - Complete user account management
• Role-Based Access - Admin, Developer, Sales Agent, Support roles
• User Moderation - Ban/unban functionality with audit trails
• Profile Management - User information and account settings

• Node.js 18+
• PNPM (recommended package manager)
• Keygen Account with API access

1. Clone the repository

   git clone https://github.com/orcunbaslak/keygen-ui.git
   cd keygen-ui

2. Install dependencies

   pnpm install

3. Configure environment variables

   cp .env.example .env.local

   Update .env.local with your Keygen instance details:

   KEYGEN_API_URL=https://api.keygen.sh/v1
   KEYGEN_ACCOUNT_ID=your-account-id
   KEYGEN_ADMIN_EMAIL=your-email@example.com
   KEYGEN_ADMIN_PASSWORD=your-secure-password

4. Start the development server

   pnpm dev

5. Open your browser

   Navigate to http://localhost:3000

You should now have a fully functional Keygen UI running locally.

• Start here: AGENTS.md — index for all project docs and guidance for agents.

Keygen UI comes with a fully typed API client that handles all interactions with the Keygen API:

import { getKeygenApi } from '@/lib/api'

const api = getKeygenApi()

// Example: List licenses
const licenses = await api.licenses.list({ limit: 50 })

// Example: Create a new license
const newLicense = await api.licenses.create({
  policyId: 'policy-123',
  userId: 'user-456'
})

// Example: Create a group
const group = await api.groups.create({
  name: 'Enterprise Customers',
  maxLicenses: 100
})

// Example: Create an entitlement
const entitlement = await api.entitlements.create({
  name: 'Premium Features',
  code: 'premium_features'
})

// Example: Create a webhook
const webhook = await api.webhooks.create({
  endpoint: 'https://myapp.com/webhooks',
  events: ['license.created', 'license.expired']
})

All components follow consistent patterns and use shadcn/ui:

'use client'

import { useState } from 'react'
import { Button } from '@/components/ui/button'
import { toast } from 'sonner'

export function ExampleComponent() {
  const [loading, setLoading] = useState(false)
  
  return (
    <Button 
      onClick={() => toast.success('Hello World!')}
      disabled={loading}
    >
      Click Me
    </Button>
  )
}

• /login - Authentication page
• /dashboard - Main dashboard with analytics
• /dashboard/licenses - License management
• /dashboard/machines - Machine monitoring
• /dashboard/products - Product management
• /dashboard/policies - Policy management
• /dashboard/groups - NEW Group management and organization
• /dashboard/entitlements - NEW Feature entitlement management
• /dashboard/webhooks - NEW Real-time webhook configuration
• /dashboard/users - User administration

Keygen UI uses Tailwind CSS with CSS variables for easy theming:

:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --primary: 222.2 47.4% 11.2%;
  /* ... more variables */
}

Use the shadcn/ui CLI to add new components:

npx shadcn@latest add dialog
npx shadcn@latest add data-table

Extend the API client by adding new resources:

// src/lib/api/resources/custom.ts
export class CustomResource {
  constructor(private client: KeygenClient) {}
  
  async customMethod() {
    return this.client.request('/custom-endpoint')
  }
}

# Development
pnpm dev          # Start development server
pnpm build        # Build for production
pnpm start        # Start production server

# Code Quality
pnpm lint         # Run ESLint
pnpm typecheck    # TypeScript type checking

# Dependencies
pnpm add <package>     # Add new dependency

src/
├── app/                 # Next.js App Router
│   ├── (dashboard)/     # Dashboard routes
│   │   ├── groups/     # Group management (NEW)
│   │   ├── entitlements/ # Entitlement management (NEW)
│   │   ├── webhooks/   # Webhook management (NEW)
│   │   └── ...         # Other routes
│   └── login/           # Authentication
├── components/          # React components
│   ├── ui/             # shadcn/ui components
│   ├── licenses/       # License management
│   ├── machines/       # Machine management
│   ├── groups/         # Group management (NEW)
│   ├── entitlements/   # Entitlement management (NEW)
│   ├── webhooks/       # Webhook management (NEW)
│   └── users/          # User management
├── lib/                # Utilities and API
│   ├── api/            # Keygen API client
│   │   └── resources/  # All API resource classes
│   ├── auth/           # Authentication
│   └── types/          # TypeScript types

Keygen UI now includes advanced enterprise-grade features that transform it from a basic license management tool into a comprehensive licensing platform:

• Groups: Organize users and licenses into hierarchical groups
• Resource Limits: Set per-group limits for licenses, machines, and users
• Bulk Assignment: Efficiently manage group memberships

• Entitlements: Create feature flags and permission-based licensing
• Code-Based Integration: Easy integration with your application code
• License Association: Link specific features to individual licenses

• Webhook Management: Configure endpoints for 35+ event types
• Event Categories: Organized by resource type (license, machine, product, etc.)
• Security Features: Signing keys and delivery verification
• Testing Tools: Built-in webhook testing and monitoring

• Request Logs: Complete API usage monitoring (API ready)
• Performance Metrics: Track system performance and usage patterns
• Event Analytics: Webhook delivery success rates and error tracking

Keygen UI now covers 90% of the Keygen API surface area with:

• 9 complete resource management interfaces
• Professional CRUD operations for all resources
• Advanced filtering and search capabilities
• Comprehensive error handling and user feedback

We welcome contributions! Here's how to get started:

git clone https://github.com/your-username/keygen-ui.git

git checkout -b feature/amazing-feature

• Follow the existing code style
• Add tests for new features
• Update documentation as needed

git commit -m "Add amazing feature"
git push origin feature/amazing-feature

Describe your changes and link any related issues.

• Use PNPM for package management
• Follow TypeScript strict mode
• Use shadcn/ui components for UI
• Add proper error handling with toast notifications
• Include loading states for async operations

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

• Keygen - For providing an excellent software licensing API
• shadcn/ui - For beautiful, accessible UI components
• Next.js Team - For the amazing React framework
• Tailwind CSS - For the utility-first CSS framework

• Documentation: Check out our documentation
• Issues: Report bugs on GitHub Issues
• Discussions: Join conversations in GitHub Discussions