I Built an AI Agent That Fixes One of the Most Ignored Parts of Next.js Apps

Most Next.js apps still ship with the default 404 page.

Not because developers don’t care but because it’s one of those things that always gets pushed to “later”. The default page works, users rarely see it, and there’s always something more important to ship.

That’s exactly the gap I wanted to solve with Nothify.

Nothify is an AI-powered agent that looks at your Next.js repository, understands how it’s built, and generates a custom 404 page that actually matches your project then opens a pull request for you.

No setup. No config. No copying templates.

👉 Live demo: https://nothify.abhivarde.in

The idea

I kept seeing the same pattern:

Great products
Clean design systems
Thoughtful UX
…and a completely default 404 page

Fixing this manually sounds simple, but in reality you still need to:

Check whether the project uses App Router or Pages Router
Match TypeScript or JavaScript
Follow the existing styling approach (Tailwind, MUI, CSS Modules, etc.)
Place the file in the correct location
Make sure you’re not overwriting an existing 404

So instead of another template gallery, I asked a different question:

What if this entire thing could just happen automatically?

That’s how Nothify started.

What Nothify does (in plain terms)

You paste a Next.js GitHub repository link.

Nothify then:

Analyzes the repo (router, language, styling)
Generates a custom 404 page that fits that setup
Lets you preview the code and the UI in the browser
Either downloads the code or opens a clean GitHub PR for you

That’s it.

You don’t need to sign in just to try it.
And if you do connect GitHub, everything stays stateful no reselecting templates after OAuth.

Preview before you commit

One thing I really cared about was trust.

AI-generated code shouldn’t be a black box, especially when it’s about to touch your repo. So Nothify includes a live code preview powered by Sandpack.

You can:

See the generated files
Inspect the code
View a live preview side-by-side
Close it and decide what to do next

Nothing gets pushed unless you’re happy with it.

Works with real-world setups

Nothify isn’t locked to a single stack.

It supports:

Next.js App Router and Pages Router
TypeScript and JavaScript
Tailwind CSS, MUI, styled-components, Emotion
Bootstrap, CSS Modules, styled-jsx, or plain CSS

It also handles:

Repos you own
Repos you don’t own (auto-forks before PRs)
Private repositories via GitHub OAuth
Existing 404 pages (with conflict detection)

This wasn’t about demos, it was about handling the messy reality of real projects.

Templates, but not just templates

Right now, Nothify includes five 404 templates:

Minimal
Centered
Illustrated
Simple
Elegant

Each one supports light and dark themes, and you can preview them before generating anything.

Recently, I started leaning more into visual character over heavy animation, especially for the illustrated template adding expressive backgrounds and subtle overlays that still feel production-safe.

The goal isn’t flashiness.
It’s to make the page feel intentional.

Under the hood (lightly)

Groq powers the AI code generation
Vercel AI SDK wires the AI workflow
Appwrite handles GitHub OAuth securely
Sandpack runs previews entirely in the browser
Next.js 16, Tailwind, and shadcn/ui power the UI

I’ve intentionally kept the architecture boring where it should be boring — and flexible where it matters.

Why I think this matters

This project isn’t really about 404 pages.

It’s about AI agents that do small, useful things end-to-end:

Understand context
Generate correct code
Let humans review
Integrate cleanly with existing workflows

No dashboards.
No prompts to tweak.
Just: “Here’s something your app should probably have want me to fix it?”

What’s next

I’m currently working on another project focused on solving real problems for Indian vendors, so Nothify is iterating steadily rather than explosively.

That said, I plan to: