How we built PassGPT-4100 in 24 hours

Posted by
Gif of random passwords scrolling by

The team at Rownd always loves a good joke and April Fools’ Day is a great opportunity to do some team bonding around a fun little side-project involving a topic that’s near and dear to us. This year, we wanted to create something fun and lighthearted that also highlights current issues around passwords and security. That’s how PassGPT was born – a tool that generates often hilarious passwords in just a click.

If you’re familiar with ChatGPT, you know a bit about how generative AI works—you type a question and get a human-sounding response. Sometimes the response is spot-on, sometimes it’s wildly inaccurate, and other times it’s way out in left field somewhere.

Training the AI

PassGPT uses the ChatGPT API to generate the crazy sounding passwords and memory aids that have brought our team so much joy over the past day as we built the system. But while you might be able to easily fire up ChatGPT and ask it to generate a random password, it’s a bit more difficult when you want a specific style of response that a machine can parse and display to you in a way that makes sense.

We started by training a chat model using gpt-3.5-turbo to generate passwords and memorization tips. Specifically, we used OpenAI’s Chat Completion API. It took quite a few iterations to get the desired output.

You can train ChatGPT’s AI to respond in a certain way by directing it through a conversation. That’s the same way that we trained the model using the API. We pass a list of messages to the API that simulates a mock conversation, providing guidance, correction, and feedback to direct the outcome. Here’s an example of what that looked like:

{"role": "user", "content": "You are a family friendly, whimsical password generation assistant that creates complex passwords with passphrases. You do not swear or use evil people or objects in your answers."}, 

{"role": "assistant", "content": "Okay, I am a family friendly, whimsical password generation tool. What are the criteria?"},

{"role": "user", "content": "The password must contain at least 1 emoji, at least 1 special character, at least 1 number, no spaces. The password contains a funny catchphrase, a historical figure, a funny place name, and it tells a story. The order of the criteria is not important. You output all responses in YAML in the format: ---\npassword: string\ndescription:string\n"},

{"role": "user", "content": "Generate a password!"}, 

We ran the model with these prompts a handful of times, tweaking things after each run to make the output match our expectations. Then we updated the model with an additional prompt that provided an example to reiterate the desired behavior.

{"role": "assistant", "content": "---\npassword: \"🤣QueenLizzieBathesInGravy33!\"\n description: \"Imagine Queen Elizabeth II bathing in a sea of gravy, while snickering and holding up 3 fingers.\"\n"},

{"role": "user": "content": "That result was very good. It was in the correct format and included the right tone. It did not have inappropriate content. The output was proper YAML."},

{"role": "user", "content": "Generate a password!"}

The output format ended up being one of the most challenging aspects. We originally asked for responses in JSON, but often ChatGPT got confused and missed important escape sequences (e.g., \") or output completely incorrect JSON structure. This caused frequent parsing errors that led to terrible UX. We switched to YAML, since its format is a bit simpler and somewhat more forgiving, which yielded much better results.

Once you get in the right mindset for training the model via a simulated chat, you can do some pretty powerful (or humorous) things with the OpenAI API!

Building the website

Rownd frequently uses off-the-shelf CMSs like Webflow to build our marketing pages. Not only does this enable non-programmers to maintain our websites, it also helps us sympathize with our customers that don’t always need a backend application server, yet still need authentication.

The PassGPT website is built entirely in Webflow and leverages Rownd’s vanilla JavaScript SDK via a code snippet which can be copy/pasted into just about any website. We added some additional script to render the dynamic portions of the page (such as the password generation UI) and call our one API that acts as a bridge between Webflow and ChatGPT.

Our API-back-end was built on Cloudflare Workers because it scales infinitely and is quick to get up and running. We love Cloudflare’s product and use it frequently as part of our platform architecture. As a true “cloud native” service, it leaves us to focus on the developing the app logic instead of worrying about infrastructure management and scale.

Unfortunately, because Workers is built on V8 isolates and not Node.js, certain APIs are unavailable (although this is changing!). For example, we wanted to use the OpenAI npm package but quickly realized that it uses Axios to make HTTP requests. Axios is not supported on Cloudflare Workers for the aforementioned reasons. After switching to JavaScript’s native fetch, we were able to make raw ChatGPT API requests and to retrieve chat completion responses, parse them, and return them to the browser.

Pulling it all together

Once the website was up and connected to our backend API, we were nearly ready to schedule the launch. Our top-notch design and front-end team whipped up some eye-catching social media assets and polished up the website with a few last-minute design touches, especially for mobile users.

We also realized that playing with the generator can be a bit addicting. Many of the responses are downright hilarious! For this reason (and because every ChatGPT API response costs a small amount of money), we implemented per-client rate limiting, again using the awesome toolchain that Cloudflare provides. This helps us control costs and ensures that everyone gets a chance to try out the generator.

Building PassGPT helped us level up the entire team on productively interacting with large language models (LLMs). This is something we want to explore further in the future as we bring world-class authentication to everyone on the planet. AI and machine learning will be a key factor in making sure every app user or website visitor has a pleasant and successful authentication interaction.

If you’re unhappy with your existing website’s or mobile app’s authentication flow, please get in touch with us! We’d love to listen to your pain points and help you reduce friction throughout your sign-in process. Even if you’re happy with your current setup, we’d still be happy to hear from you in any capacity!

In the end, regardless of whether PassGPT is popular or not, it was a fun exercise that brought the team together to celebrate the jokingest day of the year. We hope it brought a smile to your face in a world all-too-often plagued by tragedy.