The React Todo App
The React Todo App
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
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
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.