Documentation/Getting Started/Quickstart Guide

Quickstart Guide

Instant 30-second setup for existing Next.js and Node.js projects.


Quickstart Guide

Add token metering and cost tracking to your existing AI app in 30 seconds.

1. Install Package

bash
npm install vibezcheck ai stripe

2. Wrap Model in API Route

typescript
400 font-semibold">import { 400 font-semibold">streamText } 400 font-semibold">from 400 font-semibold">class="text-emerald-400">'ai';
400 font-semibold">import { 400 font-semibold">vibezcheck } 400 font-semibold">from 400 font-semibold">class="text-emerald-400">'400 font-semibold">vibezcheck';
 
400 font-semibold">export 400 font-semibold">async 400 font-semibold">function POST(req: 300">Request) {
400 font-semibold">const { messages, customer = 400 font-semibold">class="text-emerald-400">'user@example.com' } = 400 font-semibold">await req.json();
 
400 font-semibold">return 400 font-semibold">streamText({
model: 400 font-semibold">vibezcheck(400 font-semibold">class="text-emerald-400">'openai/gpt-4o-mini', {
customer,
onUsage: ({ usage, cost }) => {
console.log(400 font-semibold">class="text-emerald-400">`Tokens: ${usage.totalTokens} | Cost: $${cost.totalUSD}`);
},
}),
messages,
}).toTextStreamResponse();
}

3. Add Telemetry Hook

tsx
400 font-semibold">class="text-emerald-400">'use client';
400 font-semibold">import { VibezSessionProvider, VibezSessionWidget, 400 font-semibold">useVibezChat } 400 font-semibold">from 400 font-semibold">class="text-emerald-400">'400 font-semibold">vibezcheck/react';
 
400 font-semibold">export 400 font-semibold">default 400 font-semibold">function Chat() {
400 font-semibold">const { messages, input, handleInputChange, handleSubmit } = 400 font-semibold">useVibezChat({
model: 400 font-semibold">class="text-emerald-400">'gpt-4o-mini',
});
 
400 font-semibold">return (
{/* Your chat UI */}
400 font-semibold">class="text-emerald-400">"light" position=400 font-semibold">class="text-emerald-400">"bottom-right" />
);
}