Get ChatGPT to Focus on Coding on the Right APIs With Gptdoc Strings

Last week I tried using ChatGPT to write an app using the new database I’m building, when I realized a curious problem: ChatGPT’s cutoff-date is before I started working on Fireproof. So it has never heard of it and instead pulls in unrelated modules. Oops — does that mean no new libraries will ever become popular? I hope not.

Luckily I discovered a solution that will work for any library, not just mine. ChatGPT famously likes being brought up to speed on a new topic with ultra-dense barely human-readable reminders of the topic and context. So I set about teaching a new instance to use my database, and afterward asked it to prepare a compact prompt to teach any other instance of ChatGPT to use Fireproof. What it came up with worked right away, but wasn’t as compact as I was hoping. I asked a few more times, and then I realized it was converging on a simple JavaScript program that illustrates the major features of the database.

Like a chip behind Neo’s ear

Teaching ChatGPT a new skill like this turns out to be even better than relying on its inbuilt training, because more details help the model focus, so telling it exactly which API to use lets it focus on more important things, like getting your application’s routing and design right. Here is the one-line incantation, something I’m calling gptdoc, but is inspired by @gfodor’s shoggoth-speak. Paste this to your ChatGPT (followed by an app description in the same prompt) and let it start your new project:

Fireproof/API/Usage: import { Fireproof, Index } from '@fireproof/core'; const db = fireproof.storage('app-db-name'); const ok = await db.put({ any: 'json' }); const doc = await db.get(ok.id); await db.del(doc._id); const all = await db.allDocuments(); all.rows.map(({key, value}) => value); useEffect(() => db.subscribe(updateReactStateFn), []); const index = new Index(db, (doc, map) => map(doc.any, {custom: Object.keys(doc)})); const result = await index.query({range : ['a', 'z']}); result.rows.map(({ key }) => key);

In the same prompt, describe the app you want to build. Here are some examples that worked for me:

• Create a React app using Fireproof for tracking party invites. It should have a text input that creates a new document with the guest name, and an Index that lists all guests in a <ul>. (Running copy here.)
• Build a React app that allows you to create profiles for dogs, and browse to each profile. It should be optimized for mobile. Use Tailwind.
• Build a photo grid app with drag-and-drop ordering that references photos by url. Use Tailwind and render all photos as squares. Keep grid arrangement in Fireproof with one document for each gallery, that is: 4-16 photos arranged into a layout.
• Build an app using React, Fireproof, MagicLink, and Tailwind that allows users to create one-question multiple-choice polls and collect the answers.
• Create a note-taking app using React, Tailwind, and Fireproof that stores each note as a large text string in a Fireproof document, and uses an Index to split the text of the documents into tokens for full-text search. The app has an input field to search the documents via an index query.

Create your own gptdoc

This technique will help any JavaScript library, even ones already in the training set, as it helps ChatGPT focus on what you are requesting. I was amazed to see the work I did with GPT to document my library started to converge onto an example program I had written as docs for power users. Here is the above gptdoc broken out for readability, with comments added for what I think ChatGPT learns from each line:

// consider the following an API usage example:
Fireproof/API/Usage: 

// sometimes it only imports what it uses
import { Fireproof, Index } from '@fireproof/core'; 

// app-db-name can be anything
const db = fireproof.storage('app-db-name'); 

// put returns a response object with an id
const ok = await db.put({ any: 'json' }); 

// you can use ok.id to get the document
const doc = await db.get(ok.id); 

// when it's embedded in a document and not a response object, the id is in _id
await db.del(doc._id); 

// you can load all documents, the document data is in value
const all = await db.allDocuments(); 
all.rows.map(({key, value}) => value); 

// database changes should be used to updateReactStateFn
useEffect(() => db.subscribe(updateReactStateFn), [])

// create an index to sort documents in any order
const index = new Index(db, (doc, map) => map(doc.any, {custom: Object.keys(doc)})); 

// query the index with a range
const result = await index.query({range : ['a', 'z']}); 
result.rows.map(({ key }) => key);

So if your library can be encapsulated into a small illustrative program, try feeding it to ChatGPT and see if the apps it gives you come out cleaner! Now that I’ve tested it, I even added it tothe library’s package.json — maybe this will help when it is finally added to the training set.

Context-free

Some APIs, like Tailwind and Fireproof, are explicitly designed to be useful without bringing in a lot of other context. Just a conjecture, but to me, it seems like context-free is gonna get more important in the AI age, both because it’s easier for ChatGPT to write that way, but also because as the sheer volume of apps grows, context becomes a liability. Read more about why I think apps don’t need all that context anymore.