Cursor Composer: Is This How We'll Code Now? 🤔

In this video, I'll guide you through building a web application using Cursor's, a fork of VS Code loaded with AI features. We'll create a simple web app from scratch, incorporating components like a nav bar, footer, and a pricing page using natural language commands. You'll see how Cursor enhances the development process and quickly resolves issues, making it what could be an essential tool for developers. Plus, we'll explore adding OpenAI's DALL-E 3 for image generation, and setting up environment variables. Learn how to transform your workflow with Cursor Composer!

00:00 Introduction to Cursor and Video Overview
00:37 Setting Up the Development Environment
01:30 Creating the Basic Structure
03:40 Building the Pricing Page
06:39 Adding Contact and About Pages
07:13 Implementing Frontend and Backend Validation
09:28 Generating Images with OpenAI
16:17 Final Touches and Enhancements
18:16 Conclusion and Next Steps

This video was sponsored by Brilliant

[stonedizzleful]

I just started using the cursor compose functionality. It's crazy good.

[wicktorinox]

Some told me the other day, now we need no developer, because with cursor, you don't need to write code anymore. The issue with anything new, that will may help you with 80-90%, but the remaining 10-20% will be a pain.

[anne-marieroy]

Thank you for this excellent Cursor review; it gives a very practical startup to get familiar with the new IDE.

[javiermarti_author]

Great video. Impressive technology. "Consequences will never be the same"

[KS-tjfc]

How many input/output tokens did the website in your demo cost?

In future videos can you run/display a token in:out/$cost counter to show the efficiency of say $2.00 saving some 30 minutes?

I often wonder what the LLM costs add up to be?

[finalfan]

we' re almost there where i can do this myself as a functional/business analyst

[dhrubanka]

It speeds up the thinking process of a developer but it's still the developer that holds the control, if you replace it with an autonomous body that means humans are no longer needed in any field.

[richardadonnell]

🎯 Key points for quick navigation:

00:00 *💻 Introduction to Cursor, a fork of VS Code with advanced AI features, aimed at simplifying web application development.*
00:14 *🚀 Cursor is positioned as a cutting-edge code editor with a free trial available.*
00:56 *🎯 Demonstration begins with creating a new Next.js app using natural language commands in Cursor.*
02:01 *📁 Cursor can generate new files, like nav and footer components, automatically within the project structure.*
02:40 *📱 Focus on making the application mobile-friendly, adjusting layout components accordingly.*
03:07 *🌐 Instructions for creating a landing page are provided in natural language, demonstrating real-time code updates.*
03:46 *💸 Building a pricing page with toggles for monthly and annual plans, showcasing Cursor's dynamic coding capabilities.*
04:43 *🛠️ Adjusting and fixing visual elements directly within Cursor to enhance the user interface.*
05:06 *🔧 Cursor provides real-time debugging and error fixing by allowing direct edits based on error messages.*
07:19 *📬 Adding front-end and back-end validation to a contact form using React and NodeMailer in Cursor.*
08:32 *⚡ Quick error resolution by interacting directly with the terminal and AI within Cursor.*
09:40 *🖼️ Demonstrating the ease of creating an image generation page using OpenAI's DALL·E within Cursor.*
10:48 *💬 Cursor includes a chat interface for real-time AI assistance, enhancing the development process.*
13:20 *🐕 Example of generating an image from a prompt, showcasing Cursor's integration with AI tools.*
14:15 *🧠 Explanation of Cursor's integration with powerful AI models like GPT-4 directly within the IDE.*
16:06 *🎓 Mention of Brilliant.org as an educational platform for enhancing problem-solving skills, tying back to development themes.*
17:41 *🌟 Final demonstration on refining the application with adjustments to design and content, showing Cursor's versatility.*
18:10 *🏗️ Concluding thoughts on how Cursor allows rapid development of SaaS applications using natural language, ideal for MVPs.*

Made with HARPA AI

[garolstipock]

The future looks... impressive.
Yet, with all it does and frees the developer from inputting, strikes me that it still requires someone that knows how to develop. There are software development nuances that about that only one that does this work ye olde fashioned way will still need to be at the helm to know how to adequately prompt, fine tune, and troubleshoot.

But it does look very impressive.

Cursor is actually pretty good, better than using Gemini or Chat due to context but it won't make everything for you. Simple web apps and shit - yes easy enough. I dumped my game engine in there written in C++ and cursor doesn't know what to do.

[KelvinChan-mbok]

very impressed, here after hearing this on X a lot. wondering what effort went into this fork, and now we have this, is it good enough such that an avg dev can fork his own personal version of vscode. A lot of software out there isnt infused with AI, I think this could become a template on how to move other time tested software. I am thinking about Emacs, of course!. I think it also had some early story with AI and chatbot. it will be a cool retro if some can create an AI infused Emacs.

[NLPprompter]

i already built counting 10's visualization for kids using sonnet3.5 in claude artifact
because i can't install cursor in ubuntu 24.04 ugh! do i need windows now?

btw kids loved the app, and after using them several times those kids able to count in 10's how awesome is we are living in this era

[nustaniel]

My problem would be that it is likely creating bad code. It may not report that there are errors in the editor, but it might be very bad when it comes to being performant, or it may not be able to realize why some of the code it writes is not logical. In some cases this won't be an issue, but I've seen time and time again when I try to interact with LLMs for code, that it will generate very unoptimized and outdated code using deprecated JS functions in example, or placing for loops that interacts with the DOM without cached data into events that will be firing all the time as you move a cursor, it's sometimes producing super unoptimized approaches that would struggle if you're dealing with a list of hundreds of items in example.

It seems interesting, but I'd prefer having more control over what it is that is actually written, and how it is written in. I wouldn't feel comfortable giving an LLM this much say in how my code is. And if I have to go over every little bit it writes anyways, did it help me or will that end up making me spend more time analyzing code it writes, figuring out what it is that it wanted to do, then fixing issues as I spot them? I do think AI as a tool to have on the side is super useful though. It can give you some ideas on how to approach a problem and it can be absolutely godsent when it comes to finding documentation quickly. I often pop open ChatGPT in example to ask it if there is a way to do a certain thing with CSS, or if there is a way to do this and that in JS. It will quickly let me know what to look up, and it can be pretty good at summarizing it too if I don't feel like reading a lot of documentation or if I find the documentation to be a bit hard to wrap my head around.

[mamadouanne]

Thank you for this great video, I follow along with everything however my Open ai key isn't working. It keeps saying failed to generate image. Any idea how I can fix this issue please ?

[mycavalli]

Hi. I'm using Claude Ai Pro, but it is limited to 45 messages/5h and it still has to copy/paste code and still has many errors. So, should I switch to Cursor Pro + (chatGPT / Claude Ai / Blackbox /... free) ?? Thanks.

[professorice]

This is pretty cool but ultimately just learn to code yourself. In the near-future, the websites that make the most will be the ones with creative direction. Just like how only the most beautiful Shopify sites are the ones big brands use to standout. Quality over Quantity.

[hkbenja]

Doesn't Copilot already do this? It reads opened tabs and you can even tag the entire @workspace for it to use as a reference.

[softreviewed]

How do you revert back if something goes wrong?

[afzalhussain]

This reminds me of Visual Basic 6 revolution. The product was marketed as manager can create application and no developer is needed. Then one day Microsoft pulled out .NET out of thin Air and then every body was reeling from the disruption it caused. And now AI coding... go figure

[Dom-zyqy]

Lol at seeing non-tech people soyface over the ability to now generate react frontends and CRUD. "We're almost there" ignorance is bliss. But I guess some people don't really need complicated software, but at that point, just wait for better, cheaper AI products to release.