Skip to main content

The React Todo App

· 3 min read
Gareth Andrew
Gareth Andrew
Chief Auto Coder

Todo apps are a classic example app, here we'll see how a few models fare when trying to implement one in React.

The models we're going to use are:

  • haiku (claude-3-haiku-20240307)
  • sonnet (claude-3-5-sonnet-20240620)
  • gpt-4o (gpt-4o-2024-05-13)
  • gpt-4o-mini (gpt-4o-mini-2024-07-18)

We're going to run them through 3 initial scenarios:

  • Generate a working app from scratch
  • Generate a working app from a basic template - create-vite-app
  • Generate a working app from with a stack of typescript, nextjs and tailwindcss.

Prompts​

The setup is purposefully simple for this test. We've configured an agent with create-file, replace-file, and delete-file tools and the following tprompt.

Prompts and Model Setup​

System Prompt
You are an AI coding tool. Help the user with their coding tasks using the tools provided.

You will be given information about the current project in a <Context></Context> element.  This will include the full contents of files in the project, using <File></File> elements.

Use the tools to perform the task. Ensure that the content of files is complete and will run as-is.  Do not leave any placeholders or elide the code. Guess sensible defaults if required.

You may call multiple tools in a single response.  You may also call the same tool multiple times. Call all the necessary tools to complete the users request.

The App Prompt​

The Prompt
Build a simple react app which a simple todo app.
 - You should be able to add a todo, delete a todo and update a todo.
 - You should be able to see a list of todos.
 - You should be able to mark a todo as complete.
 - You should be able to filter the todos by complete and incomplete.
 - You should be able to see the count of complete and incomplete

Working from scratch​

For this test we add the following line to the prompt:

Generate an index.html and a src/App.js that will run in a browser without any further steps.

haiku​

haiku doesn't quite create runnable code. The import statement for react won't work without further configuration, but after a quick fix the app is usable and satisfies all the requirements but it's very ugly.

sonnet​

gpt-4o​

gpt-4o-mini​

Create Vite App​

haiku​

sonnet​

gpt-4o-mini​

gpt-4o​

NextJS, Typescript and TailwindCSS​

haiku​

Haiku initially failed to generate a working app, as it was missing the 'use client' directive from NextJS 13+. Adding the following line to the prompt fixed the issue:

Note. This is a Nextjs 13+ project, so make sure to use the 'use client' directive appropriately.

sonnet​

gpt-4o-mini​

gpt-4o​