Working with Cursor Part 1

Pre-Cursor

Having done a lot of exploration into vision code but not as much into LLMs - they feel too much like a cheat code for life. Getting the answers without reaching for it feels a bit funny. Lets look at this from the perspective of a crossword puzzle.

Originally, you had to know all the points of the crossword puzzle only getting assistance by asking other people for help. After the internet you could Just look up any clue. Personally I would like to try and not look at answers sites (which definitely existed) and try to piece the answer together by clever use of a search engine. Now with LLMs I wonder if I even vaguely try to piece the values together it would just give us the answers. There is also a dynamic of even me searching on the web it being influenced by what others are searching in relation to something.

I recently read co-intelligence and found it really beneficial to my views on AI. That may be a little book report I do in the future but the biggest take-aways were how disruptive calculators were to math is somewhat similar and how this is the worst it will be, early adoption helps us to know whats coming and work with it better.

From that I decided to try my hand at AI coding. Currently on /r/programmerhumor the funny thing is "vibe coding"; letting the AI take the wheel and you turn your brain off - just reviewing. I don't think the full hand off is what I'm comfortable with quite yet - I wanted to try and trust it and interact with it as a partner rather than ignoring it.

Cursor

I spent an evening working on a fairly scoped project. My effort was to build a way to get my most recently viewed movie from letterboxd and add it to my /now page. I had previously built integrations with a music app and a reading app. My personal site is built using deno, deno deploy, tailwind, and fresh . The now page currently boils down to various react components populated by serverside api calls, web scraping, and rss parsing to display what media I'm currently enjoying.

With these intentions, I started up a cursor agent (referred to as cursor or agent here after) for the first time. I gave it the context of my repo and the now directory specifically.

For the benefit of the reader I have copy and pasted my prompts 1:1, typos and all. I'm unsure why some many letters were lost while typing but who knows. My starting prompt was:

You are a software developer. You are trying to create a new automation of currentlyWatching where you will get the last watched film from the letterboxd user mrashes. I need a function to extract that from the letterboxd api and a react component to display that information

I thought this was specific by scoping exactly what I wanted them to be as well as what I wanted them to make. In retrospect more could be added but I'll leave reflections to the end of the post.

It built out a function and react component to display the information within my project but there were a few things I was disappointed with. For starters I hadn't used axios in the package up to this point but cursor immediately reached for it (instead id been preferring fetch which is bundled with deno). I was direct:

I dont want to import axios and instead want to use fetch.

Cursor quickly fixed this issue and over all I was pretty happy with the code it had created. The react function had a loading, failure, empty, and positive case. The api call was hitting an RSS feed which wasn't what I had expected but ended up working pretty well. Cursor had opted not to do the call serverside so it ended up needing useState in react to function and handle the calls. Due to this it cant have standard components in fresh so it has to leverage the island pattern. I pointed this out to cursor:

Since this is a fresh project we need to move Currently watching into a island

It moved it over to an island pattern without issue but I realized it returned every film I ever watched in order rather than only the last film I saw.

letterboxd function is returning now films found but I have recently watched films on letterboxd

After cursor rectified this and updated the react component I went to test but there was a CORS error which surprised me. I would have thought cursor would have been checking to see if the page loaded as expected but no.

Seems to be an issue with the CORS policy of letterboxd

Its solution was to generate an local /api route which could be hit by the page to get the data which worked - that said I would have personally done the server side render so it felt like it was solving issues that it created. But in the end it worked. If this was a junior dev I would probably have been okay with it but called out the other option.

After the now films > recently watched change the data ingestion was off so I had to flag that for it:

Looks like the rss feed needs additional info to work, its throwing this error - Missing required fields in RSS feed entry

After resolved it looked fine so I just gave it some final cleanup work to do

Can you add a comment at the top of newly created files saying "built with cursor" for my future reference

can we just have the poster and the watched date in the react component

Was pretty pleased with the results of what it created. the component worked as intended (it needs additional styling [at time of writing that now page needs a styling overhaul anyway]) and the get function worked well and parsed data as expected.

Conclusion

I was pleased with the way that this all went. It was fun just saying what I wanted and seeing it be created in front of me. Vibe coding seems to be very powerful and I now have a new part of my website that I still feel ownership of but got some help with. Going forward I'll be documenting some findings when I tried to write unit tests with AI.