Prompt Stores

Understanding how prompt stores can be used to speed up the generative development process

As your prompts get more specific and contextual, you will find that writing out the same specifiers over and over again is tiring. To alleviate this, you can provide context of shorthands or variables within your conversation that let the model know that a specific prompt means something to you, welcome prompt stores.

For example, in a bicycle rental application that uses React, Next.js, Chakra UI, Yup, and Axios libraries. You would not want to have to write create a contact form using react, next.js, chakra ui, yup, and axios and then for the sign up page rewrite create a sign up page using react, next.js, chakra ui, yup, and axios.

Example

Create a prompt store to store language and libraries

Prompt

chatgpt-3.5: 
when I write bicycle-app-config remember that I mean "next.js, chakra ui, yup, and axios"

Response

Sure, I'll keep that in mind! When you write bicycle-app-config, I'll assume that you mean a configuration that includes Next.js, Chakra UI, Yup, and Axios.

Discussion

Perfect. Now that we have a prompt store that retains the context of the languages and libraries we use, let's see it in practice.

Prompt

chatgpt-3.5

create a contact form, bicycle-app-config

Response

Sure, here's an example of how you can create a contact form in a Next.js app with Chakra UI, Yup, and Axios, using the bicycle-app-config:

import React from "react";
import { Box, Button, FormControl, FormErrorMessage, FormLabel, Input, Textarea } from "@chakra-ui/react";
import { useFormik } from "formik";
import * as Yup from "yup";
import axios from "axios";

const contactSchema = Yup.object().shape({
  name: Yup.string()
    .required("Name is required")
    .matches(/^[a-zA-Z\s]*$/, "Invalid name format"),
  email: Yup.string().email("Invalid email format").required("Email is required"),
  message: Yup.string().required("Message is required"),
});

const ContactForm = () => {
  const formik = useFormik({
    initialValues: {
      name: "",
      email: "",
      message: "",
    },
    validationSchema: contactSchema,
    onSubmit: async (values, { setSubmitting }) => {
      try {
        const response = await axios.post("/api/contact", values);
        console.log(response.data);
      } catch (error) {
        console.error(error);
      } finally {
        setSubmitting(false);
      }
    },
  });

  return (
    <Box>
      <FormControl id="name" isInvalid={formik.touched.name && formik.errors.name}>
        <FormLabel>Name</FormLabel>
        <Input type="text" {...formik.getFieldProps("name")} />
        <FormErrorMessage>{formik.errors.name}</FormErrorMessage>
      </FormControl>
      <FormControl id="email" isInvalid={formik.touched.email && formik.errors.email}>
        <FormLabel>Email</FormLabel>
        <Input type="email" {...formik.getFieldProps("email")} />
        <FormErrorMessage>{formik.errors.email}</FormErrorMessage>
      </FormControl>
      <FormControl id="message" isInvalid={formik.touched.message && formik.errors.message}>
        <FormLabel>Message</FormLabel>
        <Textarea {...formik.getFieldProps("message")} />
        <FormErrorMessage>{formik.errors.message}</FormErrorMessage>
      </FormControl>
      <Button mt="4" colorScheme="teal" isLoading={formik.isSubmitting} onClick={formik.handleSubmit}>
        Submit
      </Button>
    </Box>
  );
};

export default ContactForm;

In this example, we're using Chakra UI's FormControl, FormErrorMessage, FormLabel, Input, and Textarea components to create a form that includes the fields for name, email, and message. We're also using the useFormik hook from formik to manage the form state and handle form submission.

We're passing the contact form schema to the validationSchema prop of the useFormik hook to validate the form data against the schema. The isInvalid prop of the FormControl component is set to true if the field has been touched and there is a validation error.

Finally, we're using the getFieldProps function from formik to bind each form input to the corresponding formik field, and using the handleSubmit function from formik to handle form submission. We're also using Axios to make an asynchronous POST request to the /api/contact endpoint when the form is submitted.

Note that in order for this example to work, you'll need to create an API route in your Next.js app at /pages/api/contact.js that handles the form submission and sends an email or performs other actions based on the submitted data.

Discussion

Using prompt stores can greatly expedite your development delivery while bringing unity and standardization to your response output. The concept of prompt stores can not only be applied languages, but can also be applied to libraries, UI layouts, business rules, formats, security schemas, user scenarios, or just about any repeatable concept you can think of.