Experimenting with Cursor Composer

December 14, 2024

I have been experimenting with Cursor Composer and build a simple react/d3 app with some features for viewing and analyzing data with multiple visualizations on different pages. I’ve tried to use Cursor as much as possible to generate the code and NOT manually adjust the code. This would not be the way I would build a production app, but it was a fun experiment.

I already had generated an empty react-19 project using Vite. The first prompt that I gave to Cursor Composer was:

add some beautiful charts using d3 with random data that has relations between them , add legends , add filters and ways to manipulate the charts

From there I kept on prompting.

Some things I learned and noticed:

• Make regular commits to the repo so that Cursor can continue to generate code and you can keep track of the changes, but build & test before you commit. This is not different then normal coding.
• When a bug happens in the browser, copy&paste the console error to Cursor and ask it to fix the code.
• Use Github co-pilot to review the code and suggest improvements and input that back to Cursor.
• I ran into problems when I wanted to add a webworker to the project. Cursor did this, but the worker was not working. I had to manually adjust the code to make it work… which was simply removing worker.terminate() from an unmount. I need to review that code further, but for this PoC it was good enough.
• In one scenario Cursor wanted to change the package.json file with a wrong older version of React.
• It also happened that I needed to keep on prompting Cursor to fix the code when the output of the synthtetic data generation was not correct. The same happened with the correlation calculation.
• Something that I also noticed (not only with Cursor) is that when you request complex algorithms (like CART for synthetic data generation), the first version is often a very basic version which is just a placeholder or a very basic implementation. You need to keep on prompting to improve the algorithm and get the results you want. I used a different LLM to review the CART code and suggest improvements.
• You can finetune UI using Cursor… although it might take multiple prompts. And I think that when you understand the code and now the layout, you can do this faster manually.
• The main page of the PoC app wasn’t responsive enough, so I asked Cursor to make it responsive. However, it removed working code from the page. So I had to revert it and on next prompts request that it kept the working code and maked it responsive. This worked.

This is the resulting repo: github.com/devhelpr/react-19-dataviz-prototype

The project can be found here on vercel: react-19-dataviz-prototype.vercel.app

I will keep on experimenting with Cursor and see how far I can get with it. I think it’s a great tool to quickly generate code and get a prototype up and running in a very short time. This can be used for experimenting with new technologies and ideas to get new insights, learnings and inspiration. It can also be used for existing projects, I am experimenting with that as well (I already use github co-pilot in a professional setting). Although I think it’s important to keep on reviewing the code and make sure you understand it!! Don’t ever rely on LLMs only!

If you have any questions or feedback, feel free to reach out to me here: maikel@devhelpr.com