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.

Problem: How do I quickly tell AI exactly which elements I want to change? Solution: Agentation This npm package displays a toolbar in your app so you can click on elements, add comments, and then send those comments to your LLM (like Claude Code).

Cory House

159,773 subscribers

19,158 views • 3 months ago •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

Introducing annotations in v0. Click elements in your preview, add comments, then send them all to the agent as a single prompt.

Introducing annotations in v0. Click elements in your preview, add comments, then send them all to the agent as a single prompt.

v0

17,021 views • 1 month ago

great idea by Benji Taylor. i just added this into the design-plugin. claude will ask you what you want to design/refine and generate 5 variations. then you can leave comments directly on the elements for claude. 🔗

great idea by Benji Taylor. i just added this into the design-plugin. claude will ask you what you want to design/refine and generate 5 variations. then you can leave comments directly on the elements for claude. 🔗

0xDesigner

50,646 views • 6 months ago

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 the HTML and CSS of that element.

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 the HTML and CSS of that element.

Visual Studio Code

75,563 views • 1 year ago

This Homowo, I want to celebrate with my people. So tell me… Which Ga community should I visit? How do you think we should celebrate together? Drop your community and your ideas in the comments. I’ll be reading them all. Let’s make this a celebration to remember. #Homowo2026 #GaTradition #CelebrateTogether

This Homowo, I want to celebrate with my people. So tell me… Which Ga community should I visit? How do you think we should celebrate together? Drop your community and your ideas in the comments. I’ll be reading them all. Let’s make this a celebration to remember. #Homowo2026 #GaTradition #CelebrateTogether

Richard Nii-Armah Quaye

38,898 views • 7 days ago

Claude Skills is the most powerful way to automate your life with AI. Any computer task you do regularly can be built into a workflow that runs exactly how you want it. This video will teach you how to master Claude Skills. (and change how you use Claude forever):

Claude Skills is the most powerful way to automate your life with AI. Any computer task you do regularly can be built into a workflow that runs exactly how you want it. This video will teach you how to master Claude Skills. (and change how you use Claude forever):

Miles Deutscher

68,004 views • 4 months ago

How to install the ChainGPT AI skill for Claude Code so you can ship Web3 projects with ZERO coding experience. Setup takes about 3 minutes: 1. Install Claude Code at 2. Run /plugin install ChainGPT-org/chaingpt-claude-skill ( 3. Get a ChainGPT API key at: 4. Add credits at: 5. Type /chaingpt and describe what you want to build What I built: I asked for a cat-themed AI NFT generator. The skill knew which API endpoint to hit, how to handle the response, and how to display the image. If I can do this in under an hour with no coding background, so can you. Anyone can build with ChainGPT AI! Get your API key → Top up credits →

How to install the ChainGPT AI skill for Claude Code so you can ship Web3 projects with ZERO coding experience. Setup takes about 3 minutes: 1. Install Claude Code at 2. Run /plugin install ChainGPT-org/chaingpt-claude-skill ( 3. Get a ChainGPT API key at: 4. Add credits at: 5. Type /chaingpt and describe what you want to build What I built: I asked for a cat-themed AI NFT generator. The skill knew which API endpoint to hit, how to handle the response, and how to display the image. If I can do this in under an hour with no coding background, so can you. Anyone can build with ChainGPT AI! Get your API key → Top up credits →

ChainGPT

26,815 views • 3 months 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,845 views • 4 months ago

I have a major announcement! 🎉 Today, I'm launching NPM Studio for WebStorm and all JetBrains IDEs. This will change the way you work with NPM packages forever. I built NPM Studio for developers who want to get work done without wasting time in the terminal. It brings package management and npm scripts directly into your IDE so you can focus on building great products. This is our version 1.0.14, and it would make me the happiest person if you tried it out by searching for "NPM Studio" in your JetBrains IDE or by clicking this link: I really appreciate your support and look forward to hearing your feedback!

I have a major announcement! 🎉 Today, I'm launching NPM Studio for WebStorm and all JetBrains IDEs. This will change the way you work with NPM packages forever. I built NPM Studio for developers who want to get work done without wasting time in the terminal. It brings package management and npm scripts directly into your IDE so you can focus on building great products. This is our version 1.0.14, and it would make me the happiest person if you tried it out by searching for "NPM Studio" in your JetBrains IDE or by clicking this link: I really appreciate your support and look forward to hearing your feedback!

Ebenezer Don 🐘

16,240 views • 1 year ago

Giving Claude Code access to your codebase doesn't mean giving it access to everything. Deny rules let you draw hard lines. "But now I also want to add a deny rule and I just want to see what happens. So if I want to deny, maybe edit package.json. And now I'm going to still ask Claude to edit it for me." "So I'm just going to actually change this model to haiku because again, this is just a very simple task. So I'm going to like update the version in package.json to one. Now hopefully my permissions were set up correctly and it will be like, can't do that." "Yeah, so it says like, oh, I can't do that. So even if this was a tool call coming from the model, it won't run it. So this is like a great way to add more control over what Claude can and cannot do in your environment."

Giving Claude Code access to your codebase doesn't mean giving it access to everything. Deny rules let you draw hard lines. "But now I also want to add a deny rule and I just want to see what happens. So if I want to deny, maybe edit package.json. And now I'm going to still ask Claude to edit it for me." "So I'm just going to actually change this model to haiku because again, this is just a very simple task. So I'm going to like update the version in package.json to one. Now hopefully my permissions were set up correctly and it will be like, can't do that." "Yeah, so it says like, oh, I can't do that. So even if this was a tool call coming from the model, it won't run it. So this is like a great way to add more control over what Claude can and cannot do in your environment."

Master.dev (Formerly Frontend Masters)

11,351 views • 1 month ago

Claude Code Templates just hit 100+ Skills on Installing is easy - one click to copy the install command, paste it in your project's .claude folder, done. - 67K npm installs - 13K+ GitHub stars - fully open source Thanks to the community for contributing Skills and components. In the video I show how to add a Data Privacy Compliance Skill to your project.

Claude Code Templates just hit 100+ Skills on Installing is easy - one click to copy the install command, paste it in your project's .claude folder, done. - 67K npm installs - 13K+ GitHub stars - fully open source Thanks to the community for contributing Skills and components. In the video I show how to add a Data Privacy Compliance Skill to your project.

Daniel San

164,637 views • 7 months ago

The Apple App Store is DEAD. You can add Claude Code / Codex to your iMessage Then build a Swift app directly to your home screen Wait no... not one iOS app. an entire personal app store. (8 apps in one prompt) All you have to do is @text_chorus

The Apple App Store is DEAD. You can add Claude Code / Codex to your iMessage Then build a Swift app directly to your home screen Wait no... not one iOS app. an entire personal app store. (8 apps in one prompt) All you have to do is @text_chorus

Riley Brown

220,786 views • 2 months ago

Did you know that Claude Code can use the browser to QA its own work? 1. Run `claude mcp add playwright -- npx -y @playwright/mcp@latest` 2. Tell Claude where your app is running, e.g localhost:8000 3. Now Claude can click and type to make sure its code is actually working!

Did you know that Claude Code can use the browser to QA its own work? 1. Run `claude mcp add playwright -- npx -y @playwright/mcp@latest` 2. Tell Claude where your app is running, e.g localhost:8000 3. Now Claude can click and type to make sure its code is actually working!

Sergey Karayev

107,272 views • 1 year ago

You can just tell Claude Code to learn skills and it will. I asked Claude to create an app that uses tldraw and it one shotted it with sqlite db, and then I asked Claude Code to create a skill so that it could read and write on the canvas. 10 minutes later it could do it. Weirrrrdddd times.

You can just tell Claude Code to learn skills and it will. I asked Claude to create an app that uses tldraw and it one shotted it with sqlite db, and then I asked Claude Code to create a skill so that it could read and write on the canvas. 10 minutes later it could do it. Weirrrrdddd times.

Riley Brown

73,418 views • 7 months ago

How I have Claude automate anything I do on my computer just by showing it: I use the free Clips app and hit record to start recording. Then I just do the action - like navigating to Rippling and approving any unapproved time off - and I’ll often just talk out loud as I do it explaining any add’l details like I would when showing a human. The Clips app captures everything on your screen and everything you say, and transforms it into a format Claude can “see and hear”. You'll then get a link that you can easily share with Claude (or humans too). I’ll paste it to Claude and say something like, "automate this for me every day at 8:00 AM." The link has special metadata that agents like Claude can discover. It exposes APIs to see the full transcript with timestamps and grab screenshots of what was on your screen at any of those timestamps. Once it's created the routine, you can go to the Routines tab in Claude Code desktop app. This also works with the CLI, Claude Cowork, Codex etc. You’ll see your new routine there, and you can just hit Run Now to have it start running it. Video attached shows this step by step. The Clips apps is free and open source - I’ll link to it and the source code in the thread.

How I have Claude automate anything I do on my computer just by showing it: I use the free Clips app and hit record to start recording. Then I just do the action - like navigating to Rippling and approving any unapproved time off - and I’ll often just talk out loud as I do it explaining any add’l details like I would when showing a human. The Clips app captures everything on your screen and everything you say, and transforms it into a format Claude can “see and hear”. You'll then get a link that you can easily share with Claude (or humans too). I’ll paste it to Claude and say something like, "automate this for me every day at 8:00 AM." The link has special metadata that agents like Claude can discover. It exposes APIs to see the full transcript with timestamps and grab screenshots of what was on your screen at any of those timestamps. Once it's created the routine, you can go to the Routines tab in Claude Code desktop app. This also works with the CLI, Claude Cowork, Codex etc. You’ll see your new routine there, and you can just hit Run Now to have it start running it. Video attached shows this step by step. The Clips apps is free and open source - I’ll link to it and the source code in the thread.

Steve (Builder.io)

25,473 views • 1 month 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 • 3 months ago

Been using Paper MCP with Claude Code today and I’m kind of blown away! I tested importing Figma designs, then iterating on them using live Supabase data (via MCP). It genuinely feels like a glimpse of where design is heading. would love Paper to add something like agentation from Benji Taylor, so Claude Code can target frames and layers directly.

Been using Paper MCP with Claude Code today and I’m kind of blown away! I tested importing Figma designs, then iterating on them using live Supabase data (via MCP). It genuinely feels like a glimpse of where design is heading. would love Paper to add something like agentation from Benji Taylor, so Claude Code can target frames and layers directly.

Gon

72,837 views • 5 months ago

Which Metaphor: ReFantazio character are you? ⚔️ Share your match in the comments and send this to a friend!

Which Metaphor: ReFantazio character are you? ⚔️ Share your match in the comments and send this to a friend!

Official ATLUS West

63,766 views • 1 year ago

In Cursor you can *easily* turn comments into code. Just write in natural language what you want in your file. Then highlight it, use CMD+K, and ask the AI to translate it into code - and it will! Turn your thoughts right into apps.

In Cursor you can easily turn comments into code. Just write in natural language what you want in your file. Then highlight it, use CMD+K, and ask the AI to translate it into code - and it will! Turn your thoughts right into apps.

Mckay Wrigley

106,485 views • 1 year ago

In this week’s Stability Seconds, we’re showing you how to use prompt weighting, a technique that helps you control which parts of your prompt have more or less influence on the final image. It’s a fast way to steer your image toward your desired output without rewriting your prompt. Here’s how to do it: 1️⃣ Emphasize elements: Put parentheses around the part of your prompt you want to focus on, then add a colon and a number. For example, (trench coat:1.5) tells the model to emphasize the trench coat. The higher the number, the more it stands out. 2️⃣ De-emphasize elements: Put parentheses around the part of your prompt you want to make less prominent, then add a colon and a number below one. For example, (background:0.5). The lower the number, the less it stands out. You can try prompt weighting with Stable Image Ultra here 👉

In this week’s Stability Seconds, we’re showing you how to use prompt weighting, a technique that helps you control which parts of your prompt have more or less influence on the final image. It’s a fast way to steer your image toward your desired output without rewriting your prompt. Here’s how to do it: 1️⃣ Emphasize elements: Put parentheses around the part of your prompt you want to focus on, then add a colon and a number. For example, (trench coat:1.5) tells the model to emphasize the trench coat. The higher the number, the more it stands out. 2️⃣ De-emphasize elements: Put parentheses around the part of your prompt you want to make less prominent, then add a colon and a number below one. For example, (background:0.5). The lower the number, the less it stands out. You can try prompt weighting with Stable Image Ultra here 👉

Stability AI

13,818 views • 1 year ago

I rebuilt my viral TikTok AI agent with Claude Code in 37 minutes 🤯 A full research-to-brief pipeline that scrapes TikTok, analyzes videos with AI, and generates creative briefs for your clients. All inside Claude Code + Replit. Perfect for creative agencies and DTC brands who want to turn competitor research into briefs without the manual grind. Look, all e-commerce brands & agencies should have at least one person on their team who is their "AI expert" & can vibe-code apps & workflows like this. Here's what the Claude Code version of my TikTok Agent does: → Search TikTok by keyword, date range, and video count → Pull engagement metrics, captions, and thumbnails → Gemini actually watches the video and analyzes the hook → AI scrapes comments for common questions and insights → Generate a full creative brief based on your template + brand bible No watching videos manually. No copying notes into docs. No rewriting briefs from scratch. What you control: - Multiple client projects with separate brand bibles - Your own creative brief template - Which videos to analyze and brief - Full customization through Replit's AI agent Research → Analysis → Brief. One workflow, running a custom, mini-SaaS inside your company I recorded a full walkthrough showing exactly how I built this from scratch. Want the full tutorial? > Like this post > Comment "CLAUDE" And I'll send it over (must be following so I can DM)

Mike Futia

74,602 views • 6 months ago