I made a simple web app entirely with AI and this is what I learned

I wanted to turn the following quest flowchart for Cyberpunk 2077 that I found on Reddit (kudos to /u/rolux for designing this) into a simple web tracker with local storage. Due to the complexity of the quest tree, I already knew building this would be a challenge for any model. So I put them to the test.

Models I used

I started with Gemini 2.5 Pro (Preview) 05-06 (VSCode + Cline) but the token cost was getting ridiculous. I switched to Github Copilot Pro as it is much cheaper for long term usage. On Copilot Pro I also used Gemini 2.5 Pro (preview) 05-06, but complimented it with Claude 3.7 and ChatGPT 4.1. Once Claude 4.0 came out, I immediately put it to the test.

I also used Google AI Studio for processing the flowchart PNG, which I had to split in smaller chunks as the OCR in the model didn’t have the power to read the full image. The reason why I used AI Studio is simply due to the fact that it’s free and unlimited.

Scaffolding the app

I want you to help me build a quest tracking online tool with TypeScript and local storage to be a quest tracker for Cyberpunk 2077. I will host the tool in a Cloudflare Worker. We can use Hono (although I don’t think I’ll need routing) and React. For styling lets use Tailwind CSS. The tool will be a single page SPA. No database required.

The UI should allow the user to navigate a tree like the attached image.

Quests as per the image must support the following considerations:

  • They can be stored in a JSON object, which itself can contain the full quest tree. This object needs to be structured in a way that is readable and maintainable.
  • Each quest has a title, location, quest giver, notes, special reward, and type.
  • The potential quest types are: main_mission, interlude, main_mission_pl, side_mission, side_mission_interlude, other, ending, ending_pl
  • Each quest can lead to 0, 1 or multiple quests. The JSON object structure must facilitate and allow this association.
  • Each quest must have a boolean flag to indicate that it requires a decision to be made

We will use the current folder to set up the Cloudflare Worker project with Wrangler.

Gemini was able to quickly scaffold the app on Hono and Wrangler with the intention of publishing it on a Cloudflare Worker. It created a basic React app with TailwindCSS and initialised all of the basic logic for a quest tree. The agent did this independently with no guidance, and it eventually stopped and asked me to verify if it was going in the right direction by previewing its progress in the browser. Notice that there’s no CSS styling applied, even though TailwindCSS was supposedly set up:

Not too shabby. “Powered by Coffee and Future Tech” though?

Processing the quest tree for data

Now that the basic structure was in place, I wanted Google AI Studio to process the image and get me real data to put it in the app. I wanted to see if the nodes were rendered correctly, especially when dealing with multiple quests that led to the same destination. I had to use Photoshop to cut the image into smaller chunks, and I asked the model to use OCR and transpose the data into a predefined TypeScript object that the Gemini agent had given me earlier.

Overall, it ended up saving me a lot of time, as I didn’t have to type in all of the quest data, however, it struggled sometimes to understand where quests led to. It seems like the model was ignoring the arrows in the source image.

Here is a sample chunk

TailwindCSS

I had to switch between Gemini and Claude here as neither model could get this right. The models went into a rabbit hole trying to setup TailwindCSS 4. It looks like the models were trained on v3 and just couldn’t figure out how to get v4 running. Turns out they added a lot of boilerplate and unnecessary configuration files that are no longer needed. They also installed packages that weren’t necessary and would get stuck in a loop of removing and adding the same boilerplate again and again.

Neither model couldn’t figure out how to set up TailwindCSS 4. It took me about 5 minutes to figure things out myself and get the styling fixed.

Much better. With styles and data we can start tidying things up.

Tree duplication

This is where things got tricky. In Cyberpunk 2077 multiple quests could lead to the same quest, or, multiple quests could be required to complete another quest. This isn’t simple to render with basic HTML and would certainly require a specialised library like React Flow. Here is a good example:

Two quests leading to “The Heist”
See how “The Heist” is rendered twice?

Gemini spent about a minute working on a solution to hide these duplicates, and this was the result:

:face_palm: Gemini edited two files and broke the app

When I pointed out that the solution was wrong and explained what I was seeing, it went on a 4 minute rampage, where it pondered why it had chosen this career to begin with. Here are the best parts:

That didn’t work. All quests, for example A, B and C all show:

// Path leads to: THE NOMAD (already rendered via another path)

And neither of the 3 quests show any children.

I gave Claude 3.7 the chance to implement an algorithm to solve this problem where Gemini couldn’t. Unfortunately Claude also failed at the task. The models ended up not being able to write an algorithm to tackle tree duplication but pointed me to React Flow.

After iterating quite a bit on the CSS, which required a lot of human intervention, we ended up with a functional tracker, but unusable considering the volume of quests.

Not very user friendly. Scrolling through this list to keep track of all quests wouldn’t be great UX.

React Flow

Since both Gemini and Claude suggested using a better library to render the quest tree, I went along with it to use React Flow. By then, Claude 4 had come out and I decided to put it to the test. In my prompt I asked it to rewrite the app to use React Flow and render the quests in a tree. It did it beautifully in a single prompt:

Lets refactor this project so instead of rendering the quest tree in basic HTML as nested ULs and LIs, it uses React Flow to display all of the quests and its relations.

The elements in the canvas should not be draggable, and React Flow should be configured in a way that it computes the best way to render the tree based on the data in quest-data.ts.

It works! Looks basic but much better than the plain HTML version.

The challenge was now in the styling. I went with Augmented UI to try to replicate the Cyberpunk style. The resulting styling was close but required polishing:

The tree was also confusing to follow, as the algorithm was trying to group gigs to the left and side quests to the right. Days of tinkering with the model got me nowhere and I had to resort to manually distributing each node in the canvas and storing its position in an object. Just some examples of the frustration I was dealing with:

Polishing

This is where the models started to struggle. They can’t see what they are doing, so they will hallucinate strange CSS that doesn’t work. It became quite frustrating trying to get Claude 4 to output decent CSS until I eventually took over the styling of the app and ended up with the following:

While playing the game I noticed that I needed to easily search for quests on the page, I asked Claude 4 the following and this is what it did with a single prompt:

Does React Flow support something like search? so I can have an input box in the canvas to search for text in nodes, and the canvas moves to focus on the node?

Works great! It moves the focus to the selected result.

After manually polishing the styling over the course of two evenings, this is what I settled for:

Verdict

The models were incredible for scaffolding the app and getting things up and running. They were able to quickly create a basic code structure, but would sometimes repeat logic and scatter functions all over the place. The models struggled with complex algorithms to distribute the React Flow nodes on the canvas, and were unable to help much with styling.

Google AI Studio required very specific prompts for processing the image chunks. I still had to spend quite a lot of time manually fixing the connections between the nodes in the code so they led to the right quests.

Overall, the models did save me a lot of time putting this together as they removed the boring bits out of the equation. I did have fun styling this up and finding ways to make it usable for people still aiming for 100% completion.

The Cyberpunk 2077 quest tracker is available here. If you are playing the game and find any issues with the app, please reach out in the comments below.