Debugging

Beginner

Fix Broken Buttons

Hunt down every dead button in your AI-built app and wire each one to real, verified behavior.

5 steps15 verify checks30-60 minutesWorks with: emergent · chatgpt · claude · cursor

Start Guided Walkthrough

#buttons #handlers #dead-ui #click #fix

The Route

0/5 verified

Inventory every interactive control

You cannot fix what you have not listed - audit first.

3 checks 02

Fix dead buttons

Wire every DEAD control to its intended real behavior.

3 checks 03

Fix fake buttons

Replace success theater with real actions.

3 checks 04

Add loading and disabled states

Async buttons must communicate work and prevent double-fires.

3 checks 05

Full click-through verification

Prove the app has zero dead controls left.

3 checks

Every step ends at a Verify Gate. Do not continue until every check passes.

Context Pack

Paste this first. It briefs the AI on requirements, constraints, and the Definition of Done before your first build prompt.

Context Pack

PROJECT CONTEXT:
My AI-built app has buttons that look clickable but do nothing or do the wrong thing.

GOAL:
Find every non-working button and make each perform its intended action with loading and error states.

REQUIREMENTS:
- A complete inventory of every interactive control
- Each button wired to a real handler and backend action where relevant
- Loading and error feedback on async buttons
- No console-only failures

CONSTRAINTS:
- Do not remove buttons to 'fix' them unless truly redundant
- A toast without the real action is not a fix

DEFINITION OF DONE:
- Every button performs its labeled action
- Async buttons show loading and disable during work
- Failures show visible errors
- Results persist where they should

COMMON FAILURES TO AVOID:
- Buttons with no onClick handler at all
- Handlers that only console.log
- Success toasts with no underlying action
- Buttons that work once then break due to state bugs

Paste this into your AI builder first. It teaches the AI what you want before you give it the build prompt.

Related routes

More Debugging flows that share ground with this one.

Debugging

Fix App That Looks Good But Does Not Work

The systematic recovery flow for beautiful-but-broken AI builds: audit honestly, then fix by functional priority.

01Run a brutal functional audit

02Prioritize the fix order

03Fix the core value action

+3 more steps to Done

Best forbuilders who have shipped a basic app before

6 steps60-120 minutesIntermediate

Start Route Details

Debugging

Fix Broken Form Submission

Forms that validate, submit, persist, and recover: repair every broken form in your app end to end.

01Inventory and test every form

02Wire submissions to real endpoints

03Add validation on both sides

+2 more steps to Done

Best foryour first pass at this - no prior setup assumed

5 steps30-60 minutesBeginner

Start Route Details

Debugging

Add Database Persistence

Your app forgets everything on refresh: move state into a real database with working CRUD.

01Inventory unpersisted state

02Design models and endpoints

03Wire writes to the backend

+2 more steps to Done

Best foryour first pass at this - no prior setup assumed

5 steps45-75 minutesBeginner

Start Route Details