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.

Available now in Visual Studio Code Insiders, you can select and add elements directly to Chat! After opening any locally-hosted site via the built-in Simple Browser, click "Start" on the toolbar and select the element you want. This will attach a screenshot of the selected element, as well as... show more

Visual Studio Code

801,177 subscribers

75,499 views • 1 year ago •via X (Twitter)

Science & Technology Education

Anya Rossi• Live Now

Private livecam show

10 Comments

🅰1 year ago

Really cool!

Francois Laberge ✍️1 year ago

Is there going to be an API at some point for VS Code extension writers to embed web-views (vs iframes now) with more privileges so that you can take screenshots and inject/instrument code easily? Severely limits what code generating extensions can do without it.

terry 🇺🇦1 year ago

how do i also get access to claude 3.7 sonnet? i have it enabled on my copilot settings, and i'm even part of a copilot for business right now. why the heck i can't switch from 4o the dumbest one?

Dom1 year ago

Downloading VSCode Insiders now – ready to dive into the new feature!

Evi1 year ago

I used all my credits, bye..👋

GuZi1 year ago

Nice!

Oren Melamed1 year ago

already hyped on it 3 days ago!!!! this is killer feature

Ga Satrya1 year ago

Woah, that's really cool!

Shawn1 year ago

yes microsoft, promote ai generation of nintendo assets in a marketing setting. surely there will be no repercussions

Pete Thorne1 year ago

I can't get this to work, I click "Select" and then click on elements but it's not detecting them?

Related Videos

Did you know that Visual Studio Code has HAD a built-in browser! Say "start my app in simple browser" and it will run the dev server and open simple browser to localhost. It can take screenshots of the page or element and send DOM elements to the agent chat!

Did you know that Visual Studio Code has HAD a built-in browser! Say "start my app in simple browser" and it will run the dev server and open simple browser to localhost. It can take screenshots of the page or element and send DOM elements to the agent chat!

James Montemagno

47,489 views • 7 months ago

Cursor's new browser + element annotation turns it into a design studio. Meet Cursor Design 🎨 — Claude Design, running locally. Describe a screen → get polished HTML → click any element in the preview & say what to change. Best w/ Opus 4.8. npx skills add JimLiu/baoyu-design

Cursor's new browser + element annotation turns it into a design studio. Meet Cursor Design 🎨 — Claude Design, running locally. Describe a screen → get polished HTML → click any element in the preview & say what to change. Best w/ Opus 4.8. npx skills add JimLiu/baoyu-design

宝玉

212,842 views • 8 days ago

You can now add a live browser to Claude Code to click any element and edit it 🤯 Your app runs embedded. You click a button. Claude instantly knows the exact selector, the exact component, the exact location in your code. No more “the red button in the top left of the third card.” Just click it. 100% open source.

You can now add a live browser to Claude Code to click any element and edit it 🤯 Your app runs embedded. You click a button. Claude instantly knows the exact selector, the exact component, the exact location in your code. No more “the red button in the top left of the third card.” Just click it. 100% open source.

Alvaro Cintas

47,136 views • 1 month ago

VFX-JS supports HTML-in-Canvas now. You can turn HTML element into a WebGL texture. It automatically detects the browser and fallback to the old SVG foreignObject workaround. So it works on Chrome, Firefox, and Safari, of course! #WebGL #VFXJS #Codepen

VFX-JS supports HTML-in-Canvas now. You can turn HTML element into a WebGL texture. It automatically detects the browser and fallback to the old SVG foreignObject workaround. So it works on Chrome, Firefox, and Safari, of course! #WebGL #VFXJS #Codepen

𝘼𝙈𝘼𝙂𝙄

51,990 views • 2 months ago

I just released a handy little chrome extension 'clipmd' that lets you click on any element in a web page, and puts in the clipboard that element converted to markdown (ctrl-shift-m), or a screenshot of it (ctrl-shift-s). Handy for LLMs! 😊

I just released a handy little chrome extension 'clipmd' that lets you click on any element in a web page, and puts in the clipboard that element converted to markdown (ctrl-shift-m), or a screenshot of it (ctrl-shift-s). Handy for LLMs! 😊

Jeremy Howard

88,028 views • 6 months ago

You can now design directly in your codebase. Select elements, modify them visually, and Cursor writes the code.

You can now design directly in your codebase. Select elements, modify them visually, and Cursor writes the code.

Cursor

6,075,918 views • 6 months ago

Friendly reminder that you can go to any GitHub repo, press the . key, and the entire repo will open in the browser using Visual Studio Code

Friendly reminder that you can go to any GitHub repo, press the . key, and the entire repo will open in the browser using Visual Studio Code

Visual Studio Code

209,336 views • 1 year ago

how do you get the size and position of an HTML element?

how do you get the size and position of an HTML element?

Aiden Bai

37,038 views • 1 year ago

THIS GUY ADDED A LIVE BROWSER TO CLAUDE CODE SO YOU CAN CLICK ANY ELEMENT AND EDIT IT INSTANTLY biggest issue with vibe coding UI is that you have to describe what you want to change. if you prompt it the wrong selector or wrong component, Claude can't find it. now you just click it. your app runs in an embedded browser with Claude Code. you can click any button, any text, any div. Claude instantly knows exactly what you're pointing at. click. instruct. done. no more "change the button in the top right corner of the second card component." all you have to do now is just click the button. AND its open source

THIS GUY ADDED A LIVE BROWSER TO CLAUDE CODE SO YOU CAN CLICK ANY ELEMENT AND EDIT IT INSTANTLY biggest issue with vibe coding UI is that you have to describe what you want to change. if you prompt it the wrong selector or wrong component, Claude can't find it. now you just click it. your app runs in an embedded browser with Claude Code. you can click any button, any text, any div. Claude instantly knows exactly what you're pointing at. click. instruct. done. no more "change the button in the top right corner of the second card component." all you have to do now is just click the button. AND its open source

Om Patel

152,303 views • 2 months ago

Introducing @renoun/screenshot 📸 Capture any HTML element as an image with pixel-perfect accuracy, including modern CSS features.

Introducing @renoun/screenshot 📸 Capture any HTML element as an image with pixel-perfect accuracy, including modern CSS features.

Travis Arnold

57,720 views • 5 months ago

JSX Tool (@jsxtool) is an in-browser IDE for building React UIs. Click on any element in the browser to jump straight to the relevant line of code and edit it yourself or provide precise context to an LLM to make updates.

JSX Tool (@jsxtool) is an in-browser IDE for building React UIs. Click on any element in the browser to jump straight to the relevant line of code and edit it yourself or provide precise context to an LLM to make updates.

Y Combinator

49,731 views • 7 months ago

Open CodeGPT in VSCode, then select the Qwen 2.5 model by Qwen Press Command + Shift + K Add this prompt: "Create a single HTML file with embedded CSS and JavaScript that simulates the falling letters and numbers effect from The Matrix, covering the entire screen with green characters cascading down on a black background. The animation should run smoothly using the canvas element and JavaScript. Additionally, when the user moves the mouse over the falling characters, they should react by slightly shifting to the sides." Done! Now you have the Matrix effect running in your browser. 💊 Neo thanks you.

Open CodeGPT in VSCode, then select the Qwen 2.5 model by Qwen Press Command + Shift + K Add this prompt: "Create a single HTML file with embedded CSS and JavaScript that simulates the falling letters and numbers effect from The Matrix, covering the entire screen with green characters cascading down on a black background. The animation should run smoothly using the canvas element and JavaScript. Additionally, when the user moves the mouse over the falling characters, they should react by slightly shifting to the sides." Done! Now you have the Matrix effect running in your browser. 💊 Neo thanks you.

Daniel San

12,247 views • 1 year ago

A quick Visual Studio Code tip you may not know: you can select bracket and string content with a simple double-click 🖱️

A quick Visual Studio Code tip you may not know: you can select bracket and string content with a simple double-click 🖱️

Visual Studio Code

589,780 views • 1 month ago

Consistent characters from any angle. You can now create consistent characters and objects from any angle using Multi-Image Ref in Elements. → Upload up to 10 reference images → Save them as an Element → Tag them in your prompt → Specify the angle you want → Generate

Consistent characters from any angle. You can now create consistent characters and objects from any angle using Multi-Image Ref in Elements. → Upload up to 10 reference images → Save them as an Element → Tag them in your prompt → Specify the angle you want → Generate

LTX Studio

12,111 views • 3 months ago

Cursor now has a built-in web browser. You can say "start my app" and it will run the dev server in a terminal and then navigate the browser to localhost:3000. It can take screenshots of the page for iterating on design, and you can send DOM elements to the agent with prompts!

Cursor now has a built-in web browser. You can say "start my app" and it will run the dev server in a terminal and then navigate the browser to localhost:3000. It can take screenshots of the page for iterating on design, and you can send DOM elements to the agent with prompts!

Lee Robinson

216,065 views • 7 months ago

In-browser annotations are coming to Polyscope 🔥 Select any element in your browser → Polyscope will create a new workspace → Claude, Codex or Cursor knows what to change Zero copy paste Zero complex configuration Built with the Polyscope JS SDK 🚀

In-browser annotations are coming to Polyscope 🔥 Select any element in your browser → Polyscope will create a new workspace → Claude, Codex or Cursor knows what to change Zero copy paste Zero complex configuration Built with the Polyscope JS SDK 🚀

Marcel Pociot 🧪

13,254 views • 2 months ago

🔥 CSS Tip! Have you ever wanted the benefits of a block element but the sizing of an inline element? width: max-content; comes in super handy here 👌

🔥 CSS Tip! Have you ever wanted the benefits of a block element but the sizing of an inline element? width: max-content; comes in super handy here 👌

Wes Bos

23,420 views • 1 year ago

Today we're launching the custom element. It might just be one element, but it gives you the *full* power of HTML.

Today we're launching the custom element. It might just be one element, but it gives you the full power of HTML.

Webflow

187,449 views • 2 years ago

I'm sick of the CSS centering jokes. You can now vertically center the contents of a block level element without Grid of Flexbox!

I'm sick of the CSS centering jokes. You can now vertically center the contents of a block level element without Grid of Flexbox!

Wes Bos

136,477 views • 1 year ago

📢 New in Visual Studio: Bring Your Own Model to Chat We’re expanding flexibility in Copilot for Visual Studio. You can now connect API keys from providers like OpenAI, Anthropic, and Google to run Chat on the model of your choice. This update gives you: ✅ Choice – Access the latest models beyond the built-in defaults. ✅ Customization – Select models that fit your infrastructure and requirements. ✅ Control – Manage API usage, limits, and billing directly with your provider. ✅ Flexibility – Switch seamlessly between Copilot’s built-in models and your own. This release is the first step toward a more open and customizable chat experience in Visual Studio, with more providers and capabilities to come. 🔗

📢 New in Visual Studio: Bring Your Own Model to Chat We’re expanding flexibility in Copilot for Visual Studio. You can now connect API keys from providers like OpenAI, Anthropic, and Google to run Chat on the model of your choice. This update gives you: ✅ Choice – Access the latest models beyond the built-in defaults. ✅ Customization – Select models that fit your infrastructure and requirements. ✅ Control – Manage API usage, limits, and billing directly with your provider. ✅ Flexibility – Switch seamlessly between Copilot’s built-in models and your own. This release is the first step toward a more open and customizable chat experience in Visual Studio, with more providers and capabilities to come. 🔗

Visual Studio

11,873 views • 9 months ago