What Inspired Us Every day, citizens observe hundreds of local civic issues—ranging from minor inconveniences like broken streetlights to massive emergencies like ruptured water mains. However, municipal dispatchers and city officials are constantly overwhelmed by the sheer volume of unstructured, disorganized complaint data. Critical emergencies often get lost in the noise of minor complaints. We were inspired to build a bridge between raw citizen reporting and instantly actionable municipal data, ensuring that the most critical issues are addressed first.
What It Does ASI One is an AI-powered Civic Reporter portal. It provides a simple, beautiful interface for citizens to report local hazards using natural language. Under the hood, the platform intercepts the unstructured data and passes it to the ASI1 AI API. The AI acts as an automated municipal dispatcher: it instantly reads the report, strictly categorizes the issue, determines its exact severity level (High, Medium, or Low), and generates a 1-sentence action plan. It takes messy human complaints and automatically renders them into a pristine, prioritized live feed for emergency responders.
How We Built It We focused heavily on building a blazing-fast, premium user experience backed by powerful artificial intelligence:
Frontend Architecture: We built the application using React and Vite to ensure lightning-fast compilation and routing. Design Engineering: Instead of relying on heavy CSS frameworks, we engineered a completely custom, premium dark-mode design system using pure Vanilla CSS. We utilized glassmorphism, smooth gradients, and micro-animations to make the dashboard feel like a high-end enterprise tool. The AI Engine: The core brain of the platform relies on the Fetch.ai Ecosystem (ASI1 API). We integrated the asi1-mini model via a secure REST architecture and engineered a custom system instruction prompt to force the LLM to output predictable JSON payloads. Challenges We Faced Our biggest technical hurdle was ensuring the AI consistently returned strictly formatted JSON that our React frontend could parse without breaking the application. Large Language Models naturally want to return conversational text. We had to carefully engineer the system prompt and build safe-parsing logic on the frontend to cleanly strip away any Markdown code blocks before pushing the intelligent data into our dashboard. Furthermore, we had to ensure the app wouldn't crash if the API rate-limited, so we built a robust fallback simulation engine that kicks in if the live API request fails.
What We Learned We learned an incredible amount about integrating modern, agentic AI endpoints into frontend web applications. We mastered asynchronous state management in React, how to securely handle environment variables for API keys using Vite, and how to craft premium CSS design systems from scratch to make the UI look like a real start-up product.
Future Vision In the future, we plan to implement a dynamic prioritization sorting algorithm for the Live Feed, ranking issues automatically based on physical distance and the ASI1 Severity rating using a weighted decay formula:
Priority Score = (AI Severity Weight) + (Time Elapsed since Report) - (Distance from Dispatcher)
This ensures that the most severe, oldest issues that are closest to emergency responders will always dynamically bubble to the very top of the feed!
Built With
- asi1-api
- css3
- fetch-ai
- javascript
- react
- vite
