Skip to content

Commit 460a26d

Browse files
author
Justin Torre
committed
credits docs and page touchups
1 parent c103729 commit 460a26d

File tree

4 files changed

+314
-48
lines changed

4 files changed

+314
-48
lines changed

‎bifrost/components/shared/Header.tsx‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { ReactNode } from "react";
2+
import { P } from "../ui/typography";
3+
4+
interface HeaderProps {
5+
title: string | ReactNode;
6+
leftActions?: ReactNode;
7+
rightActions?: ReactNode;
8+
}
9+
10+
export default function Header(props: HeaderProps) {
11+
const { title, leftActions, rightActions } = props;
12+
return (
13+
<header className="flex h-16 w-full shrink-0 flex-row items-center justify-between border-b border-border bg-slate-100 px-4 dark:bg-slate-900">
14+
<div className="flex h-full flex-row items-center gap-2">
15+
{typeof title === "string" ? (
16+
<P className="font-semibold text-muted-foreground">{title}</P>
17+
) : (
18+
title
19+
)}
20+
{leftActions}
21+
</div>
22+
23+
<div className="flex h-full flex-row items-center gap-2">
24+
{rightActions}
25+
</div>
26+
</header>
27+
);
28+
}

‎docs/docs.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@
2626
"tag": "BETA",
2727
"pages": [
2828
"gateway/overview",
29+
"gateway/credits",
2930
"gateway/provider-routing",
3031
{
3132
"group": "Features",

‎docs/gateway/credits.mdx‎

Lines changed: 217 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,217 @@
1+
---
2+
title: "Credits"
3+
sidebarTitle: "Credits"
4+
description: "Pay-as-you-go LLM billing through Helicone Credits with transparent pricing and unified cost tracking"
5+
---
6+
7+
Helicone Credits provide a simple, transparent way to pay for LLM usage across all providers through the AI Gateway. No subscriptions, no commitments. Just add credits and use any model with automatic cost tracking.
8+
9+
<Info>
10+
**Beta**: Credits is currently in beta. [Join the waitlist](https://helicone.ai/credits) to get early access for your organization.
11+
</Info>
12+
13+
## How Credits Work
14+
15+
Credits act as a unified billing system for all your LLM usage through the AI Gateway. Whether you're using GPT-4, Claude, Gemini, or any of the 100+ supported models, costs are automatically deducted from your credit balance.
16+
17+
<CardGroup cols={2}>
18+
<Card title="Unified Billing" icon="credit-card">
19+
One balance for all providers and models accessed through the gateway
20+
</Card>
21+
<Card title="Transparent Pricing" icon="eye">
22+
See exact costs for every model in our Model Registry
23+
</Card>
24+
<Card title="Real-time Tracking" icon="chart-line">
25+
Monitor spending as it happens with detailed analytics
26+
</Card>
27+
<Card title="Team Shared" icon="users">
28+
Share credits across your entire organization
29+
</Card>
30+
</CardGroup>
31+
32+
## Supported Models & Pricing
33+
34+
All pricing is based on our comprehensive [Model Registry](https://helicone.ai/models), which tracks real-time pricing for 100+ models across multiple providers.
35+
36+
<Frame caption="Model Registry showing transparent pricing across all supported providers">
37+
<img
38+
src="/images/model-selection.webp"
39+
alt="Helicone Model Registry interface showing models sorted by price across different providers"
40+
/>
41+
</Frame>
42+
43+
### Popular Models
44+
45+
The AI Gateway automatically routes to the most cost-effective provider for each model:
46+
47+
| Model | Starting Price | Providers |
48+
|-------|----------------|-----------|
49+
| GPT-4o Mini | $0.15/1M tokens | OpenAI, Azure, AWS Bedrock |
50+
| Claude 3.5 Sonnet | $3.00/1M tokens | Anthropic, AWS Bedrock, Google Vertex |
51+
| Gemini 1.5 Flash | $0.075/1M tokens | Google AI, Google Vertex |
52+
| Llama 3.1 8B | $0.18/1M tokens | Together, Fireworks, Groq |
53+
54+
<Note>
55+
Prices shown are input token costs. Output tokens and provider-specific pricing may vary. Visit [helicone.ai/models](https://helicone.ai/models) for complete, up-to-date pricing.
56+
</Note>
57+
58+
## Integration Methods
59+
60+
### BYOK (Bring Your Own Keys) - Available Now
61+
62+
Use your existing provider API keys through the gateway:
63+
64+
```typescript
65+
const client = new OpenAI({
66+
baseURL: "https://ai-gateway.helicone.ai",
67+
apiKey: process.env.HELICONE_API_KEY,
68+
});
69+
70+
// Your provider keys are used for the actual API calls
71+
// Credits track usage for unified billing and analytics
72+
const response = await client.chat.completions.create({
73+
model: "gpt-4o-mini",
74+
messages: [{ role: "user", content: "Hello!" }]
75+
});
76+
```
77+
78+
### PTB (Pass-Through Billing) - Coming Soon
79+
80+
<Warning>
81+
Pass-Through Billing is not yet available. Currently, you need your own provider API keys (BYOK).
82+
</Warning>
83+
84+
Use Helicone's API keys and pay only through credits:
85+
86+
```typescript
87+
// Coming soon - no provider keys needed
88+
const response = await client.chat.completions.create({
89+
model: "gpt-4o-mini",
90+
messages: [{ role: "user", content: "Hello!" }]
91+
// Cost automatically deducted from credits
92+
});
93+
```
94+
95+
## Cost Optimization Features
96+
97+
### Automatic Provider Selection
98+
99+
The gateway automatically selects the cheapest available provider for each model:
100+
101+
1. **Cost-first routing** - Always attempts the lowest-cost provider first
102+
2. **Smart fallbacks** - If the cheapest fails, tries the next cheapest
103+
3. **Real-time pricing** - Uses up-to-date pricing from the Model Registry
104+
105+
### Advanced Cost Tracking
106+
107+
Credits integrate with Helicone's comprehensive cost tracking features:
108+
109+
<CardGroup cols={2}>
110+
<Card title="Session Analytics" icon="layer-group" href="/features/sessions">
111+
Track costs per user interaction or workflow
112+
</Card>
113+
<Card title="Custom Properties" icon="tags" href="/features/advanced-usage/custom-properties">
114+
Segment costs by user tier, feature, or environment
115+
</Card>
116+
<Card title="Cost Alerts" icon="bell" href="/features/alerts">
117+
Set spending thresholds and get notified
118+
</Card>
119+
<Card title="Detailed Reports" icon="file-text" href="/features/reports">
120+
Automated cost summaries and optimization insights
121+
</Card>
122+
</CardGroup>
123+
124+
### Caching for Cost Reduction
125+
126+
Enable [caching](/features/advanced-usage/caching) to eliminate redundant API calls:
127+
128+
```typescript
129+
const response = await client.chat.completions.create({
130+
model: "gpt-4o-mini",
131+
messages: [{ role: "user", content: "Frequently asked question" }]
132+
}, {
133+
headers: {
134+
"Helicone-Cache-Enabled": "true",
135+
"Cache-Control": "max-age=3600"
136+
}
137+
});
138+
```
139+
140+
## Getting Started
141+
142+
<Steps>
143+
<Step title="Join the Waitlist">
144+
Request access at [helicone.ai/credits](https://helicone.ai/credits)
145+
</Step>
146+
<Step title="Add Credits">
147+
Purchase credits through your dashboard once approved
148+
</Step>
149+
<Step title="Configure Gateway">
150+
Set up AI Gateway with your Helicone API key
151+
</Step>
152+
<Step title="Start Building">
153+
Use any model with automatic cost deduction
154+
</Step>
155+
</Steps>
156+
157+
## Best Practices
158+
159+
### Development vs Production
160+
161+
Use different environments to control costs:
162+
163+
```typescript
164+
headers: {
165+
"Helicone-Property-Environment": process.env.NODE_ENV,
166+
"Helicone-Property-UserTier": userTier
167+
}
168+
```
169+
170+
### Monitor Unit Economics
171+
172+
Track costs per user action to understand your business metrics:
173+
174+
```typescript
175+
headers: {
176+
"Helicone-Session-Id": `support-${ticketId}`,
177+
"Helicone-Session-Name": "Customer Support",
178+
"Helicone-Property-UserTier": "premium"
179+
}
180+
```
181+
182+
## Frequently Asked Questions
183+
184+
<AccordionGroup>
185+
<Accordion title="How are credits calculated?">
186+
Credits are deducted based on actual token usage and provider pricing. We use the real-time pricing from our [Model Registry](https://helicone.ai/models) to ensure accurate billing.
187+
</Accordion>
188+
189+
<Accordion title="Do credits expire?">
190+
No, credits never expire. Add credits when you need them and use them at your own pace.
191+
</Accordion>
192+
193+
<Accordion title="Can I use multiple provider keys?">
194+
Yes, with BYOK you can configure multiple provider keys. The gateway will intelligently route based on cost and availability.
195+
</Accordion>
196+
197+
<Accordion title="What happens if I run out of credits?">
198+
API requests will fail with a billing error. Set up [cost alerts](/features/alerts) to get notified before you run low.
199+
</Accordion>
200+
</AccordionGroup>
201+
202+
## Next Steps
203+
204+
<CardGroup cols={2}>
205+
<Card title="Browse All Models" icon="list" href="https://helicone.ai/models">
206+
See complete pricing for 100+ models across providers
207+
</Card>
208+
<Card title="Cost Optimization Guide" icon="chart-line" href="/guides/cookbooks/cost-tracking">
209+
Learn advanced strategies for reducing LLM costs
210+
</Card>
211+
<Card title="Provider Routing" icon="route" href="/gateway/provider-routing">
212+
Configure intelligent routing and fallbacks
213+
</Card>
214+
<Card title="Set Up Alerts" icon="bell" href="/features/alerts">
215+
Get notified about spending thresholds
216+
</Card>
217+
</CardGroup>

0 commit comments

Comments
 (0)