Apis4Tokens
Apis4Tokens is a starter template for building an API marketplace using Next.js. It includes features for authentication, Stripe integration for payments, a documentation page, and a dashboard for users to manage their API keys and token balance. There is also a helper function to create new API endpoints, simply add the logic and the token cost.
Go BackI was looking to create a custom QR code for some marketing material. I checked to see if there was a free API that did this and I found a paid service which I thought was hilarious because it's super easy to just grab a node or python package, I was just being lazy.
Who would have thought! People are provisioning simple tools as APIs and getting paid for it! Cool, I would like to do that but using a paid service is a big no-no, sharing the profits! Ew.
So I thought I would create my own, I thought a simple boilerplate SaaS, sell tokens through Stripe and create a little template that takes tokens to deduct, and a function to simplify the whole project. - yeah maybe I'll do that later but for now, I got a better idea.
A great opportunity to do something for open source! I grabbed some nice SVGs for the homepage and scraped bits and bobs together from some old projects quickly to get the landing page, dashboard, etc. setup. Some grains on the hero will look great.
I’m using Drizzle to get this all done super fast and have everything basically be written for me, I'll store token transactions etc. in a Postgres along with user data. I think this would be fun to ship to open source so I'm not going to use Clerk or anything, just a simple auth setup.
Okay cool, auth done, Stripe grabbed from another project. All I did was change the products or whatever to be single-time payments. One change that needs to happen is the dashboard. I'll write a quick component of code that allows the user to delete or create API keys, and store them in a table related to the user.
Finally, I created a cool template that handles all the main tasks with the Postgres for people so they can be super duper lazy. And literally just add their env variables, setup Postgres, and create API routes. I'll leave an example in there:
import { NextRequest, NextResponse } from 'next/server';
import { apiTemplate } from '@/lib/easy-api-template';
async function exampleLogic(req: NextRequest) {
// Your custom logic here
const message = "Hello from the API!";
return NextResponse.json({ message }, { status: 200 });
}
export const POST = apiTemplate({
tokenCost: 100, // Cost of this API call in tokens
logic: exampleLogic
});How easy is that!
I'll also add some scripts, some were there before but a “pnpm deployWebhook“ to automatically create the webhook for them too. What a time to be alive!
One last thing, I'll juice it up a bit with a documentation page, I'll just grab what I need from the open-source Aria docs and slap it in my project because it looks clean. I also am going to whip through and change most hardcoded colors to variables and add a dark mode!
A fun project that can be used to quickly set up APIs as a service, or any token-based SaaS. An AI image generator that calls its own API to deduct tokens for example.