NEW: Claude Dev Beats Cursor?!?🤖 MORE INSANE UPDATES! Screenshot Live Site & Improve Code With AI
Summary
TLDRJosh Pook discusses the latest updates to the AI pair programming extension, Claude Dev, highlighting its new features like error and warning detection, file content addition, and a browser tool for debugging web projects. He praises Claude Dev's ability to push the limits of VS Code extensions, comparing it favorably to other AI tools like Cursor and Composer. The video showcases Claude Dev's capabilities in creating a Next.js web app, automating tasks, and improving UI with modern features.
Takeaways
- 🎁 **Claude Dev Updates**: The video discusses the continuous updates to the Claude Dev AI extension, highlighting its growing capabilities.
- 🔥 **New Features**: Version 1.8 of Claude Dev allows users to add content directly from URLs and workspace errors/warnings for debugging.
- 🛠️ **Efficiency Improvements**: The update reduces the need for manual debugging by copying and pasting errors and warnings.
- 📂 **File Management**: Users can now add multiple files or folders at once, streamlining the workflow.
- 🌐 **Browser Integration**: Version 1.90 introduces a site tool that captures screenshots and console logs, aiding in web project debugging.
- 👀 **Visual Debugging**: Claude Dev can now inspect websites for runtime and visual errors, offering more autonomy in fixing issues.
- 🔧 **Error Handling**: The tool assists in fixing errors without the need for manual handling of logs.
- 💻 **IDE Integration**: The video compares Claude Dev's capabilities with other IDE extensions, noting its advantages.
- 📈 **Rapid Development**: Claude Dev can set up projects, write code, and run commands, showcasing its potential in rapid development.
- 🌟 **Innovation**: The development team behind Claude Dev is noted for pushing the limits with innovative features not常见 in other tools.
- 🔗 **Community Engagement**: The presenter encourages viewers to share their experiences with Claude Dev and engage with the community.
Q & A
What is the main topic of the video?
-The main topic of the video is an update on the AI extension called Claude Dev, which is continuously receiving new updates that enhance its functionality as an AI pair programming tool.
Who is the presenter of the video?
-The presenter of the video is Josh Pook.
What are some of the new updates to Claude Dev mentioned in the video?
-Some of the new updates to Claude Dev include the ability to add workspace errors and warnings for Claude to fix, adding files' contents to reduce API requests, and the introduction of a browser tool that lets Claude capture screenshots and console logs of any URL.
What does the browser tool update in Claude Dev allow it to do?
-The browser tool update allows Claude Dev to launch a headless browser, take screenshots, capture logs and errors, and assist in debugging web projects autonomously.
How does the video demonstrate the capabilities of Claude Dev?
-The video demonstrates Claude Dev's capabilities by showing it creating a Next.js web app, automating tasks, and fixing issues in a web app with runtime errors and visual errors.
What is the significance of the 'at' command in Claude Dev?
-The 'at' command in Claude Dev allows users to paste a URL for the extension to fetch and convert to markdown, which is useful for providing Claude with the latest documentation.
What does the video suggest about the pace of updates for Claude Dev?
-The video suggests that Claude Dev is receiving updates at a rapid pace, with new versions being released every few days, indicating continuous development and improvement.
What is the presenter's opinion on Claude Dev compared to other AI pair programming tools?
-The presenter views Claude Dev as one of his favorite AI pair programming extensions, appreciating its innovative features and rapid updates that push the limits of what's possible within a VS Code extension.
What other AI pair programming tools are mentioned in the video?
-The video mentions other AI pair programming tools such as Cursor and Composer, comparing their features to those of Claude Dev.
What is the presenter's view on the future of AI in programming?
-The presenter envisions a future where AI tools like Claude Dev have access to a large context window and all the necessary documentation, allowing them to assist developers more effectively.
How does the video conclude regarding Claude Dev?
-The video concludes by encouraging viewers to try out Claude Dev and share their experiences, while also highlighting the potential of Claude Dev to compete with other tools like Cursor.
Outlines
🤖 Introduction to Claude Dev's Updates
Josh Pook introduces the video by expressing excitement about the continuous updates to the AI extension Claude Dev. He mentions that the founder is actively improving the extension, making it one of his favorite AI pair programming tools. Josh highlights the benefits of using an IDE for development due to its customization and integration capabilities compared to the limitations of VS Code extensions. However, he notes that Claude Dev is pushing these limits with innovative features. The video promises to explore these updates and their impact on the development experience.
🔧 New Features and Updates in Claude Dev
Josh discusses the new features of Claude Dev, including the ability to add workspace errors and warnings for debugging, and to add files' contents to improve workflow efficiency. He also covers the update that allows Claude Dev to use a browser for capturing screenshots and console logs of any URL, which aids in debugging web projects autonomously. Josh shares an example of using this feature to fix runtime errors in a to-do app. He compares Claude Dev to other AI pair programming tools like Cursor and Composer, noting that Claude Dev is pushing the boundaries with unique features.
🛠️ Setting Up a Next.js Web App with Claude Dev
Josh demonstrates how to use Claude Dev to set up a Next.js web app based on an existing Chrome extension. He instructs Claude Dev to create a new folder, write code, run commands, and create components for the web app version. Despite some minor issues with command execution, Josh is impressed with Claude Dev's ability to execute commands and generate code. He also appreciates the feature that shows API token usage, which provides transparency and cost control.
🌐 Improving the Web App with Claude Dev's Assistance
Josh continues to work on the web app, using Claude Dev to make it more modern and user-friendly. Claude Dev takes a screenshot of the app, identifies areas for improvement, and implements changes such as updating the layout and adding animations. Josh is excited about the potential of Claude Dev's new features and compares them to those of Cursor, suggesting that a combination of features from both tools would be powerful. He also notes the importance of the feedback loop from code generation to live deployment and the potential for even more advanced features in the future.
📈 Wrapping Up and Engaging with the Community
In the conclusion of the video, Josh summarizes the new features of Claude Dev and encourages viewers to share their thoughts on whether Claude Dev can compete with Cursor or other tools. He invites viewers to join the conversation in the comments and to share their experiences with Claude Dev. Josh also promotes the channel's Discord and Facebook groups for networking and sharing value. He wraps up by thanking viewers for their support and motivating them to keep working hard.
Mindmap
Keywords
💡Claude Dev
💡IDE
💡API
💡AI Pair Programming
💡Extensions
💡Updates
💡Debugging
💡Visual Studio Code
💡Next.js
💡OpenAI
💡Chrome Extension
Highlights
Josh Pook discusses continuous updates from the founder of Claude Dev, an AI extension for VS Code.
Claude Dev is becoming one of Josh's favorite AI pair programming extensions with significant improvements.
Version 1.8 of Claude Dev allows using 'at' commands in the text area to fetch and convert URLs to markdown.
Claude Dev can now add workspace errors and warnings for debugging without manual copying and pasting.
The update lets Claude Dev read file contents and search through files without wasting API requests.
Version 1.9 introduces a site tool that captures screenshots and console logs of any URL for autonomous debugging.
Claude Dev's new features are compared to other AI pair programming tools like Cursor.
Josh explores the possibility of integrating Claude Dev's features with an IDE for a more powerful experience.
Claude Dev supports various AI providers like OpenAI, Anthropic, Google, and others.
Josh demonstrates how Claude Dev can create a Next.js app and set it up with step-by-step guidance.
Claude Dev executes commands and creates necessary files automatically during the project setup.
Josh appreciates Claude Dev's feedback on API token usage and its caching capabilities.
Claude Dev's ability to take screenshots and suggest UI improvements in real-time is showcased.
Josh tests Claude Dev's new features by building a web app version of a Chrome extension.
Claude Dev successfully creates components and sets up server-side rendering for the web app.
Josh highlights the importance of the feedback loop in AI development tools and how Claude Dev is advancing in this area.
The final web app built with Claude Dev's assistance is shown, demonstrating its capabilities in action.
Josh invites viewers to share their experiences with Claude Dev and compares it to other tools like Cursor.
The video concludes with a call to action for viewers to join the Discord channel and Facebook group for community engagement.
Transcripts
what's going on everybody Josh pook here
and Claude Dev seems to just be the AI
extension gift that just keeps on giving
we are continuously getting new updates
from the founders and this one is good
let's dive right into
[Music]
it all right guys so if you're not
familiar with Claud Dev I've done many
different videos on this I even did one
maybe about a week or so ago about
recent update but it seems like Claude
Dev the claw Dev founder may just be
using Claude Dev to push out some of
these updates and make some really big
improvements to claw Dev so it's slowly
becoming one of my favorite AI pair
programming extensions all right for
those of you who been watching this
channel you'll know that I'm more of a
fan of the IDE as the backbone because
it gives you a lot more customization in
terms of features and Integrations and
just the dev experience overall that you
really just can't get
with just an extension just due to like
it being within vs code and VSS code's
limitations just for extensions but it
seems like claw Dev is really pushing
those limits with some of the cool
features that I just certain like
frankly haven't been even expecting like
we haven't seen a lot of these features
from any other uh AI pair programming
Chrome extens or not a Chrome extension
vs code extension right so without Ado
let's Dive Right into what these updates
actually are so two main ones with this
new push out and I'll quickly touch on
some of the old updates too that I
covered in my last video that are really
good but Claud Dev one okay so 1.8 uh o
came 80 came out and you can basically
now use at in the text area to add Conta
similar to like you can with cursor so
paste in a URL for the extension to
fetch and convert to markdown use uh
useful when you want to give claw the
latest doc so that's really cool and
really interesting and we'll even test
that out to see um you know that and
it's great that a lot of these AI tools
can you can you can just like upload the
docks and whatnot personally I'm either
waiting for or maybe I'll have to make
it or something where you can just like
scrape the docks all at once I think
that would be pretty cool and upload it
to the llm get it all the recent docks
right away and imagine just having a l
or a pair programmer with an a really
powerful llm with all your different
docs for all your different text stacks
and then maybe a large context window I
think that's where we're headed but
anyways add workspace errors and
warnings to Claud to fix so that's
really useful no more back and forth and
debugging okay so you don't have to copy
paste all the different workflow
workspace errors and warnings so I can
read um that and then add a files
contents so you don't have to waste API
requests approving read file plus type
to search and then add a F uh folders
files add a folders files all at once to
speed up your workflow even more so this
is really useful this is like these are
all a lot of the stuffs that uh cursor
can do um but it's good to see that
Claude Dev is really uh pushing out
these updates and definitely not someone
to sleep on definitely not a tool to
sleep on now Claud Dev can now use a
browser so this is another update that
he pushed out
1.90 and this adds a new _ site tool
that lets him capture screenshots plus
console logs of any URL example Local
Host giving him more autonomy to De
debugging Web projects on his own so we
can quickly look at some of this example
right here I've got this to-do app and
it's got some problems but not anything
the typescript language server can
detect there're runtime errors and
visual errors and and now Claude Dev is
going to be able to help me fix them
with his new inspect site tool this lets
him launch a headless browser in the
background take a screenshot and capture
any logs and errors this gives them a
lot more autonomy to fixing issues
without you needing to handhold and
copying and pasting the arrow logs
yourself so let's see this in
action I'm going to ask him to run my
app and fix issues
okay so now the local Dev server is
running in the background and Cloud
wants to inspect the website so H
approve cool so it looks like nothing
rendered in the screenshot and we've got
some type errors here so let's see if
Cloud can fix
these Okay cool so now the app is
rendering but it looks like there's an
issue with this add Todo button so let's
see if Cloud can fix that
and just like that the app is fixed
thanks
Claude so pretty cool um as you can see
it can take screenshots of you know the
website and also too um another cool
thing like these are things that at the
moment and I do think I pretty much know
like composer and cursor will get
certain features like this maybe even
potentially better or whatever it's you
know it's the the race right now
everyone's coming up with new features
and stuff this is also new in terms of
all these AI features and integrating
with ID and this and that but these are
some things that I I continuously see
with the Claude Dev development team
which I don't know if there's if it's
just the founder or whatever but um
they're constantly kind of pushing the
limits and adding cool new features that
are a little bit different than a lot of
the other tools I like their Innovative
uh features for example cursor cannot
screenshot right now it cannot
automatically run commands within the
terminal so the command terminal op like
running commands in the terminal I think
that's really useful um to a certain
degree obviously like you got to make
sure and watch it and make sure it's uh
managed correctly but uh that's really
cool so if you don't know how to install
claw Dev links will be down below as
well as to those Twitter threads too so
you can check out the releases but go to
claw Dev on Visual Studio code you can
also type this in in Visual Studio code
or you can add it to cursor like myself
I like to keep it there anyways and then
you just install it either there or what
whatnot um and yeah like I mentioned
before you can see 3 days ago we got the
this new version for the screenshots and
the browser 5 days ago we got 1.8 all
right and then last week when I did my
other video we got 1.7 so he's just
pushing out these new updates so let's
go ahead and check some of these out
ourselves so I got a project open here
just a little dummy project and this is
actually a project that we built in one
of our videos few days ago basically
just a simple little Chrome extension
right here that essentially scrapes
YouTube video transcripts and then we'll
summarize them okay so we have just a
Chrome extension here and then we have a
flask uh server right here that is for
the API and our Chrome extension will
send requests to the flash server and
then receive them back to get the
transcripts and do the open AI um
configur or the open AI summarization so
let's go go ahead and we're not going to
use chat or composer we're actually
going to use claw Dev of course and you
can even see the new updates mentioned
right here but we already covered those
so we're just going to exit this out and
next uh if you I'll do a quick overview
on Claud Dev it can use different open
AI or different API Prov providers
anthropic Google Gemini Google open AI
ol llama which is nice that's really
nice when uh one of these tools supports
local models and then open router open R
is a really good option just because you
can pretty much use anything like you
can use 01 preview 01 mini Etc so just
for time sake we're not going to use 01
um preview just because that's going to
take super long we'll just use anthropic
and we'll use Claude Sonet 3.5 so it's a
bit faster and another thing that I
always mention that I really like about
Claude Dev is that it actually tells you
how much API tokens or credits that
you're using for certain things so let's
go ahead and
basically just ask CL Dev right here
okay so I got the whole prompt here
which is here's a Chrome extension I
built that basically takes a YouTube URL
and sends an API request to my flask
server to get the transcript and then
the server sends an open AI API key or
API request to summarize it and send it
back to my Chrome exent I would like to
keep the Chrome extension as is but I
would also like to create a new folder
for a web based app version that uses
the same flask server to send API
requests to it the the app.py flask
server I want to make the app a nextjs
app so read the code of my Chrome
extension and walk me through stepbystep
setting it up and writing the code and
run the commands and create the folder
all for me okay so and then I'm
referencing stride tube folder as well
as the app.py you didn't see my video
about making this Chrome extension I'll
leave it down below so you can check
that out but now we're actually kind of
improving upon it and making a web app
okay so like I said I really like how it
can execute commands for us this is
something that cursor composer or cursor
can't do yet so kudos to Claude for this
I really like this keep up the great
work uh at Claud Dev um so we're npx
creating a new Next app with the latest
and it's naming it stride tube web we're
going to run that command as you can see
we got the claw Dev terminal open and
it's executing really nice stuff so it's
already basically seen that it's run
that obviously we're going to use
typescript eslint Tailwind Source app
router sure okay and then it already so
I apologize for the confusion it seems
that the command to nextjs didn't
execute as expected okay let's try again
with a more
specific we'll create a no so we
actually got it I'm going to say it did
work actually so that's the one thing is
like the feedback loop from it running
commands or like doing certain actions
it's not 100% dialed in but that's also
a little bit difficult and I some of
these features like I said are going to
be a little bit more difficult when it's
not the backbone of the IDE just cuz
like it's relying on vs code um you know
extens extension capabilities
essentially so I said it did work
actually but like I mentioned before we
can see tokens in tokens out cash uh
we're doing prompt caching and then API
cost so really nice stuff there and
we're seeing diffs right here so really
cool you can see apologizing for
misunderstanding Thank you for
clarifying the xjs app was successfully
created let's proceed with setting up
the web based version okay so yeah we
can see this has been created which is
nice okay so it's going to create the
main page let's do save okay so it looks
like it's creating API
input okay so it's creating some
components so three components API input
video input and then transcript
summarizer sure I'm just going to like
completely run this on autopilot let
Claude Dev handle this let's see how it
works okay great we've successfully
created these components now it wants to
create the video okay so creating one by
one that's cool the one thing is like it
would be cool I don't know if it does
this but to or it could just create all
them at once so like if that was an
option like how composer can do like I
think if a really cracked a really
powerful strategy would be if like you
can merge the features between claw Dev
and uh cursor because claw Dev like I
said has some really cool unique things
so if cursor added these or if you know
Claud Dev you know I think if Claude Dev
could like it was it's a really big
project to create an actual full-blown
IDE but I think that's really the route
you eventually have to go if you really
want to compete with some of these
bigger players okay so now it's done
that now it's updating the page to
render these use server uh use client
director for server side rendering is
that within the page okay whatever um
and then adjust the layout to and style
okay I'm just going to click save like
there's probably some issues here like
if I was actually building this app
certain things I would want to change
but we're going to go ahead and allow
this okay now this is great you know it
can run this command to CD into this and
then mpm runev okay so seems like the
Run command so it actually did work
again so seems like it always messes up
a little bit what so I'm going to allow
this so it's started on Local Host okay
so I think cuz I already have a project
started on Local Host 3000 I'm curious
if we'll be able to pick it up and let's
see so let's go ahead and check this out
first of all okay so not bad I mean it's
pretty like not you know Vis so we have
a Hy ation error I don't know if that's
a I probably could fix this myself so
let's see
components client use client use client
save save okay yeah that fixed it um so
you can open the open a oh enter the
open AI key here and then enter the
video URL here so let's go ahead and
test this I'm curious if this is going
to work out a box one thing that we do
have to do that it didn't mention is
start up the flask server okay I'm just
going to start the flask server myself
so python
app.py okay we got that running I'm
going to go ahead and test okay so I
like that it added the the password um
kind of like blocking out for this API
key for me we can save and it saved API
key now let's grow go to YouTube that
shows up in your gut and so now we can
okay so I'm going to grab this clip from
the Allin podcast and we're going to
paste this guy in here so let me just
make sure I got the full thing so I'm
copying the URL pasting it and it looks
like it automatically only puts
in the uh ID so that's interesting let's
go ahead and
summarize okay great so we got the
transcript okay wow this worked right
out of box so obviously like if I was to
improve upon this app um yeah I would
obviously make like I could basically
customize a summary prompt for open AI
or quad or like customize it to send it
to whatever API tool I wanted and
basically tell it like either give me a
longer summary or you know dissected or
pull out 10 viral script ideas or like
do whatever you want with this right but
you see the power of I mean I guess AI
in general but I mean even Claude Dev
right here did this in one shot so
Claude Dev is definitely I know we all
love cursor a lot of us love cursor but
I think Claude Dev is one of the top uh
chro like BS code extensions
just because of its capabilities like
this I'm going to say so I said great
please take a look at it on Local Host
31 and make the UI look more modern
after you inspect it all right so now
it's requesting to inspect it so this is
a new feature we're going to accept it
curious to see how this does right this
the first time I'm using it okay so it
took a screenshot right here so we
literally have this screenshot that it
took and it's saying thank you for
providing this uh let's update the main
page to create more modern layout we're
going to save this I mean with all these
advancements like screenshotting like
you know being able to read the error
logs it's kind of just eliminating all
the back and forth like the overarching
like thing that us as developers really
do it's really mitigating those little
things so I mean as we're going to see
these feedback loops it's the feedback
loop from it generating code to it being
able to iterate upon it is getting
shorter and shorter um it's kind of
going to go get a little bit crazy I
feel like so um cool we implemented this
now it's gonna edit some of these
components I like how it shows the diffs
like this all right similar to kind of
almost like cursor it's not as good
because you really just can't get it as
good unless you have the IDE as the
backbone because it's really hard for an
extension to do actual stuff like within
the editor interface vs code really
doesn't uh allow a lot of that stuff so
I mean this would be in my opinion a lot
better if you could have a setting where
it um updates all these files at once
but it's still good um I like how it has
the option to do it one by one but I
think it would be good if it integrated
some of those features that we like with
composer um as well as also too um they
sh I mean I don't know how hard this
would be within the extension but those
checkpoints feature that checkpoint
feature that cser just got is really
awesome I think if the Claud Dev uh Team
could figure out how to do something
like that I think that's a crucial
part okay so now it's going to in
inspect it again while it's inspecting
it itself we can inspect it
too okay so already it's a lot nicer oh
my okay so this is really cool it
actually embeds the video right here so
it's not a perfect embed I could
actually tell it to make the embed
window a bit larger but I mean we could
put a nice optimized logo right here you
know change some of the this add
authentification
add a bunch of different you know
features and it would be a pretty cool
app like you know we have the web app
now you saw my video we made the Chrome
extension we could integrate them to
real the really like you know nicely
together and uh pretty cool stuff we
could obviously have more stuff than
transcript and summary okay so it
inspected it and it's basically saying
okay we can see this has been really
improved now it's actually offering to
make even more improvements so adding a
subtle animation to the title cool okay
we're just going to allow it to do all
this enhance the video input field with
an icon sure why not at a loading State
when
summarizing this is actually getting
sick I'm not going to lie this feature
needs to be added into cursor because
this like the the the it being able to
have a feedback loop of itself of like
the live of the live deployment you know
on Local Host is pretty crazy it's
pretty powerful you're saying make the
video embed the same dimensions as a
normal YouTube video okay so this is the
final Pro the final product right now we
got this kind of Animation right here it
looks pretty cool looks pretty modern I
mean I would obviously put a logo here
but uh we have the nice UI obviously if
I wanted to I could tell it to do use
some Shad CN components um and then we
just paste in the URL here and it embeds
automatically which is really nice and
then obviously we could summarize and
it's going to send that request hit the
trans script get the summary and boom
there we have it so all in all I think
this these new claw Dev features are
super super powerful once again let me
know what you guys think do you think
the uh claw dev has the potential to
compete with cursor or maybe some of
these other tools do you think it is the
best extension or do you think it is
better than cursor because I know a lot
of you maybe even do like uh Claude as
the top one I've seen some people say
that so I think it is very powerful if
so if you are like an avid Claud user
let me know what some of the cool stuff
you guys have built with it what are
some of the cool stuff that you like
with it and why do you like it better
than some of the other ones right I I do
like how the fander is constantly
pumping out new updates I am excited to
see what he has in store for the next
month two months and uh and yeah other
than that guys if you got some value
from this video uh we upload videos
every day on ai ai coding Business
Marketing sales business growth Etc a
bunch of different stuff so you got some
value and like this type of content make
sure to smash that like button smash
that subscribe button we're approaching
that 7K subscribers Mark so thank you
for all the recent support guys really
appreciate it really grateful other than
that guys um if you haven't already
joined our free Discord Channel and
Facebook group go to stri community.com
link for that will be down below so we
can network with each other and share
some value I will see you in tomorrow's
video guys keep hustling keep grinding
and of course guys accelerate your
stride take care
Browse More Related Video
Claude Sonnet 3.5 Artifacts in VSCode With This Extension
Is Claude 2 Offically Better Than ChatGPT? ( Head-To-Head Comparison)
Make ANY Website with ONE Sentence! (WebSim)
9 Mind-Blowing Things Claude 3.5 Can Do That ChatGPT-4o CAN'T
Coding with AI: The Beginning of the Personalized Software Era?
Rank #1 Claude 3.5 Sonnet + ChatGPT AI SEO Extension 100% FREE
5.0 / 5 (0 votes)