AI UX Kit

React components for usage-based AI products

The only UI library with built-in cost transparency for AI applications

Live Demo • Documentation • NPM Package

The Problem

Building AI products with usage-based pricing? You need more than just a chat interface.

Existing libraries fall short:

• assistant-ui: Excellent chat UI, but zero cost transparency features
• Vercel AI SDK UI: Great streaming support, but no token counting or cost tracking
• shadcn/ui: General components, nothing AI-specific

You're left building:

• Token estimation from scratch
• Cost calculators manually
• Usage tracking UI yourself
• All the boring (but critical) stuff users need to trust your product

AI UX Kit solves this. Every component has built-in cost transparency, so your users always know what they're spending.

Installation

npm install ai-ux-kit
# or
yarn add ai-ux-kit
# or
pnpm add ai-ux-kit

Dependencies

AI UX Kit requires:

• React 18+
• Tailwind CSS 3+
• Next.js 14+ (recommended)

Make sure your tailwind.config.js includes the AI UX Kit paths:

module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
    './node_modules/ai-ux-kit/**/*.{js,ts,jsx,tsx}', // Add this line
  ],
  // ... rest of config
}

Quick Start

Here's a complete example with all three components working together:

'use client';

import { useState } from 'react';
import { AIPromptInput, AIResponse, UsageMeter } from 'ai-ux-kit';

export default function MyAIApp() {
  const [input, setInput] = useState('');
  const [response, setResponse] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const [tokensUsed, setTokensUsed] = useState(0);

  const handleSubmit = async (message: string) => {
    setIsLoading(true);

    // Your AI API call here
    const result = await fetch('/api/ai', {
      method: 'POST',
      body: JSON.stringify({ message }),
    });

    const data = await result.json();
    setResponse(data.response);
    setTokensUsed(prev => prev + data.tokensUsed);
    setIsLoading(false);
  };

  return (
    <div className="max-w-4xl mx-auto p-6 space-y-6">
      {/* Usage Tracking */}
      <UsageMeter
        tokensUsed={tokensUsed}
        tokenLimit={10000}
        costPerToken={0.002}
        label="Monthly Usage"
      />

      {/* AI Input */}
      <AIPromptInput
        onSubmit={handleSubmit}
        isLoading={isLoading}
        placeholder="Ask anything..."
        maxLength={2000}
      />

      {/* AI Response */}
      <AIResponse
        content={response}
        isStreaming={isLoading}
        onCopy={() => console.log('Copied!')}
      />
    </div>
  );
}

Components

AIPromptInput

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

Props:

| Prop | Type | Default | Description | |------|------|---------|-------------| | onSubmit | (text: string) => void | required | Callback when user submits | | isLoading | boolean | required | Shows loading state | | placeholder | string | "Ask anything..." | Input placeholder text | | maxLength | number | 2000 | Maximum character limit |

Example:

import { AIPromptInput } from 'ai-ux-kit';

function MyInput() {
  const [isLoading, setIsLoading] = useState(false);

  return (
    <AIPromptInput
      onSubmit={(text) => {
        console.log('User submitted:', text);
        setIsLoading(true);
        // Make your API call
      }}
      isLoading={isLoading}
      placeholder="What would you like to know?"
      maxLength={5000}
    />
  );
}

Features:

• ✅ Auto-expanding textarea (up to 6 lines)
• ✅ Real-time character count
• ✅ Token estimation (~4 chars = 1 token)
• ✅ Cost calculation per input
• ✅ Enter to submit, Shift+Enter for new line
• ✅ Disabled state during loading

AIResponse

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

Props:

| Prop | Type | Default | Description | |------|------|---------|-------------| | content | string | required | Markdown content to display | | isStreaming | boolean | required | Shows streaming animation | | onCopy | () => void | undefined | Callback when copied |

Example:

import { AIResponse } from 'ai-ux-kit';

function MyResponse() {
  const [isStreaming, setIsStreaming] = useState(true);
  const content = `
# Hello!

Here's some **bold text** and a code example:

\`\`\`javascript
const greeting = "Hello, world!";
console.log(greeting);
\`\`\`
  `;

  return (
    <AIResponse
      content={content}
      isStreaming={isStreaming}
      onCopy={() => console.log('Content copied!')}
    />
  );
}

Features:

• ✅ Full markdown support (GitHub Flavored Markdown)
• ✅ Syntax highlighting for code blocks
• ✅ Streaming cursor animation
• ✅ Copy to clipboard button
• ✅ Animated "AI is thinking..." indicator
• ✅ Responsive design

Supported Markdown:

• Headings (h1-h6)
• Bold, italic, inline code
• Code blocks with syntax highlighting
• Lists (ordered & unordered)
• Links (open in new tab)
• Blockquotes

UsageMeter

Visual usage tracking with cost calculation and status indicators.

Props:

| Prop | Type | Default | Description | |------|------|---------|-------------| | tokensUsed | number | required | Current token usage | | tokenLimit | number | required | Maximum token limit | | costPerToken | number | 0.002 | Cost per 1K tokens | | showCost | boolean | true | Show/hide cost display | | label | string | "Usage" | Label text |

Example:

import { UsageMeter } from 'ai-ux-kit';

function MyUsageTracker() {
  return (
    <div className="space-y-4">
      {/* Low usage - Safe */}
      <UsageMeter
        tokensUsed={3000}
        tokenLimit={10000}
        label="API Usage"
        costPerToken={0.002}
      />

      {/* High usage - Warning */}
      <UsageMeter
        tokensUsed={7500}
        tokenLimit={10000}
        label="Monthly Quota"
        costPerToken={0.003}
      />

      {/* Critical - Over limit */}
      <UsageMeter
        tokensUsed={9500}
        tokenLimit={10000}
        label="Rate Limit"
        showCost={false}
      />
    </div>
  );
}

Features:

• ✅ Animated progress bar
• ✅ Status indicators (Safe, Warning, Critical)
• ✅ Automatic color coding:
  • Green (Safe): 0-70% usage
  • Orange (Warning): 70-90% usage
  • Red (Critical): 90-100% usage
• ✅ Real-time cost calculation
• ✅ Comma-formatted numbers
• ✅ Percentage display

Live Demo

View Live Demo →

Or run locally:

git clone https://github.com/yourusername/ai-ux-kit.git
cd ai-ux-kit
npm install
npm run dev

Open http://localhost:3000 to see all components in action.

Who Is This For?

✅ Perfect For:

• Developers building usage-based AI products - Give users cost transparency
• AI API wrapper services - Show token usage and costs in real-time
• Internal AI tools - Track spending across teams/departments
• Developer tools with AI features - Build trust with cost-aware UIs
• SaaS products with AI add-ons - Let users monitor their AI usage

❌ Not Ideal For:

• Consumer subscription products (like ChatGPT clones) - Users don't pay per token
• Static websites - These are React components
• Projects without usage-based pricing - Cost transparency won't add value

Features

• 🎯 Cost Transparency - Real-time token counting and cost estimation
• ⚡ Streaming Support - Built-in support for AI response streaming
• 📝 Markdown Rendering - GitHub Flavored Markdown with syntax highlighting
• 📦 TypeScript - Full type safety out of the box
• 🎨 Tailwind CSS - Utility-first styling, easily customizable
• 📱 Mobile Responsive - Works beautifully on all screen sizes
• ♿ Accessible - WCAG compliant, keyboard navigable
• 🚀 Zero Config - Works out of the box with Next.js
• 🔧 Flexible - Customizable via props and Tailwind classes

Roadmap

✅ v0.1 - Core Components (Shipped!)

• AIPromptInput with token/cost estimation
• AIResponse with markdown & streaming
• UsageMeter with status indicators

🚧 v0.2 - Enhanced Analytics (Coming Q2 2025)

• TokenHistoryChart - Visualize usage over time
• RateLimitIndicator - Show API rate limit status
• CostBreakdown - Per-model cost analysis
• UsageAlerts - Configurable usage warnings

🔮 v0.3 - Theming & Customization

• Dark mode support
• Theme customization system
• Custom color palettes
• Component variants

🎯 v1.0 - Stable Release

• Comprehensive documentation site
• Storybook component explorer
• Full test coverage
• Performance optimizations

Tech Stack

• React 18.3+
• TypeScript 5.9+
• Next.js 14.2+ (recommended)
• Tailwind CSS 3.4+
• react-markdown - Markdown rendering
• react-syntax-highlighter - Code syntax highlighting

Contributing

We welcome contributions! Here's how you can help:

🐛 Report Bugs

• Open an issue on GitHub
• Describe the bug and steps to reproduce
• Include screenshots if applicable

💡 Suggest Features

• Open a feature request issue
• Explain the use case
• Share example implementations if you have them

🔧 Submit PRs

1. Fork the repository
2. Create a 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

Development Setup

# Clone the repository
git clone https://github.com/yourusername/ai-ux-kit.git
cd ai-ux-kit

# Install dependencies
npm install

# Start development server
npm run dev

# Open http://localhost:3000

Guidelines

• Write TypeScript (no any types)
• Follow existing code style
• Add comments for complex logic
• Test on mobile devices
• Update README if adding features

FAQ

Q: Does this work with OpenAI/Anthropic/other AI APIs? A: Yes! AI UX Kit is API-agnostic. Use it with any AI service - just pass the response content and token counts to the components.

Q: Can I customize the styling? A: Absolutely. All components use Tailwind CSS classes, so you can override styles or extend them in your tailwind.config.js.

Q: Does it work with App Router (Next.js 13+)? A: Yes! All components are marked with 'use client' and work seamlessly with Next.js 13+ App Router.

Q: Is this production-ready? A: We're in v0.1 (beta). The components are stable and tested, but the API might change before v1.0. Use in production at your own discretion.

Q: How accurate is the token estimation? A: The estimation uses a simple 4-char ≈ 1-token formula. For precise counts, use your AI provider's tokenizer (e.g., tiktoken for OpenAI).

License

MIT License - see LICENSE file for details.

Support

• 📖 Documentation (this README)
• 💬 GitHub Discussions
• 🐛 Issue Tracker
• 🐦 Twitter/X Updates (coming soon)

Built for developers building usage-based AI products

Made with ❤️ by developers who believe in cost transparency

⭐ Star on GitHub • 📦 NPM Package