React components for usage-based AI products with built-in cost transparency
React components for usage-based AI products
The only UI library with built-in cost transparency for AI applications
Building AI products with usage-based pricing? You need more than just a chat interface.
Existing libraries fall short:
You're left building:
AI UX Kit solves this. Every component has built-in cost transparency, so your users always know what they're spending.
npm install ai-ux-kit
# or
yarn add ai-ux-kit
# or
pnpm add ai-ux-kit
AI UX Kit requires:
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
}
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>
);
}
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:
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:
Supported Markdown:
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:
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.
We welcome contributions! Here's how you can help:
git checkout -b feature/amazing-feature)git commit -m 'Add amazing feature')git push origin feature/amazing-feature)# 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
any types)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).
MIT License - see LICENSE file for details.
Built for developers building usage-based AI products
Made with ❤️ by developers who believe in cost transparency
FAQs
React components for usage-based AI products with built-in cost transparency
We found that ai-ux-kit demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.