DEV Community

Cover image for Build your own AI Prompt Vault in 15 Minutes with Vercel, Next.js and Clarabase
Robert Jay
Robert Jay

Posted on

Build your own AI Prompt Vault in 15 Minutes with Vercel, Next.js and Clarabase

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, or Writing

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)

Image description

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.

Downloading next.js from the dashboard

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".

Generate Clarabase 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

Add secret to env file

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!

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay