Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

Building an AI Agent Web App: Framework - Next.js Auth & Db - Supabase Agent Flows - Langflow IDE - Cursor (+Claude 3.5) Component lib - shadcn UI UI - v0 Full tutorial below:

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

11 Yorum

Misbah Syed profil fotoğrafı
Misbah Syed1 yıl önce

Tutorial step-by-step video-

Alexander De Ridder profil fotoğrafı
Alexander De Ridder1 yıl önce

@nextjs @supabase @langflow_ai @cursor_ai @shadcn @v0 Solid tech stack. Digging the cross-platform potential with Nextjs and Supabase. Leveraging Langflow's flows looks slick for AI interactions too. Curious how you'll integrate Claude - did you find Cursor's IDE intuitive for prompting? Always game to learn new dev workflows.

Saïd Aitmbarek profil fotoğrafı
Saïd Aitmbarek1 yıl önce

@nextjs @supabase @langflow_ai @cursor_ai @shadcn @v0 awesome, love how cursor handles the conversion from starter kit to agent🤗 do you have a repo for it, wanna share it on for our makers

Misbah Syed profil fotoğrafı
Misbah Syed1 yıl önce

@nextjs @supabase @langflow_ai @cursor_ai @shadcn @v0 Thanks! Yes, lemme add the repo link to the yt video description. Nice idea to share it with makers.

Hass Dhia profil fotoğrafı
Hass Dhia1 yıl önce

@nextjs @supabase @langflow_ai @cursor_ai @shadcn @v0 Looking forward to trying this one. You are killing it @MisbahSy

Misbah Syed profil fotoğrafı
Misbah Syed1 yıl önce

@nextjs @supabase @langflow_ai @cursor_ai @shadcn @v0 Thanks!

mike profil fotoğrafı
mike1 yıl önce

@nextjs @supabase @langflow_ai @cursor_ai @shadcn @v0 nice stacks

llmstock.com mc profil fotoğrafı
llmstock.com mc1 yıl önce

@nextjs @supabase @langflow_ai @cursor_ai @shadcn @v0 nice stack

Misbah Syed profil fotoğrafı
Misbah Syed1 yıl önce

@nextjs @supabase @langflow_ai @cursor_ai @shadcn @v0 🙌

txshon profil fotoğrafı
txshon1 yıl önce

@nextjs @supabase @langflow_ai @cursor_ai @shadcn @v0 What subtitle app do you use?

Misbah Syed profil fotoğrafı
Misbah Syed1 yıl önce

@nextjs @supabase @langflow_ai @cursor_ai @shadcn @v0 In this case it was Descript

Benzer Videolar

Anthropic's in trouble, again! They spent years building what's now fully open-source. What made Claude feel different from a normal app is that the agent could act inside the interface instead of only talking in a chat box. For instance, Claude Artifacts let an agent render real UI, charts, dashboards, and interactive components that assemble live inside the response. Every major AI product tried to replicate it. But the problem was that unlike reasoning, planning, tool-calling, etc., none of it shipped natively with LangGraph, CrewAI, or Google ADK. So teams started building an owned version that required engineering the entire interface layer from scratch. Most teams, however, just settled for shipping the agent as a backend API in a chat box since rendering the UI is only one piece of it. To actually make it work, the interface layer also needed real-time streaming, state kept in sync between agent and UI, conversations that persist across sessions, and reconnection when a user refreshes mid-run. CopilotKit🪁 is now the only open-source framework that actually lets you build your own full-stack Claude-like apps. It decouples the agent from the interface, talking over AG-UI (an open protocol for agent-to-user communication). Being a standard protocol, the frontend never needs to know whether it is talking to a LangGraph or a CrewAI agent. You can change the backend anytime and the UI will never notice. In practice, CopilotKit's interface layer gives several pre-implemented React building blocks that wire the agent directly into the app, like: - generative UI, so the agent renders real components instead of text - chat windows, sidebars, and popups, or a fully headless setup - shared state, so the agent and app stay in sync - human-in-the-loop approvals, where the agent waits before acting - persistent threads that store the whole session, including the agent-user interactions and generated UI, not just text And because that full history is captured, those interactions can feed a self-learning layer that also improves the agent from real usage over time. The interface layer that Anthropic spent years engineering in-house is now literally available to any developer/team. CopilotKit is open-source with 30k+ GitHub stars, and AG-UI, the protocol underneath, is already supported across every major agent framework: LangGraph, CrewAI, Mastra, Google ADK, and more. CopilotKit GitHub repo → (don't forget to star it ⭐ ) If you want to go deeper, I found a detailed breakdown by Shubham Saboo recently on the three Generative UI patterns, with implementation. Read it below.

Avi Chawla

457,881 görüntüleme • 2 ay önce