Intro

Sometimes you just want to map some user input to a prompt and present the result be it to share some magic with your friends and family or simply because you feel like a prompt potato.

demo.mp4

Technologies used

• Next.js
• Tailwind CSS
• OpenAI API

🎬 Examples

Have a look at the examples in /app/examples to get some inspiration about what is possible:

🧑‍💻 Usage

There is no package yet so this repo acts as template. Simply fork or clone it to get started.

# ssh
git clone git@github.com:gcascio/promptato.git
# https
git clone https://github.com/gcascio/promptato.git

To start the application run

pnpm install

create a env.local file (see env.example) and run

pnpm dev

Customizing

Using the higher order function createPromptato you can easily define a input-prompt mapping:

// promptato.ts

import { createPromptato } from "@/lib/createPromptato";

export const Promptato = createPromptato({
  myInput: {
    component: 'input',
    label: 'What is your name?',
  },
}, [
  {
    role: 'system',
    content:
`You are a comedian making fun of the tch scene.
You will write a funny story about a topic you will receive.
You must limit the story to 100 words.
Format your response using markdown.`
  },
  {
    role: 'user',
    content: (inp) =>
      `${inp.myInput} feels lazy about writing prompts for LLM's.`
  }
])

The returned component Promptato can then be used in a page:

// page.ts

import { Promptato } from './promptato';

const Page = () => (
  <main> 
    <h1>Feeling like a Prompt Potato?</h1>

    <Promptato />
  </main>
);

export default Page;

🧐 API

The API of promptato is straightforward and self explanatory with the hep of the typings. As shown in the example above createPromptato expects two arguments, the input definition and the prompt definition. All input values can be accessed in the prompt definition.

Each input of the input definition has the following properties:

Property	Required	Description
component: 'input' | 'select' | 'textarea'	Yes	The component type
label: string	Yes	Label describing the input
initialValue: string | number	No	Initial value of the input component
type: string | number	No (only for 'input' component)	Options of select element
options: string[]	Yes (only for 'select' component)	Options of select element

A message in the prompt definition has following properties:

Property	Required	Description
role: 'assistant' | 'system' | 'user'	Yes	The role of the author of this message
content: string | (inputs) => string	Yes	The contents of the message.
name: string	No	The name of the author of this message

🛠️ Contributing

Interested in contributing? Great!

To fix a bug or add a feature, follow these steps:

• Create a Fork of the repo
• Create a new branch (git checkout -b your-branch)
• Add your changes
• Commit your changes (git commit -am 'feat: fantastic feature')
• Push the branch (git push origin your-branch)
• Create a Pull Request

🙋 FAQ

Why Promptato?

It is a reference to the famous "Couch Potato" cliche.