AI UX Kit

React components for usage-based AI products

The only UI library with built-in cost transparency for developers building AI tools with usage-based pricing

AI Prompt Input

Smart input with auto-expand, character counter, token estimation, and cost calculation

0 chars·~0 tokens·$0.00000

Try it: Type a message and press Enter or click the submit button. Watch the character count, token estimation, and cost calculation update in real-time.

AI Response

Display AI responses with markdown support, streaming animation, and copy functionality

Test streaming and response variations

Welcome to AI UX Kit

This component supports full markdown rendering with beautiful styling and syntax highlighting.

Code Example

Here's how to calculate token costs:

function calculateCost(tokens, pricePerToken) {
  return (tokens / 1000) * pricePerToken;
}

const cost = calculateCost(5000, 0.002);
console.log(`Cost: $${cost.toFixed(5)}`);

Key Features

  • Inline code like const value = 42
  • Bold text for emphasis
  • Italic text for subtle emphasis
  • External links open in new tabs

"The best way to predict the future is to invent it."

  • Alan Kay

Perfect for displaying AI-generated content!

Features: Full markdown support including code blocks with syntax highlighting, lists, links, blockquotes, and more. Click the copy button to test clipboard functionality.

Usage Meter

Visual usage tracking with cost calculation and status indicators

Low Usage - Safe Status

API Usage
3,000 / 10,000 tokens usedSafe
30%
Total cost: $0.00600

Moderate Usage - Warning Status

API Usage
7,500 / 10,000 tokens usedWarning
75%
Total cost: $0.01500

High Usage - Critical Status

API Usage
9,500 / 10,000 tokens usedCritical
95%
Total cost: $0.01900

Status indicators: Safe (green, 0-70%), Warning (orange, 70-90%), Critical (red, 90-100%). The progress bar stays monotone blue while status is indicated by colored text.

Getting Started

Install the package and start building cost-transparent AI interfaces:

npm install ai-ux-kit

Import components and use them in your React application. All components are fully typed with TypeScript and customizable via props.