AI Navigator

Inspiration

My Inspiration: The "Why" Behind AI Navigator (AIN) As someone who uses AI extensively in my daily work, I often encountered a recurring frustration: the difficulty in accurately conveying my intentions to AI. This often became apparent only after receiving the AI's output, which was inconvenient. Creating a "perfect" prompt felt incredibly challenging and tedious. I longed for a feature where I could input my desired requirements, and the AI would then formulate the ideal prompt for me.

Participating in this hackathon further highlighted a significant personal realization: a large portion of my development time was consumed by tech stack selection. This led me to a core idea: if we could reduce this selection time and enable AI to propose the most suitable tech stack, wouldn't it free up more time for creation in an era where no-code solutions are becoming mainstream?

However, after building the "Dialog Mode" feature, I began to wonder: why are we still primarily interacting with AI through text prompts? I often experience moments where an idea is "on the tip of my tongue" but I struggle to articulate it perfectly. I thought, "What if the limitation is in the verbalization itself?"

For example, asking an AI to "draw a Pikachu" might be less effective than sketching a rough Pikachu and then asking, "Draw an image similar to this." If individual ideation and thought processes are so diverse, why should we force them into a uniform text-based interaction with AI?

Given that AI's capabilities are advancing rapidly, but human performance doesn't increase at the same rate, my vision for AIN is an app that doesn't demand humans adapt to the AI, but rather one where the AI is designed to understand and grasp human "vagueness"—those unformed thoughts and elusive ideas.

This is the very essence of AIN.

What it does

AI Navigator (AIN) is an innovative planning platform that acts as your personal AI project partner, designed to solve the "technology choice paralysis" that developers often face. Instead of spending days researching, you can get a robust, well-reasoned plan in minutes.

What makes AIN unique is its multi-modal approach, catering to different thinking styles:

Dialog Mode: A conversational interface where you describe your project. AIN's advanced prompt-engineering backend then queries Google's Gemini with an optimized prompt to generate a comprehensive tech stack. This mode also features a sophisticated Prompt Composer for expert-level control.
Ball Mode: An intuitive, visual discovery tool. By tapping on floating "interest balls," you teach AIN your preferences, and it suggests tailored project ideas. (Note: This mode is a functional prototype to demonstrate the core concept and is currently under active development.)
Tree Mode: A structured planning environment. You organize project components in a dependency tree, allowing AIN to analyze the configuration and suggest optimal implementation paths. (Note: This mode is also a functional prototype and under active development.) Ultimately, AI Navigator dramatically shortens the path from a raw idea to an actionable plan, empowering any developer to start building their next AI project with confidence and clarity.

How we built it

I built AI Navigator (AIN) primarily using Bolt.new, which provided a seamless, integrated environment for developing my full-stack application.

Backend: The backend is a powerful, asynchronous API built with Python and FastAPI. Its core responsibility is to act as an intelligent layer between the user and the AI. It takes user requirements and uses advanced prompt engineering techniques—including dynamically building a knowledge base from my data/ directory—to construct an optimal prompt for Google's Gemini API. This ensures I get the most relevant and comprehensive technology proposals.

Frontend: The frontend is a modern, responsive single-page application built with React, TypeScript, and Vite for a fast and type-safe development experience. I implemented three distinct user interaction modes (Dialog, Ball, and Tree) to cater to different thinking styles, which is a key architectural feature of my project.

Design & UX: For the user interface, I used Tailwind CSS for styling and Lucide React for crisp, clean icons. My design philosophy was to create an intuitive and beautiful experience with thoughtful animations and a clear component structure.

Deployment: As part of the Deploy Challenge, the entire full-stack application is deployed seamlessly via Netlify, demonstrating the power of modern web development workflows.

Challenges we ran into

The biggest challenge wasn't just connecting to an AI API, but ensuring the AI's output was consistently high-quality, relevant, and genuinely helpful. My initial attempts with simple prompts produced generic, uninspiring results.

This led me to the core challenge: advanced prompt engineering. I had to learn how to structure the input to the LLM to get the best possible response. This involved:

Designing a structured knowledge base using multiple JSON files to feed the AI relevant, up-to-date information. Building a backend system in FastAPI that acts as an intelligent layer, constructing a sophisticated prompt before sending it to Google's Gemini API. Developing the EnhancedPromptComposer component, which was a significant UI/UX challenge to make complex prompt construction feel intuitive and easy for the user. Finally, as a solo developer, managing the scope to deliver a polished core feature (Dialog Mode) while also prototyping the ambitious vision of the other two modes was a constant balancing act.

Accomplishments that we're proud of

I'm incredibly proud of building a tool that goes far beyond a simple wrapper for an AI API. AI Navigator provides real, actionable value by tackling a genuine problem for developers.

Specifically, I'm proud of:

The Multi-Modal UX: Designing and implementing three distinct interaction modes (Dialog, Ball, Tree) is my biggest accomplishment. It reflects a deep consideration for user-centric design, acknowledging that there is no single "right" way to brainstorm and plan. It's my unique solution to the problem.

The Sophisticated AI Backend: I'm proud of the prompt engineering system I built. It intelligently uses a knowledge base and dynamically constructs high-quality prompts to ensure the AI's suggestions are not just generic, but specific, relevant, and genuinely useful. This is the "secret sauce" of AI Navigator.

A Polished, Production-Quality Application: As a solo developer, I'm proud to have built a complete, full-stack application with a high-quality, professional UI/UX in such a short time. From the smooth animations in the intro screen to the detailed layout of the DialogModeScreen, I focused on creating an experience that is both beautiful and functional.

Delivering a Complete Core Feature: Despite the ambitious scope, I successfully delivered the Dialog Mode as a fully-featured, polished experience, complete with an advanced EnhancedPromptComposer. This demonstrates my ability to execute on a vision and deliver a complete product.

What we learned

Building AI Navigator taught me a crucial lesson: the interface to AI is just as important as the AI model itself. A powerful backend is only effective if users can interact with it in a way that matches their natural thinking process.

Here are my key takeaways:

The Power of Multi-Modal UX: My biggest learning was the value of a multi-modal approach. I initially focused on a standard chat interface (Dialog Mode), but quickly realized that complex project planning isn't a one-size-fits-all problem. This led me to prototype Ball Mode for visual thinkers and Tree Mode for structured planners, confirming my hypothesis that offering multiple interaction paradigms is key to unlocking user creativity.

Prompt Engineering is Everything: On the technical side, I learned that simply passing user input to an LLM isn't enough. The breakthrough came when I implemented a prompt-engineering layer in the FastAPI backend. By creating a system that first constructs a high-quality, context-rich prompt using an internal knowledge base, I dramatically improved the relevance and quality of the AI's output.

Modern Stack Velocity: Leveraging a modern stack with React/Vite on the frontend and Python/FastAPI on the backend allowed for incredible development speed. The clear separation of concerns enabled me to build and iterate on complex UI components without disrupting backend API development.

The Art of Scoping & Mastering the Workflow: Finally, this hackathon was a lesson in both scope and workflow. By focusing on perfecting the core Dialog Mode, I was able to deliver a polished main feature while still showcasing my broader vision. On a practical level, this project was also a fantastic opportunity to become proficient with GitHub, using it as a central hub to keep the project organized and moving forward efficiently.

What's next for AI Navigator

AI Navigator currently excels at the crucial initial planning phase, but our vision is to evolve it into a comprehensive, end-to-end AI development co-pilot.

Our immediate next steps include:

Full-Fledged Modes: Our top priority is to fully develop the Ball Mode and Tree Mode from their current functional prototype state into polished, feature-rich experiences, completing our core multi-modal vision.

Deeper Integrations & One-Click Deployment: We plan to integrate directly with popular development platforms like GitHub and major cloud providers (AWS, GCP, Azure). This will enable features like one-click deployment, taking a project from a plan generated in AIN to live infrastructure seamlessly.

Community and Collaboration: We will build out a community-driven template library within the Prompt Composer, allowing users to share and use effective prompt structures. We also aim to introduce advanced project collaboration features so teams can plan their AI projects together directly within AIN.

Enhanced AI Intelligence: The platform will be updated to provide real-time cost optimization suggestions based on the selected tech stack. We also plan to enable the AI to learn from the outcomes of past projects to provide even more accurate and effective proposals.

Our ultimate goal is to make AI Navigator an indispensable tool for every developer looking to build with AI.