Full-Stack AI Agent Template

The template includes a sophisticated AI Chat interface designed for real-time agent interaction. Key features include:

• Real-time Streaming: Responses are streamed over WebSockets.
• Tool Call Rendering: Each tool call is rendered as a purpose-built card (e.g., run_python shows code and stdout/results in a collapsible card).
• Plan & Tasks: A sticky checklist that updates live as the agent progresses through steps.
• Subagents: A live feed and side panel showing the status and messages of individual subagents.
• Interactive Charts: Inline rendering of bar, area, line, pie, and scatter charts.
• User Interaction: An ask-user tool that allows the agent to pause and ask clarifying questions, maintaining a full transcript.
• Reasoning & History: A clean view for agent reasoning and a history of answered questions for long agent turns.

The template provides a pre-wired full-stack foundation for AI applications, including:

• Auth: JWT access and refresh tokens, password hashing, optional OAuth, and magic links.
• Billing: Stripe integration including checkout, customer portal, subscriptions, credits, and usage metering.
• Teams: Organization management, invitations, and role-based access control (RBAC).
• AI Agents: Support for various frameworks such as PydanticAI, LangChain, LangGraph, and DeepAgents.
• RAG (Retrieval-Augmented Generation): Support for vector databases like Milvus, Qdrant, Chroma, or pgvector, with synchronization for Google Drive and S3.
• Observability: Structured logging, request IDs, and integration with Logfire or LangSmith.

The Full-Stack AI Agent Template is a production-ready project generator that scaffolds a complete application consisting of a FastAPI backend and a Next.js 15 frontend. It is designed for building AI-driven applications with built-in support for AI agents, Retrieval-Augmented Generation (RAG), and enterprise-grade features.

Core Capabilities:

• AI Agent Frameworks: Supports PydanticAI, PydanticDeep, LangChain, LangGraph, and DeepAgents.
• RAG Pipelines: Integrates with Milvus, Qdrant, pgvector, and ChromaDB.
• Real-time UI: Uses WebSocket streaming for real-time chat interfaces.
• Enterprise Features: Includes JWT/OAuth authentication, an admin panel, Celery for background tasks, and support for Docker and Kubernetes.
• Conversation Sharing: Enables direct sharing, public links, and an admin browser for conversations.

The template provides a complete user management and organizational structure:

• Authentication: Supports Google OAuth and email/password login with HTTP-only cookie sessions. Includes registration with terms acceptance.
• User Dashboard: Provides usage timelines, recent activity, and stat cards (available in light and dark themes).
• Workspaces & Teams: Supports multiple organizations (workspaces) with different plan tiers and roles. Includes team management features like member lists and invite functionality.
• Knowledge Bases (RAG): Management of RAG collections, including document uploads and connectors for Google Drive and S3.

The template provides a comprehensive billing suite:

• Billing Overview: Displays plan details, seat counts, and storage usage. Includes a link to the Stripe Customer Portal.
• Usage Tracking: Visualizes daily credits spent and call counts, including a breakdown of token usage by model.
• Credits Management: Shows current balance and an immutable transaction ledger for all credit movements.

The frontend is built using a modern React-based stack optimized for performance and type safety:

• Framework: Next.js 15.x (using App Router)
• UI Library: React 19.x
• Type Safety: TypeScript 5.x
• Styling: Tailwind CSS 4.x
• State Management: Zustand 5.x (client state) and TanStack Query 5.x (server state)
• Runtime/Package Manager: Bun

The frontend is built with Next.js 15 (App Router), React 19, TypeScript, and Tailwind CSS. The directory structure is as follows:

• src/app/: Next.js App Router routes (all routes are locale-prefixed, e.g., /[locale]/...).
• src/components/: React components including chat, auth, dashboard, marketing, and UI elements.
• src/hooks/: Custom React hooks like useChat and useWebSocket.
• src/lib/: API clients, query keys, and utility helpers.
• src/stores/: State management using Zustand.
• src/types/: Shared TypeScript type definitions.
• src/i18n.ts: Configuration for next-intl.
• src/middleware.ts: Handles locale routing and authentication guards.

The generated AI Chat interface uses WebSockets for streaming and provides specialized UI components for agentic workflows:

• Plan & Tasks: A sticky checklist above the composer that updates live as the agent works, including an inline reasoning indicator.
• Subagents: A live feed and side panel showing the status, streamed messages, and final results of delegated subagents.
• Tool Cards: Instead of raw JSON, tools render purpose-built cards:
  • create_chart: Renders interactive, theme-aware bar, area, line, pie, or scatter charts.
  • run_python: Shows executed code and its output (or error) in a collapsible card.
  • ask_user: Allows the agent to pause for user clarification and resume once answered.
• Reasoning & History: Includes a clean thinking view and a history of answered questions to maintain readability during long turns.