正在加载视频...

视频加载失败

加载此视频时出现问题。这可能是由于临时网络问题，或视频可能不可用。

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 次观看 • 1 年前 •via X (Twitter)

科学技术教育

Anya Rossi• Live Now

Private livecam show

10 条评论

🅰 的头像

🅰1 年前

Really cool!

Francois Laberge ✍️ 的头像

Francois Laberge ✍️1 年前

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 🇺🇦 的头像

terry 🇺🇦1 年前

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?

Dom 的头像

Dom1 年前

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

Evi 的头像

Evi1 年前

I used all my credits, bye..👋

GuZi 的头像

GuZi1 年前

Nice!

Oren Melamed 的头像

Oren Melamed1 年前

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

Ga Satrya 的头像

Ga Satrya1 年前

Woah, that's really cool!

Shawn 的头像

Shawn1 年前

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

Pete Thorne 的头像

Pete Thorne1 年前

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

相关视频

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 次观看 • 7 个月前

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,116 次观看 • 1 个月前

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 次观看 • 1 个月前

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

87,981 次观看 • 6 个月前

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,074,484 次观看 • 5 个月前

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 次观看 • 1 年前

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 次观看 • 1 年前

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,079 次观看 • 2 个月前

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 次观看 • 6 个月前

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 次观看 • 5 个月前

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 次观看 • 1 年前

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,503 次观看 • 1 个月前

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 次观看 • 3 个月前

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,060 次观看 • 7 个月前

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,247 次观看 • 2 个月前

🔥 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 次观看 • 1 年前

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,437 次观看 • 2 年前

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,447 次观看 • 1 年前

📢 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 次观看 • 9 个月前

The new GitHub Copilot Visual Studio Code Ask Questions tool is really cool - and has lot's of potential! As a start - real improvement for saving premium requests as the agent can halt mid-turn to ask the user questions - great for the built-in plan mode Try now in Insiders

The new GitHub Copilot Visual Studio Code Ask Questions tool is really cool - and has lot's of potential! As a start - real improvement for saving premium requests as the agent can halt mid-turn to ask the user questions - great for the built-in plan mode Try now in Insiders

Oren Melamed

15,277 次观看 • 4 个月前