正在加载视频...

视频加载失败

返回首页

Canvas UI now runs on WebGPU. All 35 components ship in two builds: WebGL (GLSL) and WebGPU via Vercel's vgpu library (WGSL). Same props, same look, pick your renderer. React, Vue, Svelte, Solid, Preact, vanilla.

davidhaz's profile picture

David Haz

11,364 subscribers

19,567 次观看 • 17 天前 •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

26 条评论

ozzy 的头像
ozzy17 天前

@vercel Super super cool!!!

David Haz 的头像
David Haz17 天前

@vercel 🙏

Swami 的头像
Swami17 天前

@vercel Woah, super cool!

David Haz 的头像
David Haz17 天前

@vercel

Amin Khorrami 的头像
Amin Khorrami16 天前

@vercel Super cool!!

saint 的头像
saint17 天前

@vercel yooo 🔥🔥🔥🔥

Iván Olivares Rojas 的头像
Iván Olivares Rojas16 天前

@vercel You should be published by @webgl_webgpu, this is amazing and everyone in that community should see it !! Congrats man! 🙌

jian yang 的头像
jian yang17 天前

@vercel No way Give me the power to ship like you 0 Naruto “shippuden”🌚

Mridul 的头像
Mridul16 天前

@vercel lets goo

Ramon 🎹 的头像
Ramon 🎹17 天前

@vercel fire! im curious, is there a performance difference between WebGL vs WebGPU, or is it mostly about how its built?

David Haz 的头像
David Haz17 天前

@vercel Both perform the same, I clocked both builds at 120fps on the same effects. Mostly about how it's built. WebGPU mainly opens the door to compute shaders down the line.

Ramon 🎹 的头像
Ramon 🎹17 天前

@vercel cool thx!

Alex 的头像
Alex16 天前

@vercel wats canvas ui?

David Haz 的头像
David Haz16 天前

@vercel A cool little project I released recently

Alex 的头像
Alex16 天前

@vercel this looks fire where's the best place to start?

Alex 的头像
Alex16 天前

@vercel ah NVM I'm in some really cool effects here. Still down for advice on best place to start :)

Aniket Pawar 的头像
Aniket Pawar17 天前

@vercel dual engine, let's goo

David Haz 的头像
David Haz17 天前

@vercel Vroom vroom 🏎️

Vignesh V 的头像
Vignesh V17 天前

@vercel same props on webgl and webgpu is the flex. compute shaders are why id actually switch

Salise 的头像
Salise17 天前

@vercel nice to see all 35 components available with both WebGL and WebGPU. great flexibility for devs!

Rami 的头像
Rami17 天前

@vercel "rewrite the UI to use /goal the entire UI, landing page, docs, blog, and dashboard all use this new canvasui /deploy " just sent this to cursor

Preom M. R. 的头像
Preom M. R.16 天前

@vercel btw david, what're you using to make the videos? something like remotion?

David Haz 的头像
David Haz16 天前

@vercel No, I record and edit by hand

Dinil 的头像
Dinil17 天前

@vercel Great 🔥, Is there any performance difference?

David Haz 的头像
David Haz17 天前

@vercel If you build them right, there shouldn’t be, but it opens many doors :)

Dinil 的头像
Dinil17 天前

@vercel 🙌

相关视频

Introducing Canvas UI, the first ever html-in-canvas component library. Your DOM is the render target now. Real-time shaders over real, interactive UI. 24 components. React, Vue, Svelte, vanilla TS. Free. Open source. 🧵
0:48

Introducing Canvas UI, the first ever html-in-canvas component library. Your DOM is the render target now. Real-time shaders over real, interactive UI. 24 components. React, Vue, Svelte, vanilla TS. Free. Open source. 🧵

David Haz

1,421,703 次观看 • 1 个月前

🚀 I'm launching r3f-webgpu-perf today! "npm i r3f-webgpu-perf" One thing I missed while working with WebGPU in React Three Fiber was a performance monitor similar to r3f-perf. The existing tool is fantastic, but it doesn’t support the WebGPU renderer yet. So I decided to build one. ✅ Supports both WebGL and WebGPU ✅ Modern and customizable UI ✅ Lightweight and easy to integrate ✅ Built specifically for React Three Fiber My goal is to turn r3f-webgpu-perf into more than just a metrics dashboard. I want it to become a learning tool that provides real-time optimization suggestions based on the techniques I’ve developed while building hundreds of interactive 3D projects over the last two decades. A vanilla Three.js version is also planned. If you’re building with Three.js, React Three Fiber, or WebGPU, I’d love for you to try it and share your feedback. ⭐ GitHub: 📦 NPM: Every GitHub star helps make the tool better for the entire community. #threejs #creativecoding #webgpu #r3f
0:43

🚀 I'm launching r3f-webgpu-perf today! "npm i r3f-webgpu-perf" One thing I missed while working with WebGPU in React Three Fiber was a performance monitor similar to r3f-perf. The existing tool is fantastic, but it doesn’t support the WebGPU renderer yet. So I decided to build one. ✅ Supports both WebGL and WebGPU ✅ Modern and customizable UI ✅ Lightweight and easy to integrate ✅ Built specifically for React Three Fiber My goal is to turn r3f-webgpu-perf into more than just a metrics dashboard. I want it to become a learning tool that provides real-time optimization suggestions based on the techniques I’ve developed while building hundreds of interactive 3D projects over the last two decades. A vanilla Three.js version is also planned. If you’re building with Three.js, React Three Fiber, or WebGPU, I’d love for you to try it and share your feedback. ⭐ GitHub: 📦 NPM: Every GitHub star helps make the tool better for the entire community. #threejs #creativecoding #webgpu #r3f

Anderson Mancini

24,267 次观看 • 3 个月前

THIS GUY IS CLOSING $8K WEB DEALS BY PASTING THREE UI LIBRARIES INTO CLAUDE CODE same claude everyone runs, but his has 250+ animated components sitting in context before the first prompt even fires, so his hero sections ship with webgl and scroll effects while yours ships flat the three libraries: animasterlib for the 250+ animated components, scroll rigs, hero blocks, mouse interactions and webgl scenes skyperui for the ready hero sections, cards and pricing blocks that already look shipped vengenceui for the modern animation blocks and premium design sections paste them in once, from that point every landing this guy builds walks out with real motion and glass hero sections, and he charges 10x what the local guy charges for the exact same page count everyone else is still asking claude to make it look premium and getting a rounded rectangle back save the three libraries, install order is in the guide below
0:24

THIS GUY IS CLOSING $8K WEB DEALS BY PASTING THREE UI LIBRARIES INTO CLAUDE CODE same claude everyone runs, but his has 250+ animated components sitting in context before the first prompt even fires, so his hero sections ship with webgl and scroll effects while yours ships flat the three libraries: animasterlib for the 250+ animated components, scroll rigs, hero blocks, mouse interactions and webgl scenes skyperui for the ready hero sections, cards and pricing blocks that already look shipped vengenceui for the modern animation blocks and premium design sections paste them in once, from that point every landing this guy builds walks out with real motion and glass hero sections, and he charges 10x what the local guy charges for the exact same page count everyone else is still asking claude to make it look premium and getting a rounded rectangle back save the three libraries, install order is in the guide below

Bounce

11,373 次观看 • 2 个月前

Following ☄︎ work, I'm experimenting with some react three fiber with #threejs webGPU. We no longer need an EffectComposer to use post-processing effects in #r3f. Now, everything is done by composing TSL nodes. I created a small component that helps in rendering post-processing effects. All you need to do is import the effects you want and add them to the final composition. I will share the link to the demo and source code on Monday 😍. Another thing I want to highlight is how amazing the Screen Space Reflection effect is. It generates reflections not only on the ground, as we had before in r3f in webgl. It is able to calculate the reflections between the meshes. Look how beautiful the reflection of the lightsaber on Darth Vader's mask is. This is not something that is easy to calculate and this is exactly where WebGPU in threejs shines! Congratulations to everyone on the threejs team. I am increasingly impressed with WebGPU and TSL.
1:41

Following ☄︎ work, I'm experimenting with some react three fiber with #threejs webGPU. We no longer need an EffectComposer to use post-processing effects in #r3f. Now, everything is done by composing TSL nodes. I created a small component that helps in rendering post-processing effects. All you need to do is import the effects you want and add them to the final composition. I will share the link to the demo and source code on Monday 😍. Another thing I want to highlight is how amazing the Screen Space Reflection effect is. It generates reflections not only on the ground, as we had before in r3f in webgl. It is able to calculate the reflections between the meshes. Look how beautiful the reflection of the lightsaber on Darth Vader's mask is. This is not something that is easy to calculate and this is exactly where WebGPU in threejs shines! Congratulations to everyone on the threejs team. I am increasingly impressed with WebGPU and TSL.

Anderson Mancini

26,829 次观看 • 1 年前

Meet Miora ✨your AI creative agent studio, now in international beta. 💡 Here's the idea: Images, video, UI/UX, 3D - all generated right there, on the same canvas 🪄No tool-switching. No context loss. The whole creative project lives in one place. The agents aren't basic: * they understand design context, reason through problems, call tools on their own * inpaint, edit locally, split backgrounds * skills system: use ours, build yours, share with the community * they read what's on your canvas and remember what you like * a crew of built-in Specialists, each owning their craft: brand, storyboards, illustration, UI/UX, video, 3D 👉
1:50

Meet Miora ✨your AI creative agent studio, now in international beta. 💡 Here's the idea: Images, video, UI/UX, 3D - all generated right there, on the same canvas 🪄No tool-switching. No context loss. The whole creative project lives in one place. The agents aren't basic: * they understand design context, reason through problems, call tools on their own * inpaint, edit locally, split backgrounds * skills system: use ours, build yours, share with the community * they read what's on your canvas and remember what you like * a crew of built-in Specialists, each owning their craft: brand, storyboards, illustration, UI/UX, video, 3D 👉

Tencent AI

104,380 次观看 • 3 个月前

Edit has a fresh UI! ✨You now have Replace, Extend, and Crop all in one place for easier control. Plus, we’ve added Fade Out for a polished track finish. NEW: ✅ Fade Out—a new way to create seamless track endings ✅ A fresh UI—your edit tools, all in one streamlined space ✅ Same powerful tools, now easier to use How to access: 🎵 Go to Library → Click “Edit” on a song 🎛️ Or tap the three dots → Edit → Select a tool ♥️ Team Suno
1:41

Edit has a fresh UI! ✨You now have Replace, Extend, and Crop all in one place for easier control. Plus, we’ve added Fade Out for a polished track finish. NEW: ✅ Fade Out—a new way to create seamless track endings ✅ A fresh UI—your edit tools, all in one streamlined space ✅ Same powerful tools, now easier to use How to access: 🎵 Go to Library → Click “Edit” on a song 🎛️ Or tap the three dots → Edit → Select a tool ♥️ Team Suno

Suno

44,262 次观看 • 1 年前

Forget trying to design everything in Figma. You can build your own design tools with AI. Introducing Toolcraft - a starter kit and UI library for building beautiful creative apps. It's free and available for you today. npx @​pixel-point/toolcraft create Use it to build apps to stylize images, create WebGL shaders, Three.js scenes, animations, photo editing tools, or whatever else needs a canvas and controls. Toolcraft gives you the full architecture in a single solution. It comes with: - plenty of UI components: sliders, pickers, timelines, curves, and more - built-in canvas, export, and toolbar setup - AI instructions to help the agent deliver a great result to you With Toolcraft, you don’t need an extensive prompt. Just explain what type of visuals you want to build, attach references, and wait. It’s been a game changer for our design process. Watch the full video on our YouTube channel with all the details and examples.
0:37

Forget trying to design everything in Figma. You can build your own design tools with AI. Introducing Toolcraft - a starter kit and UI library for building beautiful creative apps. It's free and available for you today. npx @​pixel-point/toolcraft create Use it to build apps to stylize images, create WebGL shaders, Three.js scenes, animations, photo editing tools, or whatever else needs a canvas and controls. Toolcraft gives you the full architecture in a single solution. It comes with: - plenty of UI components: sliders, pickers, timelines, curves, and more - built-in canvas, export, and toolbar setup - AI instructions to help the agent deliver a great result to you With Toolcraft, you don’t need an extensive prompt. Just explain what type of visuals you want to build, attach references, and wait. It’s been a game changer for our design process. Watch the full video on our YouTube channel with all the details and examples.

Alex Barashkov

280,213 次观看 • 2 个月前

Announcing the Style Guide in primeui. Customize your project theme with a shadcn-compatible token system. Preview it live with as many variants as you need on the canvas. Export clean, production-ready Next.js code in minutes. Prime UI gives you a strong foundation for your website, whether you build it yourself or with AI. It includes 200+ UI components, all crafted by humans with pixel-perfect quality, a solid design system, and clean code. Plan your site with the Sitemap tool. Explore content, layout ideas, and storytelling in Prototype. Shape the look and feel in Style Guide, then export everything to Next.js. You get more than just landing pages. You get a consistent foundation for your entire site, including Blog, Docs, Pricing, and more, without having to worry about architecture, content blocks, SEO, or performance. Available today.
0:25

Announcing the Style Guide in primeui. Customize your project theme with a shadcn-compatible token system. Preview it live with as many variants as you need on the canvas. Export clean, production-ready Next.js code in minutes. Prime UI gives you a strong foundation for your website, whether you build it yourself or with AI. It includes 200+ UI components, all crafted by humans with pixel-perfect quality, a solid design system, and clean code. Plan your site with the Sitemap tool. Explore content, layout ideas, and storytelling in Prototype. Shape the look and feel in Style Guide, then export everything to Next.js. You get more than just landing pages. You get a consistent foundation for your entire site, including Blog, Docs, Pricing, and more, without having to worry about architecture, content blocks, SEO, or performance. Available today.

Alex Barashkov

32,330 次观看 • 6 个月前

CSS variables are live and they are POWERFUL. Now Live on Product Hunt 🚀 ➡️ Create a design system "So you can stay consistent and build much quicker." Define global styles like colors, gradients, sizes, and box shadows. ➡️ Use your variables everywhere "So you never have to manually enter a border color again." You're not limited to just sizes, colors, and font families. Use variables in gradients, box shadows, transforms, and more! ➡️ Start with libraries like Open Props, expertly crafted CSS variables "So you can use a tried and true system, and so we can standardize our Projects." Because there are no abstractions, you can use existing CSS variable libraries like Open Props, an expertly crafted library of CSS variables, and the recommended starting point in Webstudio. ➡️ Create complex micro-interactions "So when you hover a link, you can change any children's styles." CSS variables go beyond reusability! You can define variables anywhere in the navigator, such as on a link, and modify the variables on hover. Then, you can use those variables on the children to create complex micro-interactions! ➡️ Design and build simultaneously "So when deciding that perfect border color, you can arrow through all your options." Experimenting on the canvas just got a whole lot better. Now, you can arrow through your variables and see them rendered on the canvas to see which works best. ➡️ Change variable by breakpoint "So you can make the variables look great, no matter the screen size." CSS variables in Webstudio use the same UI as the rest of your styles, enabling breakpoints to work the same way. ✨ Building with design systems gives a HUGE boost in speed, consistency, and maintainability.
2:55

CSS variables are live and they are POWERFUL. Now Live on Product Hunt 🚀 ➡️ Create a design system "So you can stay consistent and build much quicker." Define global styles like colors, gradients, sizes, and box shadows. ➡️ Use your variables everywhere "So you never have to manually enter a border color again." You're not limited to just sizes, colors, and font families. Use variables in gradients, box shadows, transforms, and more! ➡️ Start with libraries like Open Props, expertly crafted CSS variables "So you can use a tried and true system, and so we can standardize our Projects." Because there are no abstractions, you can use existing CSS variable libraries like Open Props, an expertly crafted library of CSS variables, and the recommended starting point in Webstudio. ➡️ Create complex micro-interactions "So when you hover a link, you can change any children's styles." CSS variables go beyond reusability! You can define variables anywhere in the navigator, such as on a link, and modify the variables on hover. Then, you can use those variables on the children to create complex micro-interactions! ➡️ Design and build simultaneously "So when deciding that perfect border color, you can arrow through all your options." Experimenting on the canvas just got a whole lot better. Now, you can arrow through your variables and see them rendered on the canvas to see which works best. ➡️ Change variable by breakpoint "So you can make the variables look great, no matter the screen size." CSS variables in Webstudio use the same UI as the rest of your styles, enabling breakpoints to work the same way. ✨ Building with design systems gives a HUGE boost in speed, consistency, and maintainability.

Webstudio

15,497 次观看 • 1 年前

Last week OpenAI launched ChatGPT Canvas, an interface that displays text, code, and visualization outputs. In the enterprise, we rely on more structured, trusted UX elements -- record details, lists, dropdowns, dashboards. Salesforce Page Layouts and Dynamic Forms control how components are presented, but it's time-consuming and hard to anticipate what data and workflows each user will need. But what if it didn't have to be this way? So excited to share the new Salesforce Generative Lightning UX ⚡️which dynamically generates layouts including tables, charts, news, Lightning components, powered by Agentforce. 🔹 Empowers CRM teams with ready access to essential info and insights, and ability to take action by talking or typing 🔹 Personalized to each user and adapts dynamically to each job to be done 🔹Secure and trusted, respecting data-sharing rules and permissions configured in your Salesforce instance We know AI can generate code, text, and video. Now AI can dynamically generate enterprise UX/UI too. You'll never experience enterprise apps the same again. 🤯 In pilot starting now. Look forward to your feedback so that we can productize next year! Salesforce Research Blog: Generative Lightning on AppExchange: #GenAI #UI #UX #Interfaces #Design #PageLayouts
2:30

Last week OpenAI launched ChatGPT Canvas, an interface that displays text, code, and visualization outputs. In the enterprise, we rely on more structured, trusted UX elements -- record details, lists, dropdowns, dashboards. Salesforce Page Layouts and Dynamic Forms control how components are presented, but it's time-consuming and hard to anticipate what data and workflows each user will need. But what if it didn't have to be this way? So excited to share the new Salesforce Generative Lightning UX ⚡️which dynamically generates layouts including tables, charts, news, Lightning components, powered by Agentforce. 🔹 Empowers CRM teams with ready access to essential info and insights, and ability to take action by talking or typing 🔹 Personalized to each user and adapts dynamically to each job to be done 🔹Secure and trusted, respecting data-sharing rules and permissions configured in your Salesforce instance We know AI can generate code, text, and video. Now AI can dynamically generate enterprise UX/UI too. You'll never experience enterprise apps the same again. 🤯 In pilot starting now. Look forward to your feedback so that we can productize next year! Salesforce Research Blog: Generative Lightning on AppExchange: #GenAI #UI #UX #Interfaces #Design #PageLayouts

Clara Shih

123,815 次观看 • 1 年前

We wanted to show the performance and the insane power of the Static Hermes native FFI. But we don't yet support the all language features needed to compile React Native (soon though!), so we improvised. We imported the bindings for DearImGui (a popular C++ imperative game UI library that renders meshes), and Sokol (an amazing lightweight 3D backend in C) and wrote a small demo. "Imperative UI" means that the entire UI and the state of the screen is recreated on every frame, which suits our purposes to demonstrate SH very well. The demo runs 100% compiled native code. JavaScript runs in every frame and recreates the entire state of the screen. It is portable to all platforms, though the screen layout is not optimized for phone. We wrote the demo in C++ and in JS, to compare, and they both ran with the same performance. In the attached videos you can see the demo running at the stable screen refresh rate - 120Hz on my Mac, 60Hz on a old Moto G5 phone. It includes some widgets, an n-body simulation of planets, a playable game demo, etc.
0:55

We wanted to show the performance and the insane power of the Static Hermes native FFI. But we don't yet support the all language features needed to compile React Native (soon though!), so we improvised. We imported the bindings for DearImGui (a popular C++ imperative game UI library that renders meshes), and Sokol (an amazing lightweight 3D backend in C) and wrote a small demo. "Imperative UI" means that the entire UI and the state of the screen is recreated on every frame, which suits our purposes to demonstrate SH very well. The demo runs 100% compiled native code. JavaScript runs in every frame and recreates the entire state of the screen. It is portable to all platforms, though the screen layout is not optimized for phone. We wrote the demo in C++ and in JS, to compare, and they both ran with the same performance. In the attached videos you can see the demo running at the stable screen refresh rate - 120Hz on my Mac, 60Hz on a old Moto G5 phone. It includes some widgets, an n-body simulation of planets, a playable game demo, etc.

Tzvetan Mikov

826,205 次观看 • 2 年前

One month from today. On July 4, 2026 — America's 250th birthday — the Theodore Roosevelt Presidential Library opens its doors for the first time. The first new presidential library in over a decade, in the same Badlands landscape that changed the man it's named for. Opening day itself is sold out. But here's the good news: this isn't a one-day event. The Library is open all summer, all fall, right through the end of the year — and tickets for those dates are available right now. So if you've been waiting for a sign to plan the trip, this is it. Pick your weekend. Tell the people you'd want beside you when you walk out onto that boardwalk for the first time. And get your tickets before your favorite dates fill in. Reserve now: #TheodoreRoosevelt #GrandOpening #July4 #America250 #VisitMedora #DareGreatly
0:44

One month from today. On July 4, 2026 — America's 250th birthday — the Theodore Roosevelt Presidential Library opens its doors for the first time. The first new presidential library in over a decade, in the same Badlands landscape that changed the man it's named for. Opening day itself is sold out. But here's the good news: this isn't a one-day event. The Library is open all summer, all fall, right through the end of the year — and tickets for those dates are available right now. So if you've been waiting for a sign to plan the trip, this is it. Pick your weekend. Tell the people you'd want beside you when you walk out onto that boardwalk for the first time. And get your tickets before your favorite dates fill in. Reserve now: #TheodoreRoosevelt #GrandOpening #July4 #America250 #VisitMedora #DareGreatly

Theodore Roosevelt Presidential Library

11,229 次观看 • 3 个月前

This is Jump Ship. A 4 player co-op PvE indie game by a new indie studio created by Former Minecraft developers: - FPS PvE with Space Ship Combat - Seamlessly go on and off ship, into space exploration into enemy ships, the gameplay looks insanely impressive. - A variety hand crafted missions with random elements. "No two runs will be exactly the same" - Upgrade & Repir your ship - Scavenge for parts to upgrade or repair it, and adapt it to fit your needs. - Playable in both Solo and Coop - Coming to Xbox and PC (Unfortunately no PS5 release) - Demo available on Steam right now! This game looks genuinely incredible and I will definitely be trying out the demo as soon as I am free, there's a bunch of Hazelight (A Way Out, It Takes Two) developers on this as well, I really think this has the potential to be one of the biggest co-op games we've seen in a long time.
2:24

This is Jump Ship. A 4 player co-op PvE indie game by a new indie studio created by Former Minecraft developers: - FPS PvE with Space Ship Combat - Seamlessly go on and off ship, into space exploration into enemy ships, the gameplay looks insanely impressive. - A variety hand crafted missions with random elements. "No two runs will be exactly the same" - Upgrade & Repir your ship - Scavenge for parts to upgrade or repair it, and adapt it to fit your needs. - Playable in both Solo and Coop - Coming to Xbox and PC (Unfortunately no PS5 release) - Demo available on Steam right now! This game looks genuinely incredible and I will definitely be trying out the demo as soon as I am free, there's a bunch of Hazelight (A Way Out, It Takes Two) developers on this as well, I really think this has the potential to be one of the biggest co-op games we've seen in a long time.

Synth Potato🥔

198,772 次观看 • 1 年前

HERMES AGENT IS NOW IN THE CLOUD. NO VPS. NO TERMINAL. NO SETUP. PICK A MODEL. PICK A SERVER SIZE. AGENT IS LIVE IN 60 SECONDS. Nous Portal just launched hosted Hermes Agent. two clicks. one minute. done. Nous Research WHAT THIS MEANS: before today: install Hermes on a VPS or your laptop. configure providers. set up gateway. manage updates. run hermes setup. edit config.yaml. great for power users. friction for everyone else. now: go to pick a model. pick a server size. your agent is live and reachable in 60 seconds. no terminal. no SSH. no Docker. same Hermes. same features. same tools. someone else handles the infrastructure. FOR TEAMS: this is where it gets interesting. spin up agents for everyone at your org. each team member gets their own Hermes instance. granular access controls per user. unified billing through Nous Portal. your team gets Hermes on day one. no DevOps needed. no VPS per person. one admin dashboard. one bill. WHAT'S INCLUDED: → 300+ models via Nous Portal (Claude, GPT, Gemini, DeepSeek, Grok, MiniMax, and more) → Tool Gateway (web search, image generation, TTS, browser automation) → all messaging platforms (Telegram, Discord, Slack, WhatsApp, Signal) → full feature set (profiles, cron, kanban, skills, memory, sub-agents, MoA, /goal, /learn, /journey) → automatic updates ONE PORTAL. FOUR TIERS: Free: $0/month. pay-as-you-go credits from $10. Plus: $20/month. $22 in monthly usage credit. Super: $100/month. $110 in monthly credit. Ultra: $200/month. $220 in monthly credit. highest rate limits. every paid tier includes Tool Gateway. one OAuth. one subscription. no extra API keys. SELF-HOSTED IS NOT GOING ANYWHERE: Hermes is MIT licensed. open source. free forever. you can still run it on your laptop, VPS, or GPU cluster. nothing changes for self-hosted users. the cloud version is for people who want the agent running without managing the machine. pick your path: → self-hosted: full control. you manage everything. → cloud: zero ops. Nous manages infrastructure. → hybrid: self-host your main agent, cloud for team members. HOW TO START: cloud: self-hosted: hermes setup --portal both connect to the same Nous Portal. same models. same tools. same billing. learn how to replace your entire team with 8 hermes agents 👇
0:20

HERMES AGENT IS NOW IN THE CLOUD. NO VPS. NO TERMINAL. NO SETUP. PICK A MODEL. PICK A SERVER SIZE. AGENT IS LIVE IN 60 SECONDS. Nous Portal just launched hosted Hermes Agent. two clicks. one minute. done. Nous Research WHAT THIS MEANS: before today: install Hermes on a VPS or your laptop. configure providers. set up gateway. manage updates. run hermes setup. edit config.yaml. great for power users. friction for everyone else. now: go to pick a model. pick a server size. your agent is live and reachable in 60 seconds. no terminal. no SSH. no Docker. same Hermes. same features. same tools. someone else handles the infrastructure. FOR TEAMS: this is where it gets interesting. spin up agents for everyone at your org. each team member gets their own Hermes instance. granular access controls per user. unified billing through Nous Portal. your team gets Hermes on day one. no DevOps needed. no VPS per person. one admin dashboard. one bill. WHAT'S INCLUDED: → 300+ models via Nous Portal (Claude, GPT, Gemini, DeepSeek, Grok, MiniMax, and more) → Tool Gateway (web search, image generation, TTS, browser automation) → all messaging platforms (Telegram, Discord, Slack, WhatsApp, Signal) → full feature set (profiles, cron, kanban, skills, memory, sub-agents, MoA, /goal, /learn, /journey) → automatic updates ONE PORTAL. FOUR TIERS: Free: $0/month. pay-as-you-go credits from $10. Plus: $20/month. $22 in monthly usage credit. Super: $100/month. $110 in monthly credit. Ultra: $200/month. $220 in monthly credit. highest rate limits. every paid tier includes Tool Gateway. one OAuth. one subscription. no extra API keys. SELF-HOSTED IS NOT GOING ANYWHERE: Hermes is MIT licensed. open source. free forever. you can still run it on your laptop, VPS, or GPU cluster. nothing changes for self-hosted users. the cloud version is for people who want the agent running without managing the machine. pick your path: → self-hosted: full control. you manage everything. → cloud: zero ops. Nous manages infrastructure. → hybrid: self-host your main agent, cloud for team members. HOW TO START: cloud: self-hosted: hermes setup --portal both connect to the same Nous Portal. same models. same tools. same billing. learn how to replace your entire team with 8 hermes agents 👇

YanXbt

45,446 次观看 • 2 个月前

Love what Claude shipped with Cowork Artifacts but generating code for Generative UI is the wrong architecture Wasteful: A single dashboard costs 2k boilterplate React/HTML tokens before any meaningful pixel is streamed Inconsistent: Two dashboards generated 5 mins apart don't feel like the same product. No design system. No shared components. Every output is a one off Security Liability: Today its a single-user sandboxed demo. But real software has shared dashboards, team views, embedded reports - LLM generated code for one user running in another user's session. Sandboxed or not, that's OWASP LLM05 territory. Multi-surface: A dashboard generated for desktop never works reliably on mobile. Want to render it on an iPhone? Your only option is an iframe. Yuck. Unstreamable: Partial code is extremely hard to stream meaningfully. What you get is hundreds of chunks of broken renders that flash and flicker. That's not progressive UI - that's broken UX. Code generation is a great starting point. It's not a production architecture. Generative UI in production needs an abstraction layer. The model describes intent. The renderer owns the pixels. Everything else is a liability.
0:46

Love what Claude shipped with Cowork Artifacts but generating code for Generative UI is the wrong architecture Wasteful: A single dashboard costs 2k boilterplate React/HTML tokens before any meaningful pixel is streamed Inconsistent: Two dashboards generated 5 mins apart don't feel like the same product. No design system. No shared components. Every output is a one off Security Liability: Today its a single-user sandboxed demo. But real software has shared dashboards, team views, embedded reports - LLM generated code for one user running in another user's session. Sandboxed or not, that's OWASP LLM05 territory. Multi-surface: A dashboard generated for desktop never works reliably on mobile. Want to render it on an iPhone? Your only option is an iframe. Yuck. Unstreamable: Partial code is extremely hard to stream meaningfully. What you get is hundreds of chunks of broken renders that flash and flicker. That's not progressive UI - that's broken UX. Code generation is a great starting point. It's not a production architecture. Generative UI in production needs an abstraction layer. The model describes intent. The renderer owns the pixels. Everything else is a liability.

Rabi Shanker Guha

46,745 次观看 • 5 个月前

🎉 Tailkit 4.0 is here, and I couldn't be more excited! 🙌🥳 But first - Giveaway Alert! Want to get a free Tailkit Developer license? Just drop a reply and give a like or repost (totally optional, but super appreciated). The lucky winner will be announced next Tuesday (October 8th) – good luck! Can you believe it’s already been 4 years since Tailkit’s journey started? ❤️ It feels like just yesterday I launched Tailkit 1.0 as an offline standalone web app back on October 1st, 2020. I'm really attached to this project because it was launched just a few days before I became a dad 👶😍 Fast forward to today, and Tailkit has grown into a fully customizable, feature-packed online app that gives you access to: - 550+ Tailwind CSS components (fully responsive + dark mode support) - 1,750+ Code snippets for HTML, React, Vue.js, and Alpine.js - 7 Marketing & Application Templates for HTML, React, Vue.js, and Laravel (fully responsive + dark mode support) - 10 Starter Kits for HTML, HTML with Vite, React, Vue.js, Laravel, Next.js, Nuxt, Astro, Svelte and Angular - 30 Days of Unlimited Design Service with every new Team license - Exclusive deals on third-party tools and projects - Handy helper tools like Button Builder, Color Palette, and Icon Finder - 3,700+ SVG Icons from Bootstrap and Heroicons - Free lifetime updates - Email support whenever you need it And the 4.0 update is packed with even more awesome features and upgrades: - 6 new UI components (Notifications) were added in Application UI package - 20 new UI components (Image/Content Sliders++) were added in Marketing package - React version (uses Vite) is introduced for all Templates - React code snippets were improved in all packages - Astro Starter Kit was added - Remove Dark Classes (from code snippets) option was added in App - Universal Dark Mode (preview pane can default to global dark mode) option was added in App - New preview colors (fuchsia, gray) were added in App - Heroicons v2 icons were updated to v2.1.5 adding 28+ brand new icons in App - 3 new exclusive deals are now available - UI design improvements in App - Various improvements and fixes in App - All dependencies were updated in Starter Kits - All dependencies were updated in Templates - Marketing website redesigned - Color Palette tool was made available to all I’ve put over 200 hours into this update alone, and I’m beyond excited to finally share it with you. Your continued support has made this journey possible, and I’m so grateful to have you along for the ride. 🙏 Wishing you an amazing day – remember, YOU ARE AWESOME! Go build something incredible! 🚀
1:17

🎉 Tailkit 4.0 is here, and I couldn't be more excited! 🙌🥳 But first - Giveaway Alert! Want to get a free Tailkit Developer license? Just drop a reply and give a like or repost (totally optional, but super appreciated). The lucky winner will be announced next Tuesday (October 8th) – good luck! Can you believe it’s already been 4 years since Tailkit’s journey started? ❤️ It feels like just yesterday I launched Tailkit 1.0 as an offline standalone web app back on October 1st, 2020. I'm really attached to this project because it was launched just a few days before I became a dad 👶😍 Fast forward to today, and Tailkit has grown into a fully customizable, feature-packed online app that gives you access to: - 550+ Tailwind CSS components (fully responsive + dark mode support) - 1,750+ Code snippets for HTML, React, Vue.js, and Alpine.js - 7 Marketing & Application Templates for HTML, React, Vue.js, and Laravel (fully responsive + dark mode support) - 10 Starter Kits for HTML, HTML with Vite, React, Vue.js, Laravel, Next.js, Nuxt, Astro, Svelte and Angular - 30 Days of Unlimited Design Service with every new Team license - Exclusive deals on third-party tools and projects - Handy helper tools like Button Builder, Color Palette, and Icon Finder - 3,700+ SVG Icons from Bootstrap and Heroicons - Free lifetime updates - Email support whenever you need it And the 4.0 update is packed with even more awesome features and upgrades: - 6 new UI components (Notifications) were added in Application UI package - 20 new UI components (Image/Content Sliders++) were added in Marketing package - React version (uses Vite) is introduced for all Templates - React code snippets were improved in all packages - Astro Starter Kit was added - Remove Dark Classes (from code snippets) option was added in App - Universal Dark Mode (preview pane can default to global dark mode) option was added in App - New preview colors (fuchsia, gray) were added in App - Heroicons v2 icons were updated to v2.1.5 adding 28+ brand new icons in App - 3 new exclusive deals are now available - UI design improvements in App - Various improvements and fixes in App - All dependencies were updated in Starter Kits - All dependencies were updated in Templates - Marketing website redesigned - Color Palette tool was made available to all I’ve put over 200 hours into this update alone, and I’m beyond excited to finally share it with you. Your continued support has made this journey possible, and I’m so grateful to have you along for the ride. 🙏 Wishing you an amazing day – remember, YOU ARE AWESOME! Go build something incredible! 🚀

John Champ

10,940 次观看 • 1 年前

ONE PROMPT AND ONE BUTTON NOW BUILDS A FULL SYSTEM, DATABASE, BACKEND, AND FRONTEND INCLUDED Most people still picture AI as something you ask questions to, then copy the answer into your own code by hand. A builder wired Claude into Obsidian through MCP instead, so a single written prompt becomes the actual spec for the system. Claude breaks that prompt into database schema, UI components, and API endpoints on its own, then writes, runs, and fixes the code until it actually works. MCP is what makes this possible, it lets the agent see the filesystem, installed packages, and running services before it starts building anything. The output isn't a code snippet sitting in a chat window, it's a live local app running on its own server, ready to open in a browser. What used to need a backend developer, a DevOps engineer, and two weeks now finishes in under fifteen minutes. See the full architecture and prompt structure below👇
0:21

ONE PROMPT AND ONE BUTTON NOW BUILDS A FULL SYSTEM, DATABASE, BACKEND, AND FRONTEND INCLUDED Most people still picture AI as something you ask questions to, then copy the answer into your own code by hand. A builder wired Claude into Obsidian through MCP instead, so a single written prompt becomes the actual spec for the system. Claude breaks that prompt into database schema, UI components, and API endpoints on its own, then writes, runs, and fixes the code until it actually works. MCP is what makes this possible, it lets the agent see the filesystem, installed packages, and running services before it starts building anything. The output isn't a code snippet sitting in a chat window, it's a live local app running on its own server, ready to open in a browser. What used to need a backend developer, a DevOps engineer, and two weeks now finishes in under fifteen minutes. See the full architecture and prompt structure below👇

wast3

20,348 次观看 • 2 个月前

This guy made 40 Facebook ads, 100 landing pages, booked himself on 4 podcasts, and wrote 3 guest blog posts. In a single day. People called him a fraud. There was literally a Polymarket bet on whether he's a con artist. So i asked him to prove it live. And he did. Here's 's actual system for AI-enabled paid marketing: 1) He uses Perplexity to search Reddit for his ICP's actual pain points in their own words. Not what he thinks they care about, what they've literally said online. 2) He feeds those pain points into Claude, which generates 40 ad variations, titles, supporting copy, and the actual creative using React components exported as PNGs via a library called HTML-to-canvas. 3) He tests all 40 variations in a CPC campaign on Meta. $100 over 3 days. Cheapest cost-per-click wins. 4) Winners get matched landing pages. He uses an open-source CMS called Strapi connected to Claude Code via API, so he bulk-generates a landing page for every winning ad angle. Same headline on the ad and the page = higher conversion. 5) Once he finds a winning concept, he scales it — AI avatar UGC via HeyGen, upgraded with V3, and only brings in a human creator if the AI version plateaus. The whole thing runs on Claude Code + APIs + a .env file with all his keys. No engineering team. Just him on multiple desktops with multiple Claude agents running simultaneously. His best line: "you're not just hiring me anymore. you're hiring me and the 30 agents behind me and all the personal software i've built."
1:02:09

This guy made 40 Facebook ads, 100 landing pages, booked himself on 4 podcasts, and wrote 3 guest blog posts. In a single day. People called him a fraud. There was literally a Polymarket bet on whether he's a con artist. So i asked him to prove it live. And he did. Here's 's actual system for AI-enabled paid marketing: 1) He uses Perplexity to search Reddit for his ICP's actual pain points in their own words. Not what he thinks they care about, what they've literally said online. 2) He feeds those pain points into Claude, which generates 40 ad variations, titles, supporting copy, and the actual creative using React components exported as PNGs via a library called HTML-to-canvas. 3) He tests all 40 variations in a CPC campaign on Meta. $100 over 3 days. Cheapest cost-per-click wins. 4) Winners get matched landing pages. He uses an open-source CMS called Strapi connected to Claude Code via API, so he bulk-generates a landing page for every winning ad angle. Same headline on the ad and the page = higher conversion. 5) Once he finds a winning concept, he scales it — AI avatar UGC via HeyGen, upgraded with V3, and only brings in a human creator if the AI version plateaus. The whole thing runs on Claude Code + APIs + a .env file with all his keys. No engineering team. Just him on multiple desktops with multiple Claude agents running simultaneously. His best line: "you're not just hiring me anymore. you're hiring me and the 30 agents behind me and all the personal software i've built."

Alex Lieberman

381,442 次观看 • 7 个月前

designing my new personal site with connected it to Claude Code and turned on "Swarm Mode" and watched agents design my site in real-time, with their cursors actually moving and operating the screen, not just cosmetically! instead of the agents producing a raw HTML file, they generate something called .pen which is just a json file describing all layouts, components, and design. this means that it's easier than ever to have teams collaborate on design exactly as they do on source code (designers and engineers can now speak the same language!) once you are happy with a screen, you can open a new chat and reference .pen frame and start to generate the code (in React/ Next/ Tailwind etc), and run it on your dev server, producing a live website that visually matches your design
0:31

designing my new personal site with connected it to Claude Code and turned on "Swarm Mode" and watched agents design my site in real-time, with their cursors actually moving and operating the screen, not just cosmetically! instead of the agents producing a raw HTML file, they generate something called .pen which is just a json file describing all layouts, components, and design. this means that it's easier than ever to have teams collaborate on design exactly as they do on source code (designers and engineers can now speak the same language!) once you are happy with a screen, you can open a new chat and reference .pen frame and start to generate the code (in React/ Next/ Tailwind etc), and run it on your dev server, producing a live website that visually matches your design

Sandra

94,416 次观看 • 6 个月前