正在加载视频...

视频加载失败

返回首页

Just shipped a new Next.js template! • Uses Postgres and Drizzle for the database • UI components with Tailwind and shadcn/ui • Email/password authentication with JWTs stored to cookies • Dashboard pages with CRUD operations on users/teams • Basic RBAC with Owner and Member roles • Pricing page (/)...

leerob's profile picture

Lee Robinson

239,751 subscribers

362,516 次观看 • 1 年前 •via X (Twitter)

教育科学技术
LIVE

Anya Rossi• Live Now

Private livecam show

9 条评论

Lee Robinson 的头像
Lee Robinson1 年前

Story points to complete this: 6 newborn nap times 🤣

Guillermo Rauch 的头像
Guillermo Rauch1 年前

@nextjs Love the distinction between global / local middleware. You need to run code before the page cache (edge) and after the cache (region)

MJ 的头像
MJ1 年前

@nextjs Congratz! If you need a bit more @achromaticlabs !

Lee Robinson 的头像
Lee Robinson1 年前

@nextjs @achromaticlabs I linked to it in the README 😁 Great work!

Nico - 📖 Pull Request Best Practices 的头像
Nico - 📖 Pull Request Best Practices1 年前

@nextjs i have a question. why don't the matcher in middleware simply be /dashboard/:path* ? looking at the middleware func, i think it's only there to handle requests to protected routes 🤔 it doesn't need to run for other routes, does it?

Lee Robinson 的头像
Lee Robinson1 年前

@nextjs Good question – it also refreshes the session cookie (on all routes).

Lee Robinson 的头像
Lee Robinson1 年前

@yeg_jennifer @nextjs You can create custom themes!

DevNotes_Journal 的头像
DevNotes_Journal1 年前

@nextjs Awesome work! Love the stack with Next.js, Drizzle, and Tailwind. The RBAC and activity logging system are a great touch for scaling apps. Excited to check out the demo and dive into the code. Looking forward to seeing how you evolve this.

ND 🎯 的头像
ND 🎯1 年前

@nextjs RIP to all sass template inde hackers!!

相关视频

🚀 Ship in record time with the new Metronic! The all-in-one template kit for React Vite, Next.js, and vanilla JS - trusted by 117,000+ developers. Key Features: - 10 unique app layouts - RTL/Dark mode support - 1000+ UI elements - 40+ UI components - 120+ pages - 50+ Prebuilt UI blocks CRUDs/forms/flows - User Management app(next.js) - Store - Client concept - More concepts cooking... Tech Stack: - Tailwind CSS 4 - ReUI components - shadcn compatible - @reactjs19 with App Router - Vite ⚡ with React Router - Next.js 15.3 - Auth.js - Supabase Auth - Radix by WorkOS - TANSTACK Table & Query - Prisma Postgres ORM - PostgreSQL - Vanilla JS/TypeScript - KtUI components - Bootstrap 5 legacy version Live preview: Purchase link:
1:31

🚀 Ship in record time with the new Metronic! The all-in-one template kit for React Vite, Next.js, and vanilla JS - trusted by 117,000+ developers. Key Features: - 10 unique app layouts - RTL/Dark mode support - 1000+ UI elements - 40+ UI components - 120+ pages - 50+ Prebuilt UI blocks CRUDs/forms/flows - User Management app(next.js) - Store - Client concept - More concepts cooking... Tech Stack: - Tailwind CSS 4 - ReUI components - shadcn compatible - @reactjs19 with App Router - Vite ⚡ with React Router - Next.js 15.3 - Auth.js - Supabase Auth - Radix by WorkOS - TANSTACK Table & Query - Prisma Postgres ORM - PostgreSQL - Vanilla JS/TypeScript - KtUI components - Bootstrap 5 legacy version Live preview: Purchase link:

KeenThemes Market

12,692 次观看 • 1 年前

Introducing Prism Templates ✨ Ready to use pages for your application built on shadcn and run on Next.js How it works: ◆ Go to Prism UI ◆ Download templates ◆ Run and edit your new website I have wanted to make something like this for everyone for a while, hope you like it 🪄 What is under the hood: ⚡️ Next.js 15 with App Router 🎨 Tailwind CSS for styling 📦 Shadcn UI components 🔒 TypeScript for type safety 🎯 ESLint & Biome for code formatting 🚀 Optimized for SEO 🌓 Dark mode support 📱 Responsive design 🔥 Modern and clean UI Tech Stack: Vercel shadcn Framer Tailwind CSS v0 Matt Perry Biome #opensource #buildinpublic
0:20

Introducing Prism Templates ✨ Ready to use pages for your application built on shadcn and run on Next.js How it works: ◆ Go to Prism UI ◆ Download templates ◆ Run and edit your new website I have wanted to make something like this for everyone for a while, hope you like it 🪄 What is under the hood: ⚡️ Next.js 15 with App Router 🎨 Tailwind CSS for styling 📦 Shadcn UI components 🔒 TypeScript for type safety 🎯 ESLint & Biome for code formatting 🚀 Optimized for SEO 🌓 Dark mode support 📱 Responsive design 🔥 Modern and clean UI Tech Stack: Vercel shadcn Framer Tailwind CSS v0 Matt Perry Biome #opensource #buildinpublic

CodeHagen

16,258 次观看 • 1 年前

📣 My newest course is out! 📣 This time we will be building an original SaaS Platform for video calls and summaries with AI Agents 🤖 Are you ready to make 1M ARR 😁? 🤖 Real-time video calls with AI agents 📞 Video and chat powered by Stream 🔐 Authentication handled by Better Auth 💳 Subscription payments via Polar 🧠 AI summaries and context chat using OpenAI ⚙️ Background jobs powered by Inngest 🧑‍💻 Code reviews with CodeRabbit 🗄️ Scalable Postgres database via Neon Postgres 🌐 Built with Next.js 15 and React 19 🎨 Tailwind CSS v4 and shadcn UI for styling 📱 Fully responsive and mobile-friendly 🚀 Ready for production deployment on Vercel
5:37

📣 My newest course is out! 📣 This time we will be building an original SaaS Platform for video calls and summaries with AI Agents 🤖 Are you ready to make 1M ARR 😁? 🤖 Real-time video calls with AI agents 📞 Video and chat powered by Stream 🔐 Authentication handled by Better Auth 💳 Subscription payments via Polar 🧠 AI summaries and context chat using OpenAI ⚙️ Background jobs powered by Inngest 🧑‍💻 Code reviews with CodeRabbit 🗄️ Scalable Postgres database via Neon Postgres 🌐 Built with Next.js 15 and React 19 🎨 Tailwind CSS v4 and shadcn UI for styling 📱 Fully responsive and mobile-friendly 🚀 Ready for production deployment on Vercel

Code With Antonio

31,277 次观看 • 1 年前

We just launched our new website along with some great changes: 1. Added /themes page where you can grab our free shadcn / ui themes. 2. The /academy is now free for everyone. You can learn the Figma to shadcn/ui process with our short video guides. 3. The site is rebuilt from the ground up with Next.js 15, React 19, and shadcn/ui. The new stack gives us faster load times, better accessibility, and a more cohesive experience across all pages. I'm already working on more themes, expanded docs, and new Pro Blocks. Thanks for being here and supporting our small project! More to come!
0:36

We just launched our new website along with some great changes: 1. Added /themes page where you can grab our free shadcn / ui themes. 2. The /academy is now free for everyone. You can learn the Figma to shadcn/ui process with our short video guides. 3. The site is rebuilt from the ground up with Next.js 15, React 19, and shadcn/ui. The new stack gives us faster load times, better accessibility, and a more cohesive experience across all pages. I'm already working on more themes, expanded docs, and new Pro Blocks. Thanks for being here and supporting our small project! More to come!

Matt

44,889 次观看 • 9 个月前

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

I've been building a music player with Next.js for fun. Here's a quick demo of how it works (it's open source!) • Demo: • Code: If you want to learn more about how it's built, here's more details ↓ I'm using Postgres (with Drizzle) to store information about the songs and playlists. Audio and image files are stored in Vercel Blob (object storage), and the URLs are then referenced in the database. For the UI, I'm using shadcn/ui (so Tailwind CSS and Radix). This made it easy to copy/paste in some nice components, like the dropdown menus. I built the entire first version of the UI in v0 and then iterated from there, feeding it my Drizzle schema as a source in the project and having it scaffold some of the boilerplate for me: I added support for keyboard navigation (using arrow keys) or vim motions (j/k to go up/down, and h/l to go between playlists and tracks). Also, space to toggle the now playing song, and / to focus the search input. The search function has a nice utility to highlight the currently searched text on the page in yellow. Then, I was exploring how to pass metadata from my application to macOS or iOS. Turns out there's an API for that – MediaSession. Web apps can share metadata about what media is playing (title, artist, album artwork) and sync play/pause/seek with system media controls. Works across modern browsers — even integrates with iOS dynamic island and shows up on lock screens: I set up my app like a PWA – it has a manifest.json file, so it can be installed to my iOS home screen or added to my dock on macOS. On iOS, it then uses the full screen height `100dvh` (dynamic viewport) and has padding on the bottom for the safe area with the `env()` CSS function. Finally, I was able to use the Vercel AI SDK in a script to clean up the metadata on audio files I downloaded from YouTube. Bonus: I even was able to dogfood the React Compiler, which helped me fix a performance bug! That's all! It's fun to make personal software:
2:03

I've been building a music player with Next.js for fun. Here's a quick demo of how it works (it's open source!) • Demo: • Code: If you want to learn more about how it's built, here's more details ↓ I'm using Postgres (with Drizzle) to store information about the songs and playlists. Audio and image files are stored in Vercel Blob (object storage), and the URLs are then referenced in the database. For the UI, I'm using shadcn/ui (so Tailwind CSS and Radix). This made it easy to copy/paste in some nice components, like the dropdown menus. I built the entire first version of the UI in v0 and then iterated from there, feeding it my Drizzle schema as a source in the project and having it scaffold some of the boilerplate for me: I added support for keyboard navigation (using arrow keys) or vim motions (j/k to go up/down, and h/l to go between playlists and tracks). Also, space to toggle the now playing song, and / to focus the search input. The search function has a nice utility to highlight the currently searched text on the page in yellow. Then, I was exploring how to pass metadata from my application to macOS or iOS. Turns out there's an API for that – MediaSession. Web apps can share metadata about what media is playing (title, artist, album artwork) and sync play/pause/seek with system media controls. Works across modern browsers — even integrates with iOS dynamic island and shows up on lock screens: I set up my app like a PWA – it has a manifest.json file, so it can be installed to my iOS home screen or added to my dock on macOS. On iOS, it then uses the full screen height `100dvh` (dynamic viewport) and has padding on the bottom for the safe area with the `env()` CSS function. Finally, I was able to use the Vercel AI SDK in a script to clean up the metadata on audio files I downloaded from YouTube. Bonus: I even was able to dogfood the React Compiler, which helped me fix a performance bug! That's all! It's fun to make personal software:

Lee Robinson

118,242 次观看 • 1 年前

Microsoft Teams just got Generative UI But this is just the tip of the iceberg. AG-UI is the protocol connecting any agent to any user on any app, topped with Generative UI. That means your agent can render: - forms - buttons - charts - approval flows Right inside the chat, on the fly. But it's not limited to in-app copilots. What's special is that you can work with any agent using the same system and bring them into any surface, including Slack, WhatsApp, Discord and more. This is exactly why Hermes and OpenClaw took off. As users of these agents, we don't like walls of text, and it's a pain to get when you can have way better UX. CopilotKit🪁 + AG-UI handle that interaction layer. If you want to try out Agentic UI in Microsoft Teams, you can get early access here:
0:55

Microsoft Teams just got Generative UI But this is just the tip of the iceberg. AG-UI is the protocol connecting any agent to any user on any app, topped with Generative UI. That means your agent can render: - forms - buttons - charts - approval flows Right inside the chat, on the fly. But it's not limited to in-app copilots. What's special is that you can work with any agent using the same system and bring them into any surface, including Slack, WhatsApp, Discord and more. This is exactly why Hermes and OpenClaw took off. As users of these agents, we don't like walls of text, and it's a pain to get when you can have way better UX. CopilotKit🪁 + AG-UI handle that interaction layer. If you want to try out Agentic UI in Microsoft Teams, you can get early access here:

Atai Barkai

24,529 次观看 • 1 个月前

I work with shadcn/ui every day. I design with it, I build with it, and I see a lot of projects built with it. And honestly? Many of them look the same. Or worse - they look broken. Colors that clash. Fonts that don't pair. Dark modes that feel like an afterthought. The components themselves are great. The theming that people or AI make? Not so much. So I built a tool to fix that. I just launched my shadcn theme generator that will allow you to ship beautiful shadcn/ui themes in just 3-4 clicks. What it does: - Creates your entire color palette from 1 color (your hex or any tailwind color) - Works for light and dark theme - Only includes fonts that actually look good in UI - Font pairings I curated myself - Works for any project - landing page, dashboard, store - Has a color contast checker for the entire palette Too lazy? Just use random theme feature Done? Copy and paste the CSS to your global.css file or import to our Figma kit.
1:15

I work with shadcn/ui every day. I design with it, I build with it, and I see a lot of projects built with it. And honestly? Many of them look the same. Or worse - they look broken. Colors that clash. Fonts that don't pair. Dark modes that feel like an afterthought. The components themselves are great. The theming that people or AI make? Not so much. So I built a tool to fix that. I just launched my shadcn theme generator that will allow you to ship beautiful shadcn/ui themes in just 3-4 clicks. What it does: - Creates your entire color palette from 1 color (your hex or any tailwind color) - Works for light and dark theme - Only includes fonts that actually look good in UI - Font pairings I curated myself - Works for any project - landing page, dashboard, store - Has a color contast checker for the entire palette Too lazy? Just use random theme feature Done? Copy and paste the CSS to your global.css file or import to our Figma kit.

Matt

77,738 次观看 • 5 个月前

Introducing primeui. Build sites fast. Fear no code. Available today • 200+ handcrafted marketing UI components and templates • Sitemap planner • Prototype + experiment on an infinite canvas • Clean export to Next.js, Tailwind + shadcn/ui compatible • Not just landing pages: build Blog, Docs, Pricing, and more Coming soon • MCP • Skills • AI Designer We started Prime UI because we believe site builders that do not output real code end up slowing you down. So instead of building another “app builder,” we focused on marketing sites, the work we know best after 10+ years of designing and building high-end websites at Pixel Point. Human expertise combined with AI scalability is what we believe in. Prime UI isn’t here (yet) to fully replace your stack, but it is already capable of saving you hundreds of hours in prototyping and the early phases of your next site project. What’s next: MCP: continuously add new pages to your site from Prime UI, aligned with your project setup and style. Skills: an AI-agent-friendly concentrate of our years of website design and development expertise. It is time to ditch old habits. Fear no code and build sites fast, ready for the AI era.
0:30

Introducing primeui. Build sites fast. Fear no code. Available today • 200+ handcrafted marketing UI components and templates • Sitemap planner • Prototype + experiment on an infinite canvas • Clean export to Next.js, Tailwind + shadcn/ui compatible • Not just landing pages: build Blog, Docs, Pricing, and more Coming soon • MCP • Skills • AI Designer We started Prime UI because we believe site builders that do not output real code end up slowing you down. So instead of building another “app builder,” we focused on marketing sites, the work we know best after 10+ years of designing and building high-end websites at Pixel Point. Human expertise combined with AI scalability is what we believe in. Prime UI isn’t here (yet) to fully replace your stack, but it is already capable of saving you hundreds of hours in prototyping and the early phases of your next site project. What’s next: MCP: continuously add new pages to your site from Prime UI, aligned with your project setup and style. Skills: an AI-agent-friendly concentrate of our years of website design and development expertise. It is time to ditch old habits. Fear no code and build sites fast, ready for the AI era.

Alex Barashkov

71,965 次观看 • 5 个月前

We are witnessing a fundamental shift in how software is built. Over the decades, UI was static and predictable. But AI is changing the fundamental nature of the interface. We are moving away from fixed UI and toward a new standard: Generative UI. Generative UI lets agents participate in the UI, not just the conversation. It’s a dynamic participant in the user experience. Depending on the complexity of your app, Generative UI generally falls into three categories: 1. Static (AG-UI): UI is chosen from a fixed set of hand-built components 2. Open-Ended (MCP Apps): agent sends arbitrary content like raw HTML or iframes for total flexibility. 3. Declarative (A2UI): agent and frontend communicate via a structured UI spec for dynamic widgets and forms. The AG-UI Protocol by CopilotKit is the real breakthrough. AG-UI acts as the universal transport layer. It provides the integrations and middleware for every Gen-UI spec, making it trivial to bring dynamic components into your existing app. CopilotKit provides the go-to ecosystem for building agentic applications and is the React client of AG-UI. It is designed to be deeply integrated, allowing developers to bring their own frameworks or protocols to the table. Play around with different types of Generative UI here → Check out the video attached to see Generative UI in action. Appreciate the CopilotKit team for collaborating with me on this deep dive.
0:33

We are witnessing a fundamental shift in how software is built. Over the decades, UI was static and predictable. But AI is changing the fundamental nature of the interface. We are moving away from fixed UI and toward a new standard: Generative UI. Generative UI lets agents participate in the UI, not just the conversation. It’s a dynamic participant in the user experience. Depending on the complexity of your app, Generative UI generally falls into three categories: 1. Static (AG-UI): UI is chosen from a fixed set of hand-built components 2. Open-Ended (MCP Apps): agent sends arbitrary content like raw HTML or iframes for total flexibility. 3. Declarative (A2UI): agent and frontend communicate via a structured UI spec for dynamic widgets and forms. The AG-UI Protocol by CopilotKit is the real breakthrough. AG-UI acts as the universal transport layer. It provides the integrations and middleware for every Gen-UI spec, making it trivial to bring dynamic components into your existing app. CopilotKit provides the go-to ecosystem for building agentic applications and is the React client of AG-UI. It is designed to be deeply integrated, allowing developers to bring their own frameworks or protocols to the table. Play around with different types of Generative UI here → Check out the video attached to see Generative UI in action. Appreciate the CopilotKit team for collaborating with me on this deep dive.

Pratham

33,920 次观看 • 6 个月前

GitHub Copilot coding agent just got a major upgrade. ✨ What's new: • It tests its own UI changes with Playwright and adds screenshots to PRs. • It can connect to more context and tools with remote MCP support. • You can trigger and track tasks from a new dashboard. • It only uses one Copilot premium request per session. Plus, it's now available for Copilot Pro and Business users. ✅ Here are all the updates in action. ▶️
1:52

GitHub Copilot coding agent just got a major upgrade. ✨ What's new: • It tests its own UI changes with Playwright and adds screenshots to PRs. • It can connect to more context and tools with remote MCP support. • You can trigger and track tasks from a new dashboard. • It only uses one Copilot premium request per session. Plus, it's now available for Copilot Pro and Business users. ✅ Here are all the updates in action. ▶️

GitHub

126,899 次观看 • 1 年前

Peter Steinberger : the creator of OpenClaw just gave a 30-min masterclass on agentic coding. watch this masterclass and save these 9 rules he follows ↓ Bookmark this to ship your first product people will pay for [9 rules from the masterclass:] →agentic engineering, not vibe coding. →only read code that touches the DB. →the agentic trap : elite prompts are short again. →empathize with the agent. it starts every session knowing nothing. →don't fight the name it picks. →3-8 agents in parallel. →never revert. always commit to main. →refactors are cheap. break things. →voice in. "hands too precious for writing." [9 tools to pair with it:] auth → Clerk UI → Tailwind + shadcn state → Zustand + Server Components APIs → tRPC + Server Actions DB → Prisma + managed Postgres payments → Stripe deploys → Vercel errors → Sentry analytics → PostHog [two types of builders right now:] type 1: hand-rolls auth, reverts on every miss, one chat one window. type 2: 3-8 agents, voice in, commits to main, Clerk + Stripe + Vercel. the type 2 path is the only one that compounds. Khairallah AL-Awady the playbook for type 2 ➡️
31:13

Peter Steinberger : the creator of OpenClaw just gave a 30-min masterclass on agentic coding. watch this masterclass and save these 9 rules he follows ↓ Bookmark this to ship your first product people will pay for [9 rules from the masterclass:] →agentic engineering, not vibe coding. →only read code that touches the DB. →the agentic trap : elite prompts are short again. →empathize with the agent. it starts every session knowing nothing. →don't fight the name it picks. →3-8 agents in parallel. →never revert. always commit to main. →refactors are cheap. break things. →voice in. "hands too precious for writing." [9 tools to pair with it:] auth → Clerk UI → Tailwind + shadcn state → Zustand + Server Components APIs → tRPC + Server Actions DB → Prisma + managed Postgres payments → Stripe deploys → Vercel errors → Sentry analytics → PostHog [two types of builders right now:] type 1: hand-rolls auth, reverts on every miss, one chat one window. type 2: 3-8 agents, voice in, commits to main, Clerk + Stripe + Vercel. the type 2 path is the only one that compounds. Khairallah AL-Awady the playbook for type 2 ➡️

Avid

25,351 次观看 • 2 个月前

I just compared Claude Code vs Codex vs Cursor CLI The task was to build a Next.js app with Tailwind 4 and shadcn components to collect customer feedback and showcase it with a widget. I gave all three the same prompt and let them go for 30 minutes to see what they came up with. Claude Code with Opus 4.1 Even though I told it to set up the app in the existing project folder, it tried to create a directory for it. After I interrupted and told it not to do that, it built a demo form and landing page with no errors. I had to ask it to make the demo interactive so users could submit a testimonial and preview it. The landing page looked like AI and was pretty basic, but it worked and it was done in a fraction of the time of the others. Total tokens used: 33k Codex with GPT-5 At the end of the 30 minutes I just could not get Codex to produce a working app. It got stuck in a loop of not being able to set up Tailwind 4 and despite many, MANY, attempts, I ended up with a "failed to compile" error. Total tokens used: 102k Cursor Agent with GPT-5 This was the slowest agent by far and a couple of times I actually thought it got stuck in a loop and was close to Ctrl+C'ing to cancel it. The TUI is really nice though, especially how it shows diffs and it did eventually build a working app (after one or two slight errors that needed fixing) The demo was interactive and it had a very minimal design that looked bare but also a lot less like an "AI generated" app than the Opus 4.1 design. It also wasn't too chatty and just did what it needed to do! Code quality was on a par with Opus 4.1, but it did use 5.5x as many tokens to get there. Still cheaper than Opus on a direct comparison but not when you factor in a Claude Code Max subscription. Total tokens: 188k I'll be able to do a proper comparison and record some videos when I'm back from holiday but for now, Opus is still the more capable model out of the box and Claude Code is the more complete CLI product. It will be interesting to see how Cursor evolve their CLI though with commands and subagents because I think with GPT-5 they have a real shot at providing competition for Claude Code if they can optimise output to get similar quality with less tokens. Jump to 0:40 in the video to see the two apps. Which do you think is which? ;)
1:18

I just compared Claude Code vs Codex vs Cursor CLI The task was to build a Next.js app with Tailwind 4 and shadcn components to collect customer feedback and showcase it with a widget. I gave all three the same prompt and let them go for 30 minutes to see what they came up with. Claude Code with Opus 4.1 Even though I told it to set up the app in the existing project folder, it tried to create a directory for it. After I interrupted and told it not to do that, it built a demo form and landing page with no errors. I had to ask it to make the demo interactive so users could submit a testimonial and preview it. The landing page looked like AI and was pretty basic, but it worked and it was done in a fraction of the time of the others. Total tokens used: 33k Codex with GPT-5 At the end of the 30 minutes I just could not get Codex to produce a working app. It got stuck in a loop of not being able to set up Tailwind 4 and despite many, MANY, attempts, I ended up with a "failed to compile" error. Total tokens used: 102k Cursor Agent with GPT-5 This was the slowest agent by far and a couple of times I actually thought it got stuck in a loop and was close to Ctrl+C'ing to cancel it. The TUI is really nice though, especially how it shows diffs and it did eventually build a working app (after one or two slight errors that needed fixing) The demo was interactive and it had a very minimal design that looked bare but also a lot less like an "AI generated" app than the Opus 4.1 design. It also wasn't too chatty and just did what it needed to do! Code quality was on a par with Opus 4.1, but it did use 5.5x as many tokens to get there. Still cheaper than Opus on a direct comparison but not when you factor in a Claude Code Max subscription. Total tokens: 188k I'll be able to do a proper comparison and record some videos when I'm back from holiday but for now, Opus is still the more capable model out of the box and Claude Code is the more complete CLI product. It will be interesting to see how Cursor evolve their CLI though with commands and subagents because I think with GPT-5 they have a real shot at providing competition for Claude Code if they can optimise output to get similar quality with less tokens. Jump to 0:40 in the video to see the two apps. Which do you think is which? ;)

Ian Nuttall

194,949 次观看 • 11 个月前

✨ A dream I had finally came true: I can now chat directly with my sites to build any feature or fix any bug just via Telegram I've been playing with OpenClaw for 3 weeks now and it's great but I was always too scared to run it on any production server And I was right a bit as Marc Köhlbrugge was able to hack it by social engineering and acting as if it was me, and with enough tries it believed him, and was able to modify the server, change SSH keys etc. of course I had it isolated properly on its own VPS and it didn't touch anything sensitive (as it should!) Marc then reported that bug to Peter Steinberger 🦞 who patched it fast But I wanted to try something more basic and simple, and I think maybe more secure: to just connect Claude Code on my server to Telegram which would be hard locked to only messages from me So I installed claude-code-telegram by Richard Atkinson on the server and run it as a system daemon and it works really well The cool thing is that I was already using Telegram for server errors like this: > Photo AI - ❌ Random credits giveaway failed (Attempt 30/30) with an exception: SQLSTATE[HY000]: General error: 5 database is locked So now I can just reply, "Ok fix this", and Claude Code on the server in production will try (and probably succeed) in fixing it In the video below I asked it to make show [🌳 Parks ] on the map by default on load, it did that, then I reloaded the page and it instantly worked One thing it still needs is sending actual messages while it's doing stuff which OpenClaw does really well, it's annoying to just wait while it says "Working..." but that's probably next
1:30

✨ A dream I had finally came true: I can now chat directly with my sites to build any feature or fix any bug just via Telegram I've been playing with OpenClaw for 3 weeks now and it's great but I was always too scared to run it on any production server And I was right a bit as Marc Köhlbrugge was able to hack it by social engineering and acting as if it was me, and with enough tries it believed him, and was able to modify the server, change SSH keys etc. of course I had it isolated properly on its own VPS and it didn't touch anything sensitive (as it should!) Marc then reported that bug to Peter Steinberger 🦞 who patched it fast But I wanted to try something more basic and simple, and I think maybe more secure: to just connect Claude Code on my server to Telegram which would be hard locked to only messages from me So I installed claude-code-telegram by Richard Atkinson on the server and run it as a system daemon and it works really well The cool thing is that I was already using Telegram for server errors like this: > Photo AI - ❌ Random credits giveaway failed (Attempt 30/30) with an exception: SQLSTATE[HY000]: General error: 5 database is locked So now I can just reply, "Ok fix this", and Claude Code on the server in production will try (and probably succeed) in fixing it In the video below I asked it to make show [🌳 Parks ] on the map by default on load, it did that, then I reloaded the page and it instantly worked One thing it still needs is sending actual messages while it's doing stuff which OpenClaw does really well, it's annoying to just wait while it says "Working..." but that's probably next

@levelsio

642,033 次观看 • 5 个月前

designing my new personal site with Pencil.dev 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 Pencil.dev 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

93,463 次观看 • 4 个月前

Very excited to announce that Flowsta, the authentication system made possible by Holochain, is feature complete and close to public release. Here's a video with a sneak peek at the dashboard that every Flowsta user gets access to. All user data on Flowsta is stored on Holochain. 1 public hApp (Holochain App) for public data like Agent ID, DID (W3C Decentralized ID), Display Name and Thumbnail. Each user has their own private hApp that encrypts all their private data, like password, email and usage meta data. Nobody can access this data without your password and/or recovery keys. It is mathematically impossible for Flowsta staff or anybody else to access this data without you explicitly granting access. This is game-changing. True decentralized censorship resistant authentication and data. All made possible by Holochain. Our next video will give a sneak peek into the Developer Dashboard for adding Flowsta to any Web app. Not just Holochain apps. AMA.. 🎉
0:59

Very excited to announce that Flowsta, the authentication system made possible by Holochain, is feature complete and close to public release. Here's a video with a sneak peek at the dashboard that every Flowsta user gets access to. All user data on Flowsta is stored on Holochain. 1 public hApp (Holochain App) for public data like Agent ID, DID (W3C Decentralized ID), Display Name and Thumbnail. Each user has their own private hApp that encrypts all their private data, like password, email and usage meta data. Nobody can access this data without your password and/or recovery keys. It is mathematically impossible for Flowsta staff or anybody else to access this data without you explicitly granting access. This is game-changing. True decentralized censorship resistant authentication and data. All made possible by Holochain. Our next video will give a sneak peek into the Developer Dashboard for adding Flowsta to any Web app. Not just Holochain apps. AMA.. 🎉

Eric Doriean 🌱

37,064 次观看 • 8 个月前

How should you search, filter, and paginate data with Next.js? This demo has 50,000 books in a Postgres database. • Page Load: When the page loads, we see the React Suspense fallback. This loading skeleton is displayed until the first page of books is retrieved from the database. • Searching: The search input has a 200ms debounce. After 200ms of inactivity, the form submits, updating the URL state with `?q={search}`. The Server Component reads `searchParams` and queries the database. On form submission, a React transition starts, allowing us to read the pending status with `useFormStatus` to display an inline loading state. • State Preservation: Navigating to an individual book page retains the search input state. Reloading the page or sharing the link preserves the search results. • Client-side Filtering: Filtering authors in the left sidebar is done client-side. Authors are fetched by a Server Component and passed as props to the sidebar. Changing the input value updates React state and re-renders the sidebar. • Optimistic Updates: The sidebar’s selected authors are optimistically updated with `useOptimistic`. Checkbox selections update instantly without waiting for the URL to change. • State Preservation: Navigating to an individual book page retains the sidebar filter input and selected author state across navigations, giving it an app-like feel. • Pagination: Navigating between pages updates the URL state, triggering the Server Component to query the database for the specific page of books. We also fetch the total book count to show the total number of pages. This demo isn't perfect yet (still working on it) but it's been a fun playground for some of these patterns. You can imagine a similar experience for thousands of movies, cars, products, or any other very large dataset. Demo → Code →
0:22

How should you search, filter, and paginate data with Next.js? This demo has 50,000 books in a Postgres database. • Page Load: When the page loads, we see the React Suspense fallback. This loading skeleton is displayed until the first page of books is retrieved from the database. • Searching: The search input has a 200ms debounce. After 200ms of inactivity, the form submits, updating the URL state with `?q={search}`. The Server Component reads `searchParams` and queries the database. On form submission, a React transition starts, allowing us to read the pending status with `useFormStatus` to display an inline loading state. • State Preservation: Navigating to an individual book page retains the search input state. Reloading the page or sharing the link preserves the search results. • Client-side Filtering: Filtering authors in the left sidebar is done client-side. Authors are fetched by a Server Component and passed as props to the sidebar. Changing the input value updates React state and re-renders the sidebar. • Optimistic Updates: The sidebar’s selected authors are optimistically updated with `useOptimistic`. Checkbox selections update instantly without waiting for the URL to change. • State Preservation: Navigating to an individual book page retains the sidebar filter input and selected author state across navigations, giving it an app-like feel. • Pagination: Navigating between pages updates the URL state, triggering the Server Component to query the database for the specific page of books. We also fetch the total book count to show the total number of pages. This demo isn't perfect yet (still working on it) but it's been a fun playground for some of these patterns. You can imagine a similar experience for thousands of movies, cars, products, or any other very large dataset. Demo → Code →

Lee Robinson

236,802 次观看 • 1 年前

New short course: Build AI Apps with MCP Servers: Working with Box Files, built with Box and taught by Ben Kus , their CTO. Many AI applications require custom code for basic file operations. The Model Context Protocol (MCP) standardizes this by letting you offload file tasks to dedicated servers that provide tools an LLM can use directly. In this course, you'll process documents stored in a Box folder using the Box MCP server. Rather than writing custom integration code to connect to the Box API and download files, you'll design your application to use the tools provided via MCP. Skills you'll gain: - Build an LLM-powered document processing app, using the Box MCP server to access files - Design a multi-agent system using Google's Agent Development Kit (ADK), consisting of specialized agents for file operations - Coordinate the multi-agent workflow through an orchestrator that uses the Agent2Agent (A2A) protocol to connect to the agents You'll start with a local file-processing app, refactor it to work with Box's MCP server, then evolve it into a multi-agent system. Sign up here:
1:48

New short course: Build AI Apps with MCP Servers: Working with Box Files, built with Box and taught by Ben Kus , their CTO. Many AI applications require custom code for basic file operations. The Model Context Protocol (MCP) standardizes this by letting you offload file tasks to dedicated servers that provide tools an LLM can use directly. In this course, you'll process documents stored in a Box folder using the Box MCP server. Rather than writing custom integration code to connect to the Box API and download files, you'll design your application to use the tools provided via MCP. Skills you'll gain: - Build an LLM-powered document processing app, using the Box MCP server to access files - Design a multi-agent system using Google's Agent Development Kit (ADK), consisting of specialized agents for file operations - Coordinate the multi-agent workflow through an orchestrator that uses the Agent2Agent (A2A) protocol to connect to the agents You'll start with a local file-processing app, refactor it to work with Box's MCP server, then evolve it into a multi-agent system. Sign up here:

Andrew Ng

81,696 次观看 • 10 个月前

I took Clicky and I made it 5x Faster So I saw that Farza 🇵🇰🇺🇸 was using uses Claude's vision to find UI elements on screen, send a screenshot, wait for coordinates back. It works, but it's slow. I replaced that with OmniParser V2 by Microsoft which is a local Object detection model trained specifically on UI elements. It runs on-device, detects every button, menu, and icon in 400ms, and gives me pixel-precise coordinates. No API call, no latency, no cost. The green highlights you see around the UI elements is the detection overlay and you can see as I am switching the screen it takes no time to detect and highlight which is pretty neat! With Local models improving by the day, Its the right direction for applications like these. Next up: video-synced tutorials where a YouTube tutorial pauses and waits for you to perform each action in the real app. I am not stopping!
2:53

I took Clicky and I made it 5x Faster So I saw that Farza 🇵🇰🇺🇸 was using uses Claude's vision to find UI elements on screen, send a screenshot, wait for coordinates back. It works, but it's slow. I replaced that with OmniParser V2 by Microsoft which is a local Object detection model trained specifically on UI elements. It runs on-device, detects every button, menu, and icon in 400ms, and gives me pixel-precise coordinates. No API call, no latency, no cost. The green highlights you see around the UI elements is the detection overlay and you can see as I am switching the screen it takes no time to detect and highlight which is pretty neat! With Local models improving by the day, Its the right direction for applications like these. Next up: video-synced tutorials where a YouTube tutorial pauses and waits for you to perform each action in the real app. I am not stopping!

Milind S

73,233 次观看 • 3 个月前