Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

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

code's profile picture

Visual Studio Code

801,177 subscribers

75,499 görüntüleme • 1 yıl önce •via X (Twitter)

Bilim & TeknolojiEğitim
LIVE

Anya Rossi• Live Now

Private livecam show

10 Yorum

🅰 profil fotoğrafı
🅰1 yıl önce

Really cool!

Francois Laberge ✍️ profil fotoğrafı
Francois Laberge ✍️1 yıl önce

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 🇺🇦 profil fotoğrafı
terry 🇺🇦1 yıl önce

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 profil fotoğrafı
Dom1 yıl önce

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

Evi profil fotoğrafı
Evi1 yıl önce

I used all my credits, bye..👋

GuZi profil fotoğrafı
GuZi1 yıl önce

Nice!

Oren Melamed profil fotoğrafı
Oren Melamed1 yıl önce

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

Ga Satrya profil fotoğrafı
Ga Satrya1 yıl önce

Woah, that's really cool!

Shawn profil fotoğrafı
Shawn1 yıl önce

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

Pete Thorne profil fotoğrafı
Pete Thorne1 yıl önce

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

Benzer Videolar

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!
0:59

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 görüntüleme • 7 ay önce

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.
0:42

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 görüntüleme • 1 ay önce

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
0:23

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 görüntüleme • 1 ay önce

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! 😊
0:22

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 görüntüleme • 6 ay önce

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

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

Cursor

6,074,484 görüntüleme • 5 ay önce

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
0:21

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 görüntüleme • 1 yıl önce

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

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

Aiden Bai

37,038 görüntüleme • 1 yıl önce

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
0:40

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 görüntüleme • 2 ay önce

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.
3:51

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 görüntüleme • 6 ay önce

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

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

Travis Arnold

57,720 görüntüleme • 5 ay önce

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.
0:20

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 görüntüleme • 1 yıl önce

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

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 görüntüleme • 1 ay önce

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
0:37

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 görüntüleme • 3 ay önce

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!
0:24

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 görüntüleme • 7 ay önce

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 🚀
5:08

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 görüntüleme • 2 ay önce

🔥 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 👌
1:00

🔥 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 görüntüleme • 1 yıl önce

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

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 görüntüleme • 2 yıl önce

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

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 görüntüleme • 1 yıl önce

📢 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. 🔗
0:26

📢 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 görüntüleme • 9 ay önce

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
0:29

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 görüntüleme • 4 ay önce