正在加载视频...

视频加载失败

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

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

806,177 subscribers

75,563 次观看 • 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,505 次观看 • 10 个月前

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

宝玉

251,226 次观看 • 3 个月前

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

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

𝘼𝙈𝘼𝙂𝙄

52,470 次观看 • 4 个月前

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

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

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,435 次观看 • 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

153,788 次观看 • 5 个月前

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

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.io

12,167 次观看 • 6 个月前

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

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

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

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

We just built Figma for Claude Code > Select any element on your local front-end > Edit it like you would in Figma > Apply the changes with Claude Code This is not a demo or waitlist. Try it today.

We just built Figma for Claude Code > Select any element on your local front-end > Edit it like you would in Figma > Apply the changes with Claude Code This is not a demo or waitlist. Try it today.

Quentin Romero Lauro

252,348 次观看 • 7 个月前

CSS Tip! ✨ It's 2024 and you have a new way to make animated borders 🚀 .glow::after { offset-path: rect(0 100% 100% 0 round var(--radius)); animation: loop; } @keyframes loop { to { offset-distance: 100%; }} Using the offset-* properties you can animate elements along the perimeter of others 😍 The rect() value gained support in Safari 17.2 🙌 To start, you create an element and put it inside your main element. For example, you put a span inside the button 🤙 Click me! Make the element fill its parent with absolute positioning and inset [data-glow] { position: absolute; inset: 0; } Now the good part, you use a pseudoelement on that element and define an offset-path [data-glow]::after { content: ""; offset-path: rect(0 auto auto 0 round var(--radius)); animation: loop 2.6s infinite linear; } With the rect value, you are saying the path fills the parent container: top: 0 right: auto || 100% bottom: auto || 100% left: 0 Then you can use round to make sure the path uses the same radius as whatever the parent has The @keyframes animation merely animates the offset-distance of that pseudoelement to 100% @keyframes loop { to { offset-distance: 100%; }} You can see this more clearly in the video 🫶 The offset-* properties also include an offset-anchor property. This allows you to dictate which point of the element follows the path. For example: anchor-offset: 100% 50%; This means that the "right, center" of the element will follow the perimeter of the parent element 🤙 Lastly, the visuals 🎨 For color, you can use a gradient such as a linear gradient to fill the pseudo-element. [data-glow]::after { background: radial-gradient( circle at right, hsl(320 90% 100%), transparent 50% ); } Then clip away everything so you only have the border and can still have translucent backgrounds, etc. Use a mask with mask-composite ✨ A little transparent border trick: [data-glow] { border: 2px solid transparent; mask: linear-gradient(transparent, transparent), linear-gradient(white, white); mask-clip: padding-box, border-box; mask-composite: intersect; } Bit of a long one. Hope you find it useful 🙏 CodePen.IO link below 👇

CSS Tip! ✨ It's 2024 and you have a new way to make animated borders 🚀 .glow::after { offset-path: rect(0 100% 100% 0 round var(--radius)); animation: loop; } @keyframes loop { to { offset-distance: 100%; }} Using the offset-* properties you can animate elements along the perimeter of others 😍 The rect() value gained support in Safari 17.2 🙌 To start, you create an element and put it inside your main element. For example, you put a span inside the button 🤙 Click me! Make the element fill its parent with absolute positioning and inset [data-glow] { position: absolute; inset: 0; } Now the good part, you use a pseudoelement on that element and define an offset-path [data-glow]::after { content: ""; offset-path: rect(0 auto auto 0 round var(--radius)); animation: loop 2.6s infinite linear; } With the rect value, you are saying the path fills the parent container: top: 0 right: auto || 100% bottom: auto || 100% left: 0 Then you can use round to make sure the path uses the same radius as whatever the parent has The @keyframes animation merely animates the offset-distance of that pseudoelement to 100% @keyframes loop { to { offset-distance: 100%; }} You can see this more clearly in the video 🫶 The offset-* properties also include an offset-anchor property. This allows you to dictate which point of the element follows the path. For example: anchor-offset: 100% 50%; This means that the "right, center" of the element will follow the perimeter of the parent element 🤙 Lastly, the visuals 🎨 For color, you can use a gradient such as a linear gradient to fill the pseudo-element. [data-glow]::after { background: radial-gradient( circle at right, hsl(320 90% 100%), transparent 50% ); } Then clip away everything so you only have the border and can still have translucent backgrounds, etc. Use a mask with mask-composite ✨ A little transparent border trick: [data-glow] { border: 2px solid transparent; mask: linear-gradient(transparent, transparent), linear-gradient(white, white); mask-clip: padding-box, border-box; mask-composite: intersect; } Bit of a long one. Hope you find it useful 🙏 CodePen.IO link below 👇

jhey ʕ•ᴥ•ʔ

283,498 次观看 • 2 年前

I hated spending minutes trying to explain which element I meant in a long prompt, so I shipped something to fix it. Inspector’s new precision UI select tool connects the element on your screen to its exact source code, saving you time on prompting.

I hated spending minutes trying to explain which element I meant in a long prompt, so I shipped something to fix it. Inspector’s new precision UI select tool connects the element on your screen to its exact source code, saving you time on prompting.

mikeBuildsMore

12,343 次观看 • 10 个月前

🚨JUST IN: Andrew Tate reveals why you don’t have the money you want and the key element that will get it for you:

🚨JUST IN: Andrew Tate reveals why you don’t have the money you want and the key element that will get it for you:

Prime Tate

12,218 次观看 • 5 个月前

The & in a CSS nested selector doesn't need to come at the start! Needed to style an element based on parent AND child selectors and this was the ticket. Good idea or nah?

The & in a CSS nested selector doesn't need to come at the start! Needed to style an element based on parent AND child selectors and this was the ticket. Good idea or nah?

Wes Bos

15,812 次观看 • 11 个月前