DEV Community

ynwd
ynwd

Posted on

I Built a Web Framework That Only Works With AI

#go #react #typescript #githubcopilot

Stop fixing boilerplate. Let AI do the boring parts — scaffold, code, review, ship.

Here's the problem nobody talks about: most AI coding assistants are wasted on repos that weren't designed for them.

You ask Copilot to "add a billing feature" and it generates files in the wrong places, imports from the wrong modules, or writes code that doesn't match your project's conventions. You spend more time fixing the AI's output than you would writing it yourself.

I got tired of this. So I built something different.

Meet Flow

Flow is a modular monolith (Go + React) where every convention exists for the AI, not for you.

┌──────────────────────────────────────────────┐
│ "buat fitur billing" →                        │
│   @analyst asks 2 questions →                 │
│   you approve →                               │
│   AI scaffolds, codes & reviews →             │
│   you ship.                                   │
└──────────────────────────────────────────────┘
Enter fullscreen mode Exit fullscreen mode

One command from zero to running:

git clone <repo> && cd flow
.github/skills/init-core-project/scripts/init-core.sh
go run .    # → localhost:3000
Enter fullscreen mode Exit fullscreen mode

The Problem: Frameworks Were Built for Humans

Traditional frameworks assume a person writes the code. The folder structure, the conventions, the design patterns — they all make sense to a human brain.

But AI doesn't think like us. It hallucinates file paths. It imports from the wrong module. It guesses conventions instead of following them.

Flow flips this: everything is designed so an AI can't get it wrong.

How It Works

1. One Feature = One Folder

No more "where do I put the handler?" The AI can't scatter your code across the tree because both your Go backend and React frontend live in the same folder.

modules/billing/
├── handler.go        # HTTP handlers
├── service.go        # Business logic
├── repository.go     # Data access
├── model.go          # Types
├── module.go         # Self-registration
├── billing.tsx       # React component
├── api.ts            # Fetch client
└── components/       # Local React components
Enter fullscreen mode Exit fullscreen mode

2. Self-Registration Pattern

Modules register themselves via Go's init() function. No manual wiring, no import management. The AI just needs to create the folder and the rest happens automatically.

3. Skills — Not Hallucinations

Instead of letting the AI guess how to scaffold a module, I gave it battle-tested shell scripts:

.github/skills/new-feature-module/scripts/scaffold.sh billing
Enter fullscreen mode Exit fullscreen mode

This creates a full CRUD module — Go backend, React frontend, tests, auto-registered — in one command. The AI doesn't guess. It executes.

4. Custom Agent Modes

Flow ships with preset GitHub Copilot agent modes:

Agent What it does
@implementer Has write access — implements features, fixes bugs
@reviewer Read-only — checks architecture and module boundaries
@analyst Clarifies requirements and writes specs
@planner Produces user stories for large features

Workflow:

You → @analyst writes spec → You approve → @implementer codes → @reviewer checks → Ship
Enter fullscreen mode Exit fullscreen mode

A Real Use Case: Building a Blog Feature

Let's walk through what it looks like to build something real — a simple blog feature.

Step 1: Init the project (once) 

.github/skills/init-core-project/scripts/init-core.sh
Enter fullscreen mode Exit fullscreen mode

This creates the entire core structure — router, middlewares, templates, static files, Tailwind CSS — from templates. It runs go mod tidy, npm install, npm run build:css, and go build ./... automatically.

Step 2: Scaffold the blog module 

.github/skills/new-feature-module/scripts/scaffold.sh blog --ssr
Enter fullscreen mode Exit fullscreen mode

The --ssr flag enables server-side rendering (SEO-friendly). This creates:

modules/blog/
├── handler.go         # Page + API handlers
├── service.go         # Blog logic
├── repository.go      # In-memory store
├── model.go           # Post struct
├── module.go          # Routes registration
├── router.go          # Route definitions
├── templates/         # HTML templates (SSR)
├── blog.tsx           # React component
├── api.ts             # Fetch client
├── package.json       # Frontend deps
├── esbuild.mjs        # Build config
└── handler_test.go, service_test.go, api.test.ts, blog.test.tsx
Enter fullscreen mode Exit fullscreen mode

Step 3: Have the AI implement it

In VS Code, open the Copilot chat and type:

@implementer implement the blog feature per the spec at .github/specs/blog.md
Enter fullscreen mode Exit fullscreen mode

The @implementer agent will:

  1. Read the spec
  2. Fill in the handler, service, and repository with business logic
  3. Add tests
  4. Run go build ./... && go test ./...
  5. Build the frontend bundle

Step 4: Review 

@reviewer review the blog module against spec
Enter fullscreen mode Exit fullscreen mode

The @reviewer agent reads the code, checks module boundaries, and reports any issues. If it finds problems, it calls @implementer to fix them automatically.

Step 5: Ship 

npm run build -w modules/blog
go run .    # → localhost:3000/blog
Enter fullscreen mode Exit fullscreen mode

What You Get Out of the Box

Feature How
Project init init-core.sh — single command from clone to running
Module scaffolding scaffold.sh — full CRUD with Go + React + tests
Code generation 4 agent modes + 3 prompt templates
Code review @reviewer checks architecture automatically
State tracking .core-state.json prevents overwriting existing files
Styling Tailwind CSS v4, built via PostCSS
Database In-memory (swap to SQLite/Postgres when ready)
Auth Bearer token middleware (extensible)

Why Devs Like It

"Took me 10 minutes to go from first commit to a working API. The AI did all the boring parts."
"Finally — a framework that doesn't fight me when I use Copilot."
"The scaffold script alone saves me 30 minutes per module."

Try It Yourself 

git clone https://github.com/ynwd/flow
cd flow
.github/skills/init-core-project/scripts/init-core.sh
go run .
Enter fullscreen mode Exit fullscreen mode

Then open VS Code, press Cmd+I, and tell Copilot:

@implementer add a blog module with SSR
Enter fullscreen mode Exit fullscreen mode

It just works.

Flow is open source. Built with Go 1.24, React 18, TypeScript 5, Tailwind CSS v4, and a lot of coffee.

Top comments (0)