5-Minute Step-by-Step Tutorial

npx create-next-app@latest my-ai-app --typescript --tailwind --app --eslint
cd my-ai-app

npm install vibezcheck ai @ai-sdk/openai stripe

// app/api/chat/route.ts
import { streamText } from 'ai';
import { vibezcheck } from 'vibezcheck';
export const runtime = 'nodejs';
export const dynamic = 'force-dynamic';
export async function POST(req: Request) {
  const { messages, customer = 'demo@example.com' } = await req.json();
  // ⚡ 1-Line Model Meter
  return streamText({
    model: vibezcheck('openai/gpt--mini', {
      customer,
      maxCostPerCallUSD: 0.10, // Safety ceiling: abort if single call exceeds $0.10
      onUsage: (event) => {
        console.log(`✅ Tokens: ${event.usage.totalTokens} | Cost: $${event.cost.totalUSD.toFixed(6)}`);
      },
    }),
    messages,
  }).toDataStreamResponse();
}

// app/page.tsx
'use client';
import { VibezSessionProvider, useVibezChat, VibezSessionWidget } from 'vibezcheck/react';
function Chat() {
  const { messages, input, handleInputChange, handleSubmit, isLoading } = useVibezChat({
    model: 'gpt-4o-mini',
    customer: 'demo@example.com',
  });
  return (
    <main className="max-w-xl mx-auto p-6 space-y-4">
      <h1 className="text-xl font-bold">My AI Chat</h1>
      {/* Messages Feed */}
      <div className="space-y-3 border border-slate-200 rounded-xl p-4 min-h-[] bg-slate-50">
        {messages.map((m) => (
          <div key={m.id} className="text-sm">
            <strong>{m.role === 'user' ? 'You: ' : 'AI: '}</strong>
            <span>{m.content}</span>
          </div>
        ))}
        {isLoading && <div className="text-xs text-slate-400 italic">Thinking...</div>}
      </div>
      {/* Input Form */}
      <form onSubmit={handleSubmit} className="flex gap-2">
        <input
          value={input}
          onChange={handleInputChange}
          placeholder="Ask a question..."
          className="flex-1 px-3 py-2 border border-slate-300 rounded-lg text-sm"
        />
        <button
          type="submit"
          disabled={isLoading}
          className="px-4 py-2 bg-black text-white rounded-lg text-sm font-medium disabled:opacity-50"
        >
          Send
        </button>
      </form>
      {/* Floating real-time token & dollar counter */}
      <VibezSessionWidget theme="light" position="bottom-right" />
    </main>
  );
}
export default function App() {
  return (
    <VibezSessionProvider>
      <Chat />
    </VibezSessionProvider>
  );
}

npm run dev