CivicForge

Filipinos lose hours to broken government services. CivicForge turns one sentence of frustration into a working prototype of how that service should actually function. Built end-to-end on MeDo.

Comment

Inspiration

Filipinos routinely spend four hours in line to renew a barangay clearance. Four hours, for a five-minute task. And often, a missing photocopy sends people home to start over the next day.

This is normal in the Philippines. It's normal across most of the developing world. Citizens know exactly what's broken because they live it. What they don't have is a way to show officials what better looks like. Filing a complaint is easy. Showing the solution is impossible, unless you happen to be a software developer with weeks of free time.

CivicForge exists to close that gap. One sentence of frustration in. One working prototype out. Citizens become designers of the services they deserve.

What it does

CivicForge lets anyone describe a broken government service in plain language and watch a working prototype of how it should actually function appear in seconds.

You type "Renewing my barangay clearance takes four hours and two trips." The platform analyzes the pain, designs a redesigned service flow, generates the right form fields for that specific service, builds a status tracking page, and produces a shareable URL. The whole prototype is interactive. You can fill out the form, submit it, see the status update, and send the link to your local official.

Each prototype includes a before-and-after split view showing how the service works today next to how it should work, making the contrast immediate and screenshot-worthy. Each prototype also tracks views in real time and includes a one-click "Send to representative" button, turning the URL itself into a piece of civic infrastructure rather than just a demo.

Three pre-built examples on the landing page demonstrate the platform across different Philippine government services: barangay clearance renewal, small business permits, and senior citizen ID registration. Each is genuinely different in layout, fields, and flow, because real services are different.

How we built it

CivicForge was built end-to-end on MeDo through four focused conversation arcs, each scoped to a single architectural concern. Rather than describing the whole product in one prompt and letting MeDo run, we deliberately structured each conversation around a single decision: the LLM prompt design, the generation experience, persistence and the citizen-admin loop, and visual polish. Within each arc, we used MeDo's multi-turn chat to iterate on output, course-correct architecture decisions before code was written, and refine the system prompts that drive the AI generation.

The first conversation was about the LLM prompt itself, before any UI existed. The quality of every generated prototype lives or dies on how well the underlying language model translates citizen pain into structured service blueprints. We spent multiple turns refining the system prompt to extract pain points, design appropriate user journeys, generate contextually correct form fields, and recommend status states that actually fit the service type. We primed the prompt with Philippine government service knowledge so terms like "barangay," "BIR," "SSS," and "Pag-IBIG" produce locally accurate output instead of generic global government UI.

The second conversation focused on the generation experience. Rather than navigate users through a multi-step blueprint review, we engineered a 5-stage streaming generation pipeline (analyzing the description, identifying pain points, designing the citizen journey, building the form, generating the portal) where each stage's output drives a real-time UI update. Users watch their prototype get built. The wait becomes part of the magic instead of a loading screen.

The third focused on prototype persistence and the dual citizen-and-admin views sharing state, so a generated prototype URL feels like a real working portal rather than a static demo. The fourth focused on visual polish: a government-appropriate aesthetic referencing Singapore GovTech and UK gov.uk, with a deep navy primary and warm yellow accent, mobile-first responsive layouts, and a before-and-after split view designed specifically to be shareable on social media.

MeDo handled the full stack. We used multi-turn chat to course-correct architecture decisions, the visual editor to refine the generation animation timing, and Supabase integration for prototype persistence and the live view counters that appear on every shared URL.

Challenges we ran into

The hardest problem wasn't technical. It was making sure the three seed prototypes felt genuinely different from each other. Early generations produced what looked like the same form template with different headers, which would have collapsed the entire pitch. We solved this by restructuring the LLM prompt to enforce variation in layout pattern, field types, status states, and copy tone based on service category. The business permit prototype now uses a sectioned wizard flow with formal language and 12 fields across three sections. The senior citizen ID prototype uses a compact two-column layout with warmer copy and emergency contact patterns. The barangay clearance prototype uses a single fast form with five fields. Same platform, visibly different products.

The second challenge was making the generation moment feel real instead of fake. A loading spinner with a setTimeout would have killed the magic. We rebuilt the generation flow to drive UI updates from actual LLM streaming output, so users watch real progress, not theater.

The third was Philippine context depth. A generic civic tech tool would have been forgettable. Making the AI consistently produce locally accurate field requirements, agency names, and workflow assumptions required prompt engineering specifically tuned to Southeast Asian government service patterns.

Accomplishments that we're proud of

CivicForge generates a working, interactive government service prototype in under 10 seconds from a single sentence of natural language. That alone would have been the goal. What we're most proud of is that the generated prototypes don't feel like toys. They feel like real portals citizens would trust, which is the only way this product matters.

We're also proud that the entire build, from first conversation to deployed app, happened on MeDo without dropping into manual code editing. Every component, every prompt, every flow refinement happened through conversation.

What we learned

The most important thing we learned is that AI-generated apps live or die on the quality of the prompt, not the polish of the UI. We spent more time iterating on the blueprint generation prompt than on any single component. That investment is what makes the difference between a generic form generator and a tool that produces locally accurate, contextually appropriate civic infrastructure.

We also learned that the wow moment in an AI product needs to be designed deliberately. Loading states, generation animations, and the transition from input to output are not afterthoughts. They are the product.

What's next for CivicForge

The immediate next step is partnerships with local government units in the Philippines that have already shown openness to citizen-driven service redesign. The medium-term roadmap includes Tagalog and regional language support, real notification integrations (SMS via Globe Labs, email via SendGrid), and a public gallery where citizens can browse, remix, and vote on each other's prototypes.

The long-term vision is bigger. Civic frustration is a global signal that nobody captures systematically. CivicForge has the potential to become the bridge between that signal and actual government service improvement, in the Philippines first, then across Southeast Asia, then anywhere citizens are tired of services that don't work.

Built With

Share this project:

Updates