💳 Chipp.ai - NextJS Package

⚡ Building the pay-per-generation monetization platform for AI applications ⚡

Installation

npm i chipp @chipp/nextjs-chipp

NextJS Quickstart

Chipp comes with a specialized NextJS library. Follow the instructions below to integrate.

1. Sign up for an account on https://app.chipp.ai and create an application to generate your API keys for test and live mode.

2. In your project directory, install Chipp and the Chipp NextJS library by running npm i chipp @chipp/nextjs-chipp

3. Add your api key as an environment variable in your app with the name CHIPP_API_KEY

4. Add the Chipp API to your project by creating a new folder named credits to your /api folder in your NextJS project and create a catch-all route named [...chipp].ts , e.g. pages/api/credits/[...chipp].ts

5. In the [...chipp].ts file, add the following:

   import { handleCredits } from "@chipp/nextjs-chipp";
   
   export default handleCredits({
     getUserIdFromRequest: async (req, res) => {
       // Return a unique identifier for the user making the request.
       // This value is hashed before it is stored in the Chipp system.
     },
   });

   Whenever a request is made to the Chipp API, we need a way to identify which user is making the request so that we can load their credit balance accordingly. You will need to implement the getUserIdFromRequest function to return a unique identifier from the request, likely using cookies or authorization headers from the request object.

   Here is an example implementation of the getUserIdFromRequest function for an application that uses Auth0 for user authentication:

   import { getSession } from "@auth0/nextjs-auth0";
   import { handleCredits } from "@chipp/nextjs-chipp";
   
   export default handleCredits({
     getUserIdFromRequest: async (req, res) => {
       const session = await getSession(req, res);
       if (!session?.user.sub) {
         res.status(401).json({ error: "Unauthorized" });
         return "";
       }
   
       // This value is hashed before it is stored in the Chipp system.
       return session?.user.sub as string;
     },
   });

6. Add the <UserCreditsProvider> component as a bottom-level provider in your _app.tsx file.

   import { UserCreditsProvider } from "@chipp/nextjs-chipp/client";
   
   export default function App({ Component, pageProps }) {
     return (
       {/* ...Opening tags for your other providers */}
         <UserCreditsProvider>
           <Component {...pageProps} />
         </UserCreditsProvider>
       {/* ...Closing tags for your other providers */}
     );
   }

7. In the UI portion of your application, use the useUserCredits React hook to display credit balance of the currently logged-in user.

   import { useUserCredits } from "@chipp/nextjs-chipp/client";
   
   export default function YourComponent() {
     const { userCredits, isLoading: balanceLoading } = useUserCredits();
   
     if (balanceLoading) {
       return <div>Loading...</div>;
     }
   
     // userCredits will be defined once balanceLoading is false
     return <div>Credits: {userCredits}</div>;
   }

8. When you make a call to your API to generate something for your user that will require deducting a credit (explained in later steps), call refreshBalance after the API call completes to refresh the credit balance of the user.

   import { useUserCredits } from "@chipp/nextjs-chipp/client";
   
   export default function YourOtherComponent() {
     const { refreshBalance } = useUserCredits();
   
     const handleButtonClick = async () => {
       // Your API is responsible for deducting credits
       // from the users balance. We'll explain how to
       // do that in later steps.
       const response = await fetch("/api/generate-thing");
   
       // ...display something from the response to your user
   
       // Update the user's credit balance.
       // Because we use React Context, calling refreshBalance
       // in one part of your app will update the value everywhere.
       refreshBalance();
     };
   
     // ...
   }

9. In the API endpoint that is responsible for generating something for your user, call deductCredits to deduct credits from the currently logged-in user’s balance. This function will throw an error if the user does not have a sufficient balance, in which case a payment URL will be returned that can be displayed to the user.

   💡 Payment URLs can also be generated on-demand in case you want to allow users to “top up” credits at any time. We will explain how to do this in a later step.

import type { NextApiRequest, NextApiResponse } from "next";
import Chipp from "chipp";

const chipp = new Chipp({
  apiKey: process.env.CHIPP_API_KEY as string,
});

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  const session = await getSession(req, res);
  const userId = session?.user?.sub;

  const user = await chipp.getUser({ userId: userId as string });
  if (!user) {
    res.status(400).json({ error: "User not found" });
    return;
  }

  // See if the user has enough credits to send a message
  const userChippBalance = await user.getCredits();
  if (userChippBalance < 1) {
    // Get a payment URL for the user to add more credits
    const paymentURL = await user.getPackagesURL({
      // Return the user to the homepage after they've paid
      // BASE_URL is set in .env to be the URL of the homepage
      returnToUrl: process.env.AUTH0_BASE_URL,
    });
    res.status(200).json({
      content: `You don't have enough credits to send a message. Please add more credits at ${paymentURL}`,
    });
    return;
  }

  // ...generate something for your user

  // Deduct 1 credit from the user
  await user.deductCredits(1);

  res.status(200).json({
    content: // the thing you generated for the user,
  });
}