docs: landing page and nav populated

Author: johnprg

docs/components/react/integrations.tsx

@@ -110,16 +110,72 @@ const IntegrationCard: React.FC<IntegrationCardProps> = ({
   );
 };
 
-const IntegrationsGrid: React.FC = () => {
+interface IntegrationsGridProps {
+  targetPage?: string;
+  suppressDirectToLLM?: boolean;
+}
+
+const IntegrationsGrid: React.FC<IntegrationsGridProps> = ({ targetPage, suppressDirectToLLM = false }) => {
+  const hasTargetPage = (integration: Integration, targetPage: string): boolean => {
+    // Direct to LLM special cases
+    if (integration.title === "Direct to LLM") {
+      return targetPage === "generative-ui" || targetPage === "frontend-actions";
+    }
+    
+    // AutoGen2 missing pages
+    if (integration.title === "AutoGen2") {
+      return targetPage !== "generative-ui" && targetPage !== "shared-state";
+    }
+    
+    // Frameworks that don't have shared-state pages
+    if (targetPage === "shared-state") {
+      return !["LlamaIndex", "Mastra", "AutoGen2", "Agno"].includes(integration.title);
+    }
+    
+    // All other frameworks have the standard pages
+    return true;
+  };
+
+  const getHref = (integration: Integration) => {
+    if (!targetPage) {
+      return integration.href;
+    }
+    
+    // Special cases where certain frameworks have pages in different locations
+    if (integration.title === "Direct to LLM") {
+      if (targetPage === "generative-ui") {
+        return "/direct-to-llm/guides/generative-ui";
+      }
+      if (targetPage === "frontend-actions") {
+        return "/direct-to-llm/guides/frontend-actions";
+      }
+    }
+    
+    // For other frameworks, append the target page
+    return `${integration.href}/${targetPage}`;
+  };
+
+  let filteredIntegrations = integrations;
+  
+  // Filter out Direct to LLM if suppressed
+  if (suppressDirectToLLM) {
+    filteredIntegrations = filteredIntegrations.filter(integration => integration.title !== "Direct to LLM");
+  }
+  
+  // Filter out integrations that don't have the target page
+  if (targetPage) {
+    filteredIntegrations = filteredIntegrations.filter(integration => hasTargetPage(integration, targetPage));
+  }
+
   return (
     <div className="flex flex-row flex-wrap justify-center items-center gap-x-6 gap-y-6 my-8">
-      {integrations.map((integration, index) => (
+      {filteredIntegrations.map((integration, index) => (
         <a 
           key={index}
-          href={integration.href}
+          href={getHref(integration)}
           className="flex flex-col items-center gap-3 text-center no-underline group"
         >
-          <div className={`w-16 h-16 flex items-center justify-center rounded-2xl transition-all duration-200 group-hover:scale-105 ${integration.bgGradient}`}>
+          <div className={`w-12 h-12 flex items-center justify-center rounded-2xl transition-all duration-200 group-hover:scale-105 ${integration.bgGradient}`}>
             {integration.logo}
           </div>
           <span className="text-sm font-medium text-zinc-700 dark:text-zinc-300 group-hover:text-black dark:group-hover:text-white transition-colors duration-200">
@@ -132,3 +188,4 @@ const IntegrationsGrid: React.FC = () => {
 };
 
 export { IntegrationCard, IntegrationsGrid, integrations };
+export type { IntegrationsGridProps };

docs/components/react/quickstart-dropdown.tsx

@@ -7,14 +7,14 @@ export function QuickstartDropdown() {
   const router = useRouter();
 
   const options = [
+    { label: "Direct to LLM", url: "/direct-to-llm/guides/quickstart",  },
     { label: "LangGraph", url: "/coagents/quickstart/langgraph" },
     { label: "Mastra", url: "/mastra/quickstart" },
     { label: "LlamaIndex", url: "/llamaindex/quickstart" },
     { label: "Agno", url: "/agno/quickstart" },
     { label: "CrewAI Flows", url: "/crewai-flows/quickstart/crewai" },
     { label: "CrewAI Crews", url: "/crewai-crews/quickstart/crewai" },
     { label: "AG2", url: "/ag2/quickstart" },
-    { label: "Direct to LLM", url: "/direct-to-llm/guides/quickstart",  },
   ];
 
   const handleSelectChange = (event: ChangeEvent<HTMLSelectElement>) => {

docs/components/react/subdocs-menu.tsx

@@ -49,9 +49,30 @@ export function isActive(
   nested = true,
   root = false
 ): boolean {
-  const isActive =
-    url === pathname || (nested && pathname.startsWith(root ? url : `${url}/`));
-  return isActive;
+  // Exact match
+  if (url === pathname) return true;
+  
+  // For nested matching
+  if (nested) {
+    // Special handling for root URL
+    if (root && url === "/") {
+      return pathname === "/";
+    }
+    
+    // For non-root URLs, check if pathname starts with the URL followed by a slash
+    // This ensures /direct-to-llm/guides/quickstart matches /direct-to-llm/guides/frontend-actions
+    if (url !== "/" && pathname.startsWith(`${url}/`)) {
+      return true;
+    }
+    
+    // Special case for direct-to-llm: if the option URL is /direct-to-llm/guides/quickstart
+    // and the current path is anywhere under /direct-to-llm/, consider it active
+    if (url.includes('/direct-to-llm/') && pathname.startsWith('/direct-to-llm/')) {
+      return true;
+    }
+  }
+  
+  return false;
 }
 
 export interface Option {
@@ -324,7 +345,7 @@ function SubdocsMenuItemDropdown({
   );
 
   // Check if we're on a page that should reset the dropdown
-  const topLevelPages = ["/", "/reference", "/quickstart"];
+  const topLevelPages = ["/", "/reference"];
   const shouldResetDropdown = topLevelPages.some(page => 
     page === "/" ? pathname === "/" : pathname.startsWith(page)
   );

docs/content/docs/(root)/agentic-chat-ui.mdx

@@ -0,0 +1,68 @@
+---
+title: Agentic Chat UI
+icon: "lucide/MessageSquare"
+description: Create intelligent chat interfaces powered by AI agents that can take actions and maintain context.
+---
+import { IntegrationsGrid } from "@/components/react/integrations";
+
+## What is Agentic Chat UI?
+
+Agentic Chat UI is an intelligent chat interface that goes beyond simple text exchange. It's powered by AI agents that can take actions, maintain context, access application state, and provide interactive experiences within the chat interface itself.
+
+<video src="/images/coagents/agentic-chat-ui.mp4" className="rounded-lg shadow-xl" loop playsInline controls autoPlay muted />
+
+Unlike traditional chatbots that only respond with text, agentic chat interfaces can execute functions, display rich content, and create collaborative experiences between users and AI agents.
+
+<Callout title="Ready to Implement Agentic Chat UI?">
+Agentic Chat UI can be implemented with any Agent Framework, with each framework providing different approaches for creating intelligent, action-oriented chat experiences.
+
+**Choose your integration to see framework-specific implementation guides and examples.** 
+<IntegrationsGrid targetPage="agentic-chat-ui" suppressDirectToLLM />
+</Callout>
+
+<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+
+<div>
+
+
+## Key Features
+
+### **Agent-Powered Responses**
+Messages are generated by intelligent agents that understand context and can take appropriate actions.
+
+### **Interactive Message Components**
+Chat messages can contain buttons, forms, visualizations, and other interactive elements.
+
+### **Real-time State Updates**
+Chat interface updates in real-time as agents process information and modify application state.
+
+### **Action Execution**
+Agents can execute both frontend and backend actions directly from chat interactions.
+
+### **Context Persistence**
+Conversation context and agent state persist across sessions and interactions.
+
+### **Multi-modal Communication**
+Support for text, images, files, and custom interactive components within the chat.
+
+</div>
+
+<div>
+
+## When to Use Agentic Chat UI
+
+Consider Agentic Chat UI when you want to:
+
+- **Provide natural language interfaces** for complex applications
+- **Enable task completion** through conversational interactions
+- **Create collaborative experiences** between users and AI
+- **Simplify complex workflows** with guided conversations
+- **Offer contextual help** that understands current application state
+- **Build engaging user experiences** that go beyond traditional forms and menus
+- **Provide accessible interfaces** that work well for users of all technical levels
+
+</div>
+
+</div>
+
+

docs/content/docs/(root)/backend-actions.mdx

@@ -0,0 +1,110 @@
+---
+title: Backend Actions
+icon: "lucide/Server"
+description: Enable AI agents to execute server-side operations, access databases, and integrate with external services.
+---
+import { RocketIcon } from "lucide-react";
+
+## What are Backend Actions?
+
+Backend Actions are server-side functions that AI agents can call to perform operations that require backend resources, such as database queries, API calls, file operations, or complex computations. They extend agent capabilities beyond the frontend to access the full power of your server infrastructure.
+
+Unlike frontend actions that modify UI state, backend actions handle data processing, external integrations, and operations that require server-side security or resources.
+
+<Callout>
+**Ready to get started with Backend Actions?**
+
+  <div className="flex items-center gap-6">
+    <div className="flex-shrink-0">
+      <a 
+        href="/direct-to-llm/guides/backend-actions"
+        className="flex flex-col items-center gap-1 text-center no-underline group"
+      >
+        <div className="w-12 h-12 flex items-center justify-center rounded-2xl transition-all duration-200 group-hover:scale-105 bg-gradient-to-b from-green-700 to-green-400 text-green-100">
+          <RocketIcon className="w-8 h-8" />
+        </div>
+        <span className="text-sm font-medium text-zinc-700 dark:text-zinc-300 group-hover:text-black dark:group-hover:text-white transition-colors duration-200">
+          Direct to LLM
+        </span>
+      </a>
+    </div>
+    <div className="flex-1">
+      <p className="text-base leading-relaxed mb-4">
+        Backend Actions are primarily designed for Direct to LLM applications, where you need explicit server-side functions that the LLM can call. CopilotKit provides multiple implementation approaches.
+      </p>
+    </div>
+  </div>
+</Callout>
+
+<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+
+<div>
+
+## Common Backend Action Patterns
+
+### **Database Operations**
+Actions that create, read, update, or delete data from databases, often with complex queries and relationships.
+
+### **API Integrations**
+Actions that call external APIs, process responses, and integrate data from third-party services.
+
+### **File Operations**
+Actions that handle file uploads, downloads, processing, or storage operations on the server.
+
+### **Authentication and Authorization**
+Actions that manage user authentication, permissions, and access control for sensitive operations.
+
+### **Data Processing**
+Actions that perform data transformation, analysis, aggregation, or complex computations.
+
+### **Workflow Orchestration**
+Actions that coordinate multiple backend services or trigger complex business processes.
+
+</div>
+
+<div>
+
+## Types of Backend Actions
+
+### **Synchronous Actions**
+Actions that execute and return results immediately, suitable for quick database queries or simple API calls.
+
+### **Asynchronous Actions**
+Actions that handle long-running operations, often with progress tracking and completion notifications.
+
+### **Streaming Actions**
+Actions that return data progressively, useful for real-time updates or large data sets.
+
+### **Batch Actions**
+Actions that process multiple items or operations together for efficiency.
+
+### **Transactional Actions**
+Actions that ensure data consistency across multiple operations, with rollback capabilities on failure.
+
+</div>
+
+</div>
+
+## When to Use Backend Actions
+
+Consider Backend Actions when agents need to:
+
+- **Access sensitive data** that shouldn't be exposed to the frontend
+- **Perform complex queries** across multiple data sources
+- **Integrate with external services** requiring server-side authentication
+- **Execute business logic** that involves multiple systems
+- **Process large amounts of data** efficiently
+- **Maintain data consistency** across operations
+- **Handle file operations** or media processing
+- **Implement security controls** and access management
+
+### **Agent Framework Applications**
+
+Agent frameworks (LangGraph, CrewAI, LlamaIndex, etc.) typically handle backend operations through their native agent architectures rather than explicit backend actions. These frameworks provide their own mechanisms for:
+
+- Tool calling and external service integration
+- Database access and data manipulation  
+- Complex workflow orchestration
+- Multi-step reasoning and planning
+
+For agent-based applications, backend functionality is usually implemented as **agent tools** or **framework-specific integrations** rather than CopilotKit backend actions. 

docs/content/docs/(root)/frontend-actions.mdx

@@ -0,0 +1,34 @@
+---
+title: Frontend Actions
+icon: "lucide/Wrench"
+description: Create frontend actions and use them within your agent.
+---
+import { IntegrationsGrid } from "@/components/react/integrations";
+
+<video src="/images/frontend-actions-demo.mp4" className="rounded-lg shadow-xl" loop playsInline controls autoPlay muted />
+<Callout>
+    This video shows the [coagents starter](https://github.com/CopilotKit/CopilotKit/tree/main/examples/coagents-starter) repo with the [implementation](#implementation) section applied to it!
+</Callout>
+
+## What is this?
+
+Frontend actions are powerful tools that allow your AI agents to directly interact with and update your application's user interface. Think of them as bridges that connect your agent's decision-making capabilities with your frontend's interactive elements.
+
+## When should I use this?
+
+Frontend actions are essential when you want to create truly interactive AI applications where your agent needs to:
+
+- Dynamically update UI elements
+- Trigger frontend animations or transitions
+- Show alerts or notifications
+- Modify application state
+- Handle user interactions programmatically
+
+Without frontend actions, agents are limited to just processing and returning data. By implementing frontend actions, you can create rich, interactive experiences where your agent actively drives the user interface.
+
+<Callout title="Ready to Implement Frontend Actions?">
+Frontend actions can be implemented with any Agent Framework, with each framework providing different approaches for connecting agents to your UI.
+
+**Choose your integration to see framework-specific implementation guides and examples.** 
+<IntegrationsGrid targetPage="frontend-actions" />
+</Callout>