DEV Community

Zeiki111
Zeiki111

Posted on

Show DEV: I built a directory for Codex Pets so you can preview and install them with one command

If you’ve been using Codex pets, you’ve probably seen the same problem I ran into:

pet packs are scattered around, preview quality is inconsistent, and installation often feels more manual than it should.

So I built this:

Codex Pets

It’s an independent public directory for Codex-compatible animated pets. The goal is simple: make pet discovery feel clean, trustworthy, and fast.

What the site does

Codex Pets lets you:

  • browse a curated gallery of animated pets
  • preview animation states before installing
  • copy a one-line install command
  • inspect the package flow more clearly
  • submit your own pet package for review

The main idea is to treat this as a directory first, not a generic dashboard or a random download page.

Why I built it

I didn’t think the hardest part was the pet format itself.

A pet package is usually straightforward. But the real friction was everything around it:

  • finding pets in the first place
  • knowing what they actually look like
  • deciding whether the package feels trustworthy
  • installing them without hunting through scattered repos, threads, or screenshots

That is where most of the UX debt lived.

I wanted one place where users could go from:

  1. discover
  2. preview
  3. trust
  4. install

without unnecessary ceremony.

The install experience

One thing I cared about was reducing setup friction.

If someone likes a pet, they should be able to install it immediately with a command like this:

npx codex-petkit install boba

That is a much better experience than making people manually dig through package contents before they even know whether the pet is worth trying.

For people who do want more confidence, the site also gives more visibility into the package and preview flow before installation.

What a pet package looks like
A Codex pet package is usually built around two core pieces:

pet.json for metadata and animation definitions
a sprite sheet such as spritesheet.png or spritesheet.webp
That part is relatively simple.

What matters more is the surrounding product experience:

can people preview the pet before installing?
can creators submit without confusion?
can the public gallery stay curated instead of noisy?
can installation feel lightweight instead of fragile?
That is the layer I wanted to improve.

Design principles behind the site
A few product rules shaped the whole build:

browse first, submit second
directory before dashboard
preview before install
trust through restraint
simple install flow over clever complexity
I wanted the site to feel more like a well-kept catalog than a chaotic community feed.

For creators too
This is not only for people installing pets.

I also wanted creators to have a cleaner path to contribute their own work, so the site includes a submission flow for new pet packages.

The goal there is to keep contribution simple, while still having enough review structure that the public gallery stays useful.

That balance matters. If submission is too loose, the gallery becomes noisy. If it is too rigid, nobody contributes.

Tech stack
The site is built with:

Next.js
React
TypeScript
Tailwind CSS
Cloudflare-native deployment
D1
Better Auth
So this was also an excuse to build a lightweight catalog product on a modern full-stack setup instead of treating it as a static link page.

One important note
This is not an official OpenAI product.

OpenAI provides Codex and its pet feature.
Codex Pets is an independent gallery for compatible pet packages.

I’d love feedback
If you use Codex pets, I’d be interested in your take on a few things:

What makes you trust a pet package quickly?
What still feels clunky in the install flow?
What would make browsing better?
If you build pets, what would make submission easier?
Site:

https://codexpet.directory

If there’s interest, I can also share a follow-up post about the submission flow, package structure, and the product decisions behind making this feel like a curated directory instead of a typical SaaS admin surface.

Top comments (0)