Maintaining a collection of your best AI prompts can dramatically improve the value you get from tools like ChatGPT, Claude, and Stable Diffusion.
While you could just keep your prompts in a spreadsheet or use a paid service, it'd be much more efficient and cost-effective if you had your own centralized place to store, organize and search your prompts. This is what's known as a PromptVault--a prompt management tool for developers and creators using AI models. This allows you to save and reuse your most useful prompts for creating with GenAI models.
In this tutorial, we’ll build our own prompt vault in under 15 minutes using Next.js, Vercel’s V0, and Clarabase. Let's first take a quick look at each of these technologies.
What tools are we using?
- Vercel is a platform that makes deploying and hosting frontend applications very easy
- Next.js, a React-based framework for building server-side rendered and static web applications, is the core of the Vercel platform. Together, they enable rapid development and seamless deployments
- Clarabase is a declarative resource management platform that's great for rapid development. It allows you to set up a production-ready CRUD (create, read, update, delete) layer for your backend given just your data schema
Build Your Prompt Vault
Step 1: Sign Up for Vercel and Clarabase
Visit Vercel and create a free account and connect your Github account (this is already done if you sign up with your Github account). You can alternatively use the CLI.
Then, head over to Clarabase to sign up for a free account. Once logged in, navigate to the schema builder by clicking the "New Resource" button.
Step 2: Create the Schema for your Prompts
Define the structure of your prompts using Clarabase's JSON schema builder (see gif below). Add the following fields:
- title (string, required): Name of the prompt.
- content (string, required): The actual text of the prompt.
- example_output (string): Optional field for showcasing AI outputs.
- tags (array of strings): Tags to help organize and filter prompts.
-
category (enum, required): Predefined caategories like
Art
,Coding
, orWriting
Click save and now we have our backend CRUD management layer immediately ready for requests. (Hint: if you go to the API section, you can test things out from the browser)
Step 3: Generate the Next.js Stub
In the Clarabase dashboard, go to the Code Generator and generate the stub for Next.js. This code will contain the boilerplate code for our backend and API integration.
Step 4: Add client secret
In the Clarabase dashboard, you need to generate your client secret so that your API requests are properly authenticated. Got to Settings > API Settings and click the "Generate New Client Secret".
Copy it and add it to the environment variables file (.env.local) in the Next.js starter code as the value for CLARABASE_CLIENT_SECRET
Step 5: Install Dependencies
-
Project Dependencies Ensure we add our dependencies by running
npm install
from the top level of the directory - TailwindCSS (optional, for styling) follow the steps here to install TailwindCSS for styling
-
Vercel CLI for deploying:
npm i -g vercel
You can also test everything out locally by running npm run dev
.
Step 6: Add the UI
We'll add UI for CRUD actions for our prompts. Visit this github repo and copy this folder with our UI components into your app
dir.
Copy the generated code into your Next.js project’s pages directory.
Step 7: Deploy Your App
- From the top level of your next.js project, run:
vercel
🎉 Your fully functional PromptVault is now live!
In less than 15 minutes, you’ve built and deployed a fully functional PromptVault. Not too long ago, this would have at least taken a full day. Although we didn't go over it here, an important next step would be to separate data by users if your app requires that. Hopefully this tutorial and the stack helps you get to prod quicker!
To see the full project on Github, visit this repo. Leave questions or comments if you have suggestions for making it even better!
Top comments (0)