Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

The fastest and easiest way to create a NextJS landing page with Cursor: In this video 1. Start From Template 2. Edit the site with an image and a few prompts 3. Deploy to Vercel 4. Connect to Custom Domain Template / prompt is pinned to @senior_swc

Riley Brown

130,721 subscribers

24,692 views • 1 year ago •via X (Twitter)

Education Arts Science & Technology

Anya Rossi• Live Now

Private livecam show

11 Comments

Riley Brown1 year ago

Template:

Christian Esmann2 years ago

I just launched an all-in-one template for cross-platform development, based on the stack I use myself everyday. Expo, NextJS, TypeScript, Tailwind, Firebase, AppsFlyer, Authentication, Analytics, In-App Purchases, Stripe and a lot more, setup by default.

@Aryan | Founder1 year ago

@senior_swc best way is start with a paid production ready boilerplate

Riley Brown1 year ago

@senior_swc Probs

Raising Champions1 year ago

@senior_swc awesome!

Joseph Langford1 year ago

@senior_swc Have you fooled around with building backends that have APIs etc.?

Anirudh Thakur1 year ago

@senior_swc Amazing video. Would implement it tomorrow and create a site for my current workplace. Their current website is so 2000.

Sola Awodiya1 year ago

@senior_swc Love your work Riley! How does it compare to Lovable?

Christian von1 year ago

@senior_swc love it. you can tell cursor to create the github repo via the CLI

PianoLabs1 year ago

@senior_swc i was watching your "from screenshot to landing page" video yesterday, super easy to follow and gives really good results

John B. Hill1 year ago

@senior_swc What does doing this cost, all inclusive? Thanks for all you content, Riley.

Related Videos

Fastest way to create a landing page... 1. Register a domain at Cloudflare 2. Got to aura․build and create a landing page with AI 3. Download HTML/CSS code to your HDD 4. Initiate a Git repository and publish 5. Go to sevalla․com and upload your project. 6. Associate your custom domain.

Fastest way to create a landing page... 1. Register a domain at Cloudflare 2. Got to aura․build and create a landing page with AI 3. Download HTML/CSS code to your HDD 4. Initiate a Git repository and publish 5. Go to sevalla․com and upload your project. 6. Associate your custom domain.

Csaba Kissi

12,625 views • 3 months ago

Full Cursor Getting Started Beginners Guide You can build an AI wrapper in 30 minutes that uses @ChatGPTapp and API, even if you've never written a line of code, ever. This was 7 total Cursor Composer Prompts. Many people got stuck while following along my recent videos so I wanted to slow it down make one for beginners. From Downloading Cursor to Deploying on Vercel Template link is pinned to this profile @senior_swc Time Stamps 00:00 No-Code App Building 01:00 Getting Started and Downloading Cursor 01:50 Downloading the Template 03:13 Intro to Cursor Composer 04:06 First Prompt Getting Template Set Up 05:05 First Prompt For Real adding ChatGPT api 08:46 Setting up ChatGPT API 10:46 Testing Chat Feature 13:40 Cursor Feature Overview 17:40 Now Lets Add Voice 21:27 Asking Composer to Deploy the app on Vercel

Riley Brown

177,177 views • 1 year ago

the fastest way to clone an app 1. screenshot all the pages of an app 2. paste them into copycoder 3. get the prompts to build your app in cursor copycoder v2 with multi image support is coming together nicely

the fastest way to clone an app 1. screenshot all the pages of an app 2. paste them into copycoder 3. get the prompts to build your app in cursor copycoder v2 with multi image support is coming together nicely

Moritz Kremb

364,837 views • 1 year ago

Everyone is talking about Vibe Coding (Using AI to Create Apps Only using AI) This is the most Comprehensive Guide for Vibe Coding with Cursor (By Far) 250 Minutes, All the vibe code basics of cursor, plus 4 Projects in one video! This is how I, as someone who has never written a line of code, approach building apps (every day). Part 1A Intro to Cursor, Composer, and some basics --------------------- 00:00 Intro 03:41 Downloading Cursor 06:09 What the hell is Composer? 10:47 A Note on Context and Keeping Composer Threads Small 11:38 Simple Desings with Cursor Composer From Blank Project 14:04 Editing a Simple Animation With Cursor Composer 16:35 Setting Up The Voice to Talk to Cursor Composer Whispr Flow 17:54 Lets an Early 2000's Landing Page Part 1B AI Image Generator --------------------- 23:59 Using the GitHub Template to Create a NextJS App 26:43 Template is Open, Let's Edit it 28:55 Drawing Out My Idea With Whimsical 30:11 First Prompt Using Place Holders For Image Generation 32:10 Accept All Vs Save All and Restoring in Composer (Saving your work) 33:54 Adding AI Feature (Brief Teaser, Deep Dive Later) 35:15 What is an API 37:22 Perplexity the best place to learn about API's 40:21 Api keys and running prompt for first AI Feature 42:48 Debugging, Woohoo! Learn to love this :) 43:20 Inspect - Console, In Browser Debugging Hack 48:02 AI Image Generation Works! Lets add more Part 2: Landing Page ---------------------- 51:03 Pause and Reflect, What have we done so far? 53:41 Plan for rest of video 54:34 Ok Let's Talk about (1) Designs 56:19 GitHub is like --sref for those who do image gen 58:20 Starting Cursor project from a GitHub Repo we found on Perplexity 01:00:48 Yolo Mode... Wtf is that? 01:02:38 Inspecting GitHub Repo's Examples, to use in our landing page 01:02:58 The Project We're making - A landing page 01:03:56 Landing Page from Screenshot 01:06:17 Making Changes to Landing Page 01:11:42 Making a more epic section 01:13:42 The Essence of Vibe Coding 01:15:17 Creating Cool Testimonials Section From Screenshot 01:18:18 Deploy to Vercel! But First New Repo on GitHub 01:20:45 Ok it's on GitHub... Now lets do vercel 01:21:17 Untechnical Explanation of what Vercel is Lol 01:24:18 Connecting Custom Domain (Bought on Name Cheap) To Vercel Deployment Part 3: App With Database and Authentication ---------------------- 01:27:59 Recap and Prep For The Bigger Project! 01:35:13 Getting Started from Template (Again) 01:38:52 Setting Up Database and Authentication (Firebase) 01:44:01 Back To Cursor, Let's Set up The Auth in the app 01:48:35 Switching to mermaid because compatibility issues 01:51:13 Using AI (Claude) to Generate Mermaid Diagrams 01:52:19 Adding Docs to Cursor to use AI Features over and over again 01:54:38 Let's Troubleshoot 01:56:10 Adding View Button and EDIT WITH AI 02:01:45 AI Diagram Edit Feature is DOPE 02:03:17 Using Search Feature on Cursor to find text in Codebase 02:05:55 Lets add ability to save these to Database 02:09:33 What does saved to Google Firebase even mean? 02:13:00 We can Export as PDF! 02:15:48 GitHub and Vercel Again! 02:17:27 Vercel with CLI From Cursor 02:20:52 Setting Vercel Domain as an Authorized Domain 02:27:34 How To Learn More

Everyone is talking about Vibe Coding (Using AI to Create Apps Only using AI) This is the most Comprehensive Guide for Vibe Coding with Cursor (By Far) 250 Minutes, All the vibe code basics of cursor, plus 4 Projects in one video! This is how I, as someone who has never written a line of code, approach building apps (every day). Part 1A Intro to Cursor, Composer, and some basics --------------------- 00:00 Intro 03:41 Downloading Cursor 06:09 What the hell is Composer? 10:47 A Note on Context and Keeping Composer Threads Small 11:38 Simple Desings with Cursor Composer From Blank Project 14:04 Editing a Simple Animation With Cursor Composer 16:35 Setting Up The Voice to Talk to Cursor Composer Whispr Flow 17:54 Lets an Early 2000's Landing Page Part 1B AI Image Generator --------------------- 23:59 Using the GitHub Template to Create a NextJS App 26:43 Template is Open, Let's Edit it 28:55 Drawing Out My Idea With Whimsical 30:11 First Prompt Using Place Holders For Image Generation 32:10 Accept All Vs Save All and Restoring in Composer (Saving your work) 33:54 Adding AI Feature (Brief Teaser, Deep Dive Later) 35:15 What is an API 37:22 Perplexity the best place to learn about API's 40:21 Api keys and running prompt for first AI Feature 42:48 Debugging, Woohoo! Learn to love this :) 43:20 Inspect - Console, In Browser Debugging Hack 48:02 AI Image Generation Works! Lets add more Part 2: Landing Page ---------------------- 51:03 Pause and Reflect, What have we done so far? 53:41 Plan for rest of video 54:34 Ok Let's Talk about (1) Designs 56:19 GitHub is like --sref for those who do image gen 58:20 Starting Cursor project from a GitHub Repo we found on Perplexity 01:00:48 Yolo Mode... Wtf is that? 01:02:38 Inspecting GitHub Repo's Examples, to use in our landing page 01:02:58 The Project We're making - A landing page 01:03:56 Landing Page from Screenshot 01:06:17 Making Changes to Landing Page 01:11:42 Making a more epic section 01:13:42 The Essence of Vibe Coding 01:15:17 Creating Cool Testimonials Section From Screenshot 01:18:18 Deploy to Vercel! But First New Repo on GitHub 01:20:45 Ok it's on GitHub... Now lets do vercel 01:21:17 Untechnical Explanation of what Vercel is Lol 01:24:18 Connecting Custom Domain (Bought on Name Cheap) To Vercel Deployment Part 3: App With Database and Authentication ---------------------- 01:27:59 Recap and Prep For The Bigger Project! 01:35:13 Getting Started from Template (Again) 01:38:52 Setting Up Database and Authentication (Firebase) 01:44:01 Back To Cursor, Let's Set up The Auth in the app 01:48:35 Switching to mermaid because compatibility issues 01:51:13 Using AI (Claude) to Generate Mermaid Diagrams 01:52:19 Adding Docs to Cursor to use AI Features over and over again 01:54:38 Let's Troubleshoot 01:56:10 Adding View Button and EDIT WITH AI 02:01:45 AI Diagram Edit Feature is DOPE 02:03:17 Using Search Feature on Cursor to find text in Codebase 02:05:55 Lets add ability to save these to Database 02:09:33 What does saved to Google Firebase even mean? 02:13:00 We can Export as PDF! 02:15:48 GitHub and Vercel Again! 02:17:27 Vercel with CLI From Cursor 02:20:52 Setting Vercel Domain as an Authorized Domain 02:27:34 How To Learn More

Riley Brown

368,936 views • 1 year ago

Here's how to deploy your own MCP server in 30 seconds: 1. Remix the Replit template 2. Prompt Agent "create a server that does xyz" 3. Select "Publish" Voila - a streamable HTTP server deployed with API key auth Connect to your sever in your client of choice

Here's how to deploy your own MCP server in 30 seconds: 1. Remix the Replit template 2. Prompt Agent "create a server that does xyz" 3. Select "Publish" Voila - a streamable HTTP server deployed with API key auth Connect to your sever in your client of choice

matt palmer

80,137 views • 10 months ago

You (with zero coding experience) can now create websites from scratch using AI in less than 20 minutes with this template: In this video and I walk you through the process of: 1. setting up the Template on Claude Projects and how to connect your Replit (Code Base) to your Google Firebase (Database, Storage, Auth). 2. Using the template to turn one of your ideas into a working web app with: -----> Clean Stylized Front End -----> Database -----> Storage, -----> User Sign in + Profile Page -----> File + Post Uploads In less than 20 min. The best part is... Next week we will show you how to create API endpoints, and you'll be able to create full web apps with multiple AI features. Sections of this video ---------- 00:00 Introduction 02:28 Template Set Up 17:47 Building App with the Template

Riley Brown

122,604 views • 2 years ago

So Aura can now create a full site with multiple pages and a publish button From a template, you can one-shot new pages with incredible consistency This was the #1 request we had. With subdomains, page transitions and remix template.

So Aura can now create a full site with multiple pages and a publish button From a template, you can one-shot new pages with incredible consistency This was the #1 request we had. With subdomains, page transitions and remix template.

Meng To

24,614 views • 10 months ago

GROK IMAGINE PROMPT TIP: There's a very simple way to improve your prompts: use the prompts from the templates offered by Grok Imagine. These templates provide a wealth of prompts available to everyone. Take a prompt and analyze it to understand the purpose of each word. For example, I took the fish template and added a color change in the prompt using the video extension.

GROK IMAGINE PROMPT TIP: There's a very simple way to improve your prompts: use the prompts from the templates offered by Grok Imagine. These templates provide a wealth of prompts available to everyone. Take a prompt and analyze it to understand the purpose of each word. For example, I took the fish template and added a color change in the prompt using the video extension.

Déborah

551,262 views • 5 months ago

You can now create new web apps with Cursor, store the code with Origin, and deploy to Vercel.

You can now create new web apps with Cursor, store the code with Origin, and deploy to Vercel.

Cursor

978,681 views • 3 days ago

Introducing the Knowledge Agent Template Vercel dropped the Chat SDK so we built a full template on top of it that you can deploy in one click. Here's what's inside: • Add your sources: GitHub repos, YouTube, etc. directly from the UI • File-based agent using grep/find/cat • Powered by Vercel Workflow + Sandbox • Multi-platform: web chat, GitHub bot, Discord bot, and more • Comes with skills to edit your project, add sources, create agents Deploy, add a source, ask questions. Your knowledge base is live and always in sync. This is just scratching the surface. There's way more packed in this template, and I'll be breaking down the features all week. Links in the below 👇

Introducing the Knowledge Agent Template Vercel dropped the Chat SDK so we built a full template on top of it that you can deploy in one click. Here's what's inside: • Add your sources: GitHub repos, YouTube, etc. directly from the UI • File-based agent using grep/find/cat • Powered by Vercel Workflow + Sandbox • Multi-platform: web chat, GitHub bot, Discord bot, and more • Comes with skills to edit your project, add sources, create agents Deploy, add a source, ask questions. Your knowledge base is live and always in sync. This is just scratching the surface. There's way more packed in this template, and I'll be breaking down the features all week. Links in the below 👇

Hugo

54,743 views • 6 months ago

For the past 9 days I've been creating websites using AI with no coding experience In this video: [1] 5 examples of websites I've built w/ Claude [2] My 4 step process to easily create a website [3] Example: create a landing page from scratch Timestamps: - 00:00 - introduction - 00:54 - 5 Websites I've created in last 9 days - 03:00 - 4 Step Process for creating website - 06:37 - Building a website with own custom domain - 16:40 - Adding Custom Domain to our site

For the past 9 days I've been creating websites using AI with no coding experience In this video: [1] 5 examples of websites I've built w/ Claude [2] My 4 step process to easily create a website [3] Example: create a landing page from scratch Timestamps: - 00:00 - introduction - 00:54 - 5 Websites I've created in last 9 days - 03:00 - 4 Step Process for creating website - 06:37 - Building a website with own custom domain - 16:40 - Adding Custom Domain to our site

Riley Brown

74,924 views • 2 years ago

Beautiful design with AI is possible Interactive landing page template made 100% with bolt.new Who wants us to drop this template for free? Drop a comment 👇

Beautiful design with AI is possible Interactive landing page template made 100% with bolt.new Who wants us to drop this template for free? Drop a comment 👇

damien

19,432 views • 1 year ago

CLAUDE + CURSOR + REPLIT = MAGIC (FULL VIDEO TUTORIAL) You can now write create complex web apps with just english (No copy - paste) using the BEST AI Code generation tool on the market - Cursor. The only problem with cursor for a coding beginner like me, is that its not that easy to deploy web apps. Well, Replit ⠕ makes deploying web apps and creating templates incredibly easy. In this video goes over how to sync Cursor and Replit. And then using our new template we made an AI version of Trello by Atlassian in like 6 or 7 cursor composer prompts. --------------------- In this video: 00:00 - Intro 04:08 - Syncing Cursor and Replit 07:40 - setting up Firebase 10:27 - Using Cursor and Replit to Create Trello Front End 19:41 - Setting up Backend API endpoint (we will make dedicated video on this soon w/template) 21:09 - Adding AI features to Trello!

CLAUDE + CURSOR + REPLIT = MAGIC (FULL VIDEO TUTORIAL) You can now write create complex web apps with just english (No copy - paste) using the BEST AI Code generation tool on the market - Cursor. The only problem with cursor for a coding beginner like me, is that its not that easy to deploy web apps. Well, Replit ⠕ makes deploying web apps and creating templates incredibly easy. In this video goes over how to sync Cursor and Replit. And then using our new template we made an AI version of Trello by Atlassian in like 6 or 7 cursor composer prompts. --------------------- In this video: 00:00 - Intro 04:08 - Syncing Cursor and Replit 07:40 - setting up Firebase 10:27 - Using Cursor and Replit to Create Trello Front End 19:41 - Setting up Backend API endpoint (we will make dedicated video on this soon w/template) 21:09 - Adding AI features to Trello!

Riley Brown

309,493 views • 2 years ago

This is the best way to build UI with AI. Use Cursor + V0. With a custom prompt (below), you can easily trigger V0 to create beautiful interfaces for you directly from Cursor Composer. Watch this insane building hack.

This is the best way to build UI with AI. Use Cursor + V0. With a custom prompt (below), you can easily trigger V0 to create beautiful interfaces for you directly from Cursor Composer. Watch this insane building hack.

Mckay Wrigley

693,213 views • 2 years ago

I was honestly curious to see how much Nemo AI could create from just one image, so I tried the Beauty Rush template. I uploaded the avatar, picked the template, and a few seconds later, this was the result 👀 It’s such a fun way to turn a simple image into something that actually feels alive, without spending hours editing. Try Nemo AI here: Beauty Rush template: NemoVideo

Marry claire

17,374 views • 1 month ago

Stop scrolling. Qwen Image 2512 is the fastest way to ship clean visuals today. Most people will use it once and miss the real workflow. Do this → → Open Qwen Image 2512 inside Qwen chat → Start with the sample prompts to get baseline results → Generate 3 variations fast (speed is the advantage) → Click Edit and iterate with 1 line instructions → For video, hit Create video and watch the progress bar Save this video, you’ll build better creatives in minutes. Want the SOP? DM me. 💬

Stop scrolling. Qwen Image 2512 is the fastest way to ship clean visuals today. Most people will use it once and miss the real workflow. Do this → → Open Qwen Image 2512 inside Qwen chat → Start with the sample prompts to get baseline results → Generate 3 variations fast (speed is the advantage) → Click Edit and iterate with 1 line instructions → For video, hit Create video and watch the progress bar Save this video, you’ll build better creatives in minutes. Want the SOP? DM me. 💬

Julian Goldie SEO

10,749 views • 8 months ago

I get asked a lot for giant prompts to create insanely detailed landing pages. Here's how: - Copy a giant prompt like the one below 👇 - Ask ChatGPT to adapt it to your site - Create landing page from it anywhere

I get asked a lot for giant prompts to create insanely detailed landing pages. Here's how: - Copy a giant prompt like the one below 👇 - Ask ChatGPT to adapt it to your site - Create landing page from it anywhere

Meng To

48,587 views • 2 months ago