For Vibecoders

Set up the Zerocost SDK in this project.

1. Run in terminal:
   npx @zerocost/sdk
   This installs the package and auto-creates a Zerocost config file.

2. Verify whether this app uses TypeScript or JavaScript (e.g., Next.js/Vite projects can be either). Decide which config file to use:
   - TypeScript: src/zerocost.ts
   - JavaScript: src/zerocost.js (or zerocost.js if no src directory)

3. Replace the config file contents using the selected mode (TypeScript):
   - File: src/zerocost.ts

import { ZerocostSDK } from '@zerocost/sdk';

// This is your src/zerocost.ts file
export const zc = new ZerocostSDK({
  appId: "your_app_id",
  apiKey: "zc_live_YOUR_KEY_HERE",
  appName: "My App",
  debug: true,
  llm: {
    llmPath: "/api" // Enter which page on your app has the most interaction for precision
  },
  consent: {
    showSettingsButton: true, // Recommended: show a floating "Privacy Settings" button
  },
  // Optional: mirror the roles you save in Ad Display
  ads: {
    roleTargeting: {
      enabled: true,
      allowedRoles: ["free", "basic"]
    }
  }
});

// Optional: role-based ad visibility
zc.identify("user_123", {
  role: "free"
});

zc.init().catch(console.error);

4. Import this file in the project entry point (e.g. main.ts, index.ts, layout.tsx, or equivalent):
   import "./zerocost";

5. Ask the user if they want to:
   - Verify if the credentials are correct with the user like the App Name, etc.
   - Provide the appId and API key if they were not provided to you. If either is missing, use https://zerocost.app/ to help them create an account and get their credentials there.
   - Setup Zerocost's built-in consent popup.
   - Direct ads only to specific plans/roles (e.g., only 'free' users).
   - Enable LLM-data selling (anonymized) - if yes, ask what route their AI chatbot lives on.
   Once you get these inputs, update the zc config accordingly.

6. Confirm the setup with the user before finishing.