This is my second post on generative AI. Today, I want to share my experience of using it to build a fully functional application—an exciting journey into leveraging AI to create something tangible.

The Idea: A RAG for Work Notes

It all began with my interest in creating a Retrieval-Augmented Generation (RAG) system for my work notes.

What is a RAG? RAG makes generative AI smarter by allowing it to retrieve extra information to create sharper and more accurate answers. It’s like giving the AI a memory boost! While this post focuses on my app-building experience, stay tuned for a deeper dive into RAG in a future post.

For now, let’s focus on the retrieval aspect of RAG—the part where relevant text and code fragments are fetched for enhanced AI responses.

The App Concept

I envisioned a React-based UI to test chunk retrieval. The app needed to:

1. Accept a user query.
2. Generate an embeddings vector for the query on the backend.
3. Retrieve the top 5 matching text chunks based on similarity.
4. Display the results on screen.

As I got into it, I expanded the features to include:

• Marking queries as relevant or not (to evaluate retrieval).
• Storing queries, responses, and correctness metrics in a database.
• Deleting or archiving old queries from the database.

And here’s the kicker—I accomplished all this in just 3-4 hours!

Tools of the Trade

To make this happen, I leaned on two key tools:

1. ChatGPT: My go-to for Python backend scripting.
2. Cursor AI: A fork of Microsoft’s VS Code that comes with a free trial. Cursor lets you write, debug, and refine code quickly—perfect for generating large swaths of functionality.

Step-by-Step: Building the App

1. Setting Up a React App

• I manually created a “Hello, World!” React app.
• Kept it running to see live updates as I generated code.

2. Building the UI

• Prompted Cursor AI to create a basic UI with an input box and submit button. Within minutes, I had a functional interface.
• Iteratively refined the design, adding components like a list to display retrieved text chunks.

3. Developing the Backend

• Initially, I used Python scripts integrated via Node.js for backend functionality. While it worked, command-line parameter issues made it clear the architecture needed simplification.
• Pivoted to a pure Python backend. Cursor AI helped rewrite the architecture, resolving all integration issues. Lesson learned: start simple and let AI guide the way.

Lessons Learned

Here’s what stood out during the process:

1. Iterative Feedback: Keeping the app running for immediate feedback accelerated development.
2. Prompting Over Manual Editing: Allowing AI to manage updates kept my workflow smooth and focused on creativity.
3. Architectural Choices Matter: Explicitly asking AI for alternative designs can prevent poor decisions.
4. Leverage AI Debugging: AI excels at diagnosing and fixing issues faster than manual debugging.
5. Version Control Is Essential: Use a repository to manage iterations and revert to previous states when needed.

Biggest takeaway? Generative AI shines when creating modular designs. Isolating changes to well-defined modules allows for seamless regeneration and minimal manual coding.

Comparing Generative AI Tools

GitHub Co-Pilot

• Great for smart completions, test cases, and small snippets.
• Lacks seamless file generation compared to Cursor.

ChatGPT

• Offers an online code editor for direct edits, maintaining context across sessions.
• Flexibility to work from multiple devices without overloading local resources.
• Code generation is slightly less polished compared to Cursor but highly versatile.

Cursor AI

• Excels at generating multi-file changes quickly.
• Commands like installing dependencies are integrated into the workflow.
• A bit finicky with manual edits but overall a strong choice for rapid development.

---

In my next post, I’ll dive into RAG systems and share what I’ve learned about building one. Stay tuned for more insights into this fascinating intersection of generative AI and application development!