docs: update landing pages for docs and coagents

Signed-off-by: Tyler Slaton <tyler@copilotkit.ai>

docs/app/(home)/[[...slug]]/page.tsx

@@ -21,11 +21,14 @@ import { PropertyReference } from "@/components/react/property-reference";
 import { getImageMeta } from "fumadocs-ui/og";
 import { InsecurePasswordProtected } from "@/components/react/insecure-password-protected";
 import { LinkToCopilotCloud } from "@/components/react/link-to-copilot-cloud";
+import { Accordions, Accordion} from "fumadocs-ui/components/accordion";
 
 const mdxComponents = {
   ...defaultMdxComponents,
   InsecurePasswordProtected: InsecurePasswordProtected,
   LinkToCopilotCloud: LinkToCopilotCloud,
+  Accordions: Accordions,
+  Accordion: Accordion,
   Tabs: Tabs,
   Tab: Tab,
   Steps: Steps,

docs/app/coagents-0.3-banner.tsx

@@ -9,7 +9,7 @@ export function CoagentsV0_3Banner() {
 
   if (isCoagentsPath) {
     return (
-      <div className="bg-gradient-to-r from-indigo-900 via-blue-800 to-indigo-900 text-primary-foreground px-4 py-3 text-center relative">
+      <div className="bg-gradient-to-r from-indigo-900 via-blue-800 to-indigo-900 text-white px-4 py-3 text-center relative absolute">
         <p className="font-medium">
           <span className="mr-2 font-bold">CoAgents v0.3</span>
           Big quality of life improvements coming soon!

docs/components/layout/top-bar.tsx

@@ -24,7 +24,7 @@ export function TopBar() {
 
 export function SearchToggle() {
   return (
-    <div onClick={toggleSearch} className="cursor-pointer h-10 w-[240px] inline-flex items-center gap-2 border bg-fd-secondary/50 p-1.5 text-sm text-fd-muted-foreground transition-colors hover:bg-fd-accent hover:text-fd-accent-foreground rounded-lg max-md:hidden">
+    <div onClick={toggleSearch} className="cursor-pointer h-10 w-[240px] inline-flex items-center gap-2 border bg-fd-secondary/50 p-1.5 text-sm text-fd-muted-foreground transition-colors hover:bg-fd-accent hover:text-fd-accent-foreground rounded-md max-md:hidden">
       <SearchIcon className="w-4 h-4" />
       Search
       <div className="ms-auto inline-flex gap-0.5">

docs/components/react/cta-cards.tsx

@@ -0,0 +1,51 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import Link from "next/link";
+import { IconType } from "react-icons";
+
+interface CTACardProps {
+  icon: IconType;
+  title: string;
+  description: string;
+  href: string;
+  iconBgColor?: string;
+}
+
+interface CTACardsProps {
+  cards: CTACardProps[];
+  columns?: 1 | 2 | 3 | 4;
+}
+
+export function CTACard({ icon: Icon, title, description, href, iconBgColor = "bg-indigo-500" }: CTACardProps) {
+  return (
+    <Link href={href} className="no-underline">
+      <Card className="transition-transform hover:scale-105 cursor-pointer shadow-xl shadow-indigo-500/20 h-full">
+        <CardHeader>
+          <div className="flex items-center gap-3">
+            <div className={`flex items-center justify-center ${iconBgColor} rounded-full w-10 h-10`}>
+              <Icon className="h-6 w-6 text-white"/>
+            </div>
+            <CardTitle className="text-md">{title}</CardTitle>
+          </div>
+          <CardDescription className="text-md pt-4">{description}</CardDescription>
+        </CardHeader>
+      </Card>
+    </Link>
+  );
+}
+
+export function CTACards({ cards, columns = 3 }: CTACardsProps) {
+  const lastItemClass = cards.length % columns !== 0 ? `xl:col-span-${columns - (cards.length % columns) + 1}` : '';
+
+  return (
+    <div className={`grid grid-cols-1 gap-y-8 gap-x-4 xl:grid-cols-${columns} py-6`}>
+      {cards.map((card, index) => (
+        <div
+          key={index}
+          className={index === cards.length - 1 ? lastItemClass : ''}
+        >
+          <CTACard {...card} />
+        </div>
+      ))}
+    </div>
+  );
+}

docs/components/react/examples-carousel.tsx

@@ -0,0 +1,222 @@
+"use client"
+
+import { Card, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Frame } from "@/components/react/frame";
+import { LuBookOpen, LuBanknote, LuPlane, LuFileSpreadsheet, LuCode, LuExternalLink, LuLightbulb } from "react-icons/lu";
+import { badgeVariants } from "@/components/ui/badge";
+import Link from "next/link";
+import { cn } from "@/lib/utils";
+import { Tabs, Tab } from "@/components/react/tabs";
+import { YouTubeVideo } from "./youtube-video";
+
+interface CarouselExample {
+  icon: React.ElementType;
+  title: string;
+  description: string;
+  media: {
+    type: 'video' | 'image' | 'youtube';
+    src: string;
+  };
+  links: {
+    source?: string;
+    demo?: string;
+    tutorial?: string;
+  };
+}
+
+interface ExamplesCarouselProps {
+  examples?: CarouselExample[];
+}
+
+const badgeStyles = cn(badgeVariants({ variant: "outline" }), "bg-indigo-500 hover:bg-indigo-600 text-white no-underline focus:ring-1 focus:ring-indigo-500");
+
+export function ExamplesCarousel({ examples = LandingExamples }: ExamplesCarouselProps) {
+  return (
+    <Tabs items={
+      examples.map((example) => {
+        const Icon = example.icon;
+        return {
+          value: example.title,
+          icon: <Icon className="w-4 h-4" />
+        }
+      })
+    }>
+      {examples.map((example, index) => {
+        const Icon = example.icon;
+        return (
+          <Tab key={index} value={example.title}>
+            <Card className="border-none shadow-none">
+              <CardHeader>
+                <CardTitle className="flex items-center text-xl">
+                  <Icon className="mr-2" />
+                  {example.title}
+                </CardTitle>
+                <div className="flex flex-wrap gap-2 my-2 pt-2">
+                  {example.links.source && (
+                    <Link 
+                      href={example.links.source}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className={badgeStyles}
+                    >
+                      <LuCode className="mr-2 h-3.5 w-3.5" />
+                      Source
+                    </Link>
+                  )}
+                  {example.links.demo && (
+                    <Link 
+                      href={example.links.demo}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className={badgeStyles}
+                    >
+                      <LuExternalLink className="mr-2 h-3.5 w-3.5" />
+                      Demo
+                    </Link>
+                  )}
+                  {example.links.tutorial && (
+                    <Link 
+                      href={example.links.tutorial}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className={badgeStyles}
+                    >
+                      <LuBookOpen className="mr-2 h-3.5 w-3.5" />
+                      Tutorial
+                    </Link>
+                  )}
+                </div>
+                <CardDescription className="text-base pt-6 text-primary">
+                  {example.description}
+                </CardDescription>
+                <div className="w-full">
+                  {example.media.type === 'video' && (
+                    <video 
+                      autoPlay 
+                      loop 
+                      muted 
+                      controls 
+                      playsInline
+                      src={example.media.src}
+                      className="rounded-2xl shadow-xl border w-full h-auto"
+                    />
+                  )}
+                  {example.media.type === 'image' && (
+                    <Frame className="rounded-2xl shadow-xl">
+                      <img src={example.media.src} className="w-full h-auto" />
+                    </Frame>
+                  )}
+                  {example.media.type === 'youtube' && (
+                    <div className="flex justify-center mt-6">
+                      <YouTubeVideo videoId={example.media.src} />
+                    </div>
+                  )}
+                </div>
+              </CardHeader>
+            </Card>
+          </Tab>
+        );
+      })}
+    </Tabs>
+  );
+}
+
+export const LandingExamples: CarouselExample[] = [
+  {
+    icon: LuFileSpreadsheet,
+    title: "Spreadsheet Copilot",
+    description: "A powerful spreadsheet assistant that helps users analyze data, create formulas, and generate insights through natural language interaction.",
+    media: {
+      type: "video",
+      src: "/images/examples/spreadsheets.mp4"
+    },
+    links: {
+      source: "https://github.com/CopilotKit/demo-spreadsheet",
+      demo: "https://spreadsheet-demo-tau.vercel.app/",
+    }
+  },
+  {
+    icon: LuBanknote,
+    title: "Banking Assistant (SaaS Copilot)",
+    description: "An AI-powered banking interface that helps users manage transactions, analyze spending patterns, and get personalized financial advice.",
+    media: {
+      type: "video",
+      src: "/images/examples/banking.mp4"
+    },
+    links: {
+      source: "https://github.com/CopilotKit/demo-banking",
+      demo: "https://brex-demo-temp.vercel.app/",
+    }
+  },
+  {
+    icon: LuPlane,
+    title: "Agent-Native Travel Planner (ANA)",
+    description: "Interactive travel planning assistant that helps users discover destinations, create itineraries, and manage trip details with natural language.",
+    media: {
+      type: "video",
+      src: "/images/coagents/tutorials/ai-travel-app/demo.mp4"
+    },
+    links: {
+      source: "https://github.com/CopilotKit/CopilotKit/tree/main/examples/coagents-travel?ref=travel-tutorial",
+      demo: "https://examples-coagents-ai-travel-app.vercel.app/",
+      tutorial: "/coagents/tutorials/ai-travel-app"
+    }
+  },
+  {
+    icon: LuBookOpen,
+    title: "Agent-Native Research Canvas (ANA)",
+    description: "An intelligent research assistant that helps users analyze academic papers, synthesize information across multiple sources, and generate comprehensive research summaries.",
+    media: {
+      type: "video",
+      src: "/images/examples/research.mp4"
+    },
+    links: {
+      source: "https://github.com/CopilotKit/CopilotKit/blob/main/examples/coagents-research-canvas/readme.md",
+      demo: "https://examples-coagents-research-canvas-ui.vercel.app/",
+      tutorial: "/coagents/videos/research-canvas"
+    }
+  }
+];
+
+export const CoAgentsExamples: CarouselExample[] = [
+  {
+    icon: LuLightbulb,
+    title: "Introduction",
+    description: "Hear from the CEO of CopilotKit, Atai Barkai, and learn how CoAgents are paving the way for the next generation of AI-native apps.",
+    media: {
+      type: "youtube",
+      src: "tVjVYJE-Nic"
+    },
+    links: {
+      demo: "https://examples-coagents-research-canvas-ui.vercel.app/",
+    }
+  },
+  {
+    icon: LuPlane,
+    title: "Agent-Native Travel Planner (ANA)",
+    description: "Interactive travel planning assistant that helps users discover destinations, create itineraries, and manage trip details with natural language.",
+    media: {
+      type: "video",
+      src: "/images/coagents/tutorials/ai-travel-app/demo.mp4"
+    },
+    links: {
+      source: "https://github.com/CopilotKit/CopilotKit/tree/main/examples/coagents-travel?ref=travel-tutorial",
+      demo: "https://examples-coagents-ai-travel-app.vercel.app/",
+      tutorial: "/coagents/tutorials/ai-travel-app"
+    }
+  },
+  {
+    icon: LuBookOpen,
+    title: "Agent-Native Research Canvas (ANA)",
+    description: "An intelligent research assistant that helps users analyze academic papers, synthesize information across multiple sources, and generate comprehensive research summaries.",
+    media: {
+      type: "video",
+      src: "/images/examples/research.mp4"
+    },
+    links: {
+      source: "https://github.com/CopilotKit/CopilotKit/blob/main/examples/coagents-research-canvas/readme.md",
+      demo: "https://examples-coagents-research-canvas-ui.vercel.app/",
+      tutorial: "/coagents/videos/research-canvas"
+    }
+  }
+]

docs/components/react/frame.tsx

@@ -6,7 +6,7 @@ export function Frame({
   description,
 }: {
   children: React.ReactNode;
-  className: string;
+  className?: string;
   description?: string;
 }) {
   return (

docs/components/react/link-to-copilot-cloud.tsx

@@ -27,7 +27,7 @@ export function LinkToCopilotCloud({
   if (!isClient) {
     return null;
   }
-  const url = new URL(`https://cloud.copilotkit.ai`);
+  const url = new URL(`https://go.copilotkit.ai/copilot-cloud-button-docs`);
   url.searchParams.set("ref", "docs");
 
   const sessionId = posthog.get_session_id();
@@ -43,8 +43,8 @@ export function LinkToCopilotCloud({
   let cn = `${className}`;
 
   if (asButton) {
-    cn = "text-indigo-800 dark:text-indigo-300 ring-1 ring-indigo-200 dark:ring-indigo-900 text-sm items-center bg-gradient-to-r from-indigo-200/50 to-purple-200/80 dark:from-indigo-900/40 dark:to-purple-900/50 flex p-2 px-4 rounded-md ";
-    cn += "transition-all duration-100 hover:ring-2 hover:ring-indigo-400 hover:dark:text-indigo-200";
+    cn = "text-indigo-800 dark:text-indigo-300 ring-1 ring-indigo-200 dark:ring-indigo-900 text-sm items-center bg-gradient-to-r from-indigo-200/50 to-purple-200/80 dark:from-indigo-900/40 dark:to-purple-900/50 flex p-2 px-4";
+    cn += "transition-all duration-100 hover:ring-2 hover:ring-indigo-400 hover:dark:text-indigo-200 shadow-2xl rounded-lg";
   } else {
     cn = "_text-primary-600 decoration-from-font underline [text-underline-position:from-font]";
   }

docs/components/react/socials.tsx

@@ -29,7 +29,7 @@ export function Socials({ className }: SocialProps) {
             <Button
                 variant="outline"
                 asChild
-                className="h-10 text-muted-foreground hover:bg-indigo-500 hover:text-white"
+                className="h-10 text-muted-foreground hover:bg-indigo-500 hover:text-white rounded-md shadow"
             >
                 <Link href="https://github.com/CopilotKit/CopilotKit/issues/new/choose" target="_blank" rel="noopener noreferrer">
                     <FaEdit className="w-4 h-4 mr-2" />

docs/components/react/tabs.tsx

@@ -75,8 +75,8 @@ export function Tabs({ items, children, defaultValue, groupId, persist, ...props
 
   return (
     <TabsPrimitive.Root className="border rounded-md" value={value} onValueChange={handleValueChange} {...props}>
-      <ScrollArea className="w-full bg-secondary rounded-md rounded-b-none relative">
-        <TabsPrimitive.List className="px-4 py-2.5 flex">
+      <ScrollArea className="w-full rounded-md rounded-b-none relative bg-secondary dark:bg-secondary/40 border-b">
+        <TabsPrimitive.List className="px-4 py-3 flex">
           {normalizedItems.map((item) => (
             <TabsPrimitive.Trigger
               key={item.value}
@@ -92,7 +92,7 @@ export function Tabs({ items, children, defaultValue, groupId, persist, ...props
               {item.value}
             </TabsPrimitive.Trigger>
           ))}
-          <ScrollBar orientation="horizontal"/>
+          <ScrollBar orientation="horizontal" className=""/>
         </TabsPrimitive.List>
       </ScrollArea>
       {children}

docs/components/react/youtube-video.tsx

@@ -24,7 +24,8 @@ export function YouTubeVideo({
   return (
     <YouTube
       videoId={videoId}
-      className="max-w-[600px] w-full rounded-lg"
+      className="w-full h-[425px] rounded-lg"
+      iframeClassName="rounded-2xl w-full h-full shadow-xl border"
       opts={opts}
       onReady={onPlayerReady}
     />

docs/components/ui/badge.tsx

@@ -0,0 +1,36 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  )
+}
+
+export { Badge, badgeVariants }

docs/components/ui/button.tsx

@@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       variant: {

docs/components/ui/card.tsx

@@ -0,0 +1,76 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-md border bg-card text-card-foreground shadow",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

docs/content/docs/(root)/index.mdx

@@ -1,57 +1,110 @@
 ---
-title: What is CopilotKit?
-description: "Build production-ready Copilots into your product in days, not months. Customize effortlessly."
+title: CopilotKit
+description: "Build production-ready Copilots and Agents effortlessly."
 icon: "lucide/Lightbulb"
 ---
-import { LinkIcon } from "lucide-react";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { ImageZoom } from 'fumadocs-ui/components/image-zoom';
+import { ExamplesCarousel } from "@/components/react/examples-carousel";
+import { CTACards } from "@/components/react/cta-cards";
+import { YouTubeVideo } from "@/components/react/youtube-video";
 
-Build deeply-integrated AI assistants & agents which are designed to work alongside your users inside applications.
-End-to-end systems integrations with deep customizability and support for the leading LLM ecosystem solutions.
+import { MdMessage } from "react-icons/md";
+import { TbSparkles } from "react-icons/tb";
+import { SiLangchain } from "react-icons/si";
 
-<img src="/images/animated-banner.gif" className="rounded-2xl" />
+# Build AI-Powered Experiences in Minutes
 
-<br/>
+CopilotKit is your secret weapon for shipping production-ready AI assistants. Whether you need a simple chatbot or a complex multi-agent system, we've got you covered with battle-tested components and powerful integrations.
 
-## Key Features
+## Choose Your Path
 
-<img src="/images/architecture-diagram.png" className="rounded-2xl" />
+Jump right in with one of our core experiences.
 
-- [**In-App AI Chatbot**:](/reference/components/chat/CopilotPopup) Plug and play AI chatbot components, including support for headless UI.
-- [**Copilot Readable State**:](/reference/hooks/useCopilotReadable) Enables Copilots to read and understand the application state.
-- [**Copilot Actions**:](/reference/hooks/useCopilotAction) Copilots can perform actions in the application.
-- [**Generative UI**:](/guides/generative-ui) Render any component in the copilot chat interface.
-- [**Copilot Textarea**:](/reference/components/CopilotTextarea) Powerful AI autocompletion as a drop-in replacement for any textarea.
-- [**AI Autosuggestions**:](/reference/hooks/useCopilotChatSuggestions) AI-powered autosuggestions in your AI chat interface.
-- [**Copilot Tasks**:](/reference/classes/CopilotTask) Let your copilots take actions proactively based on application state.
-- ... and much more!
+<CTACards
+  cards={[
+    {
+      icon: MdMessage,
+      title: "AI Chats",
+      description: "Build a simple and powerful AI chat interface into your product.",
+      href: "/quickstart"
+    },
+    {
+      icon: TbSparkles,
+      title: "End-to-End Copilots",
+      description: "Allow AI Copilots to take action across your entire application, from end to end.",
+      href: "/tutorials/ai-todo-app/overview"
+    },
+    {
+      icon: SiLangchain,
+      title: "CoAgents",
+      description: "Build rich agentic LangGraph experiences into your product for when the default runloop is not enough.",
+      href: "/coagents"
+    }
+  ]}
+/>
 
-Get started by [following our simple tutorial](/tutorials/ai-todo-app/overview).
+## Build Fast, Customize Endlessly
+Build in minutes with production-ready components, then make them yours. From drop-in UI to fully 
+custom implementations, CopilotKit scales from prototype to production without compromising control.
 
-## Next Steps
+<img src="/images/animated-banner.gif" className="rounded-3xl"/>
 
-<Cards>
-  <Card
-    title="Quickstart"
-    description="Get up and running with CopilotKit in a few minutes."
-    href="/quickstart"
-    icon={<LinkIcon />}
-  />
-  <Card
-    title="API Reference"
-    description="Check out the full API reference for CopilotKit."
-    href="/reference"
-    icon={<LinkIcon />}
-  />
-  <Card
-    title="Tutorial: AI Todo App"
-    description="Follow a step-by-step tutorial to build an AI-powered todo app."
-    href="/tutorials/ai-todo-app/overview"
-    icon={<LinkIcon />}
-  />
-  <Card
-    title="CoAgents (LangGraph)"
-    description="Check out our section about CoAgents, our approach to building agentic copilots and experiences."
-    href="/coagents"
-    icon={<LinkIcon />}
-  />
-</Cards>
+## See It In Action
+Check out some things that we've built with CopilotKit!
+
+<div className="pb-6"/>
+<ExamplesCarousel />
+
+## Common Questions
+We've got answers to some common questions!
+
+<Accordions>
+  <Accordion title="What are the main features of CopilotKit?">
+    ### Batteries included chat components
+    Beautiful, powerful and customizable chat components just an import away.
+    | | |
+    |---------|-------------|
+    | [**Chat**](/reference/components/chat/CopilotChat) | Simple and powerful chat interface |
+    | [**Pop-up**](/reference/components/chat/CopilotPopup) | The Chat component in a pop-up format |
+    | [**Sidebar**](/reference/components/chat/CopilotSidebar) | The Chat component in a sidebar format |
+    | [**Copilot Textarea**](/reference/components/CopilotTextarea) | Powerful AI autocompletion as a drop-in replacement for any textarea |
+    | [**Headless**](/guides/custom-look-and-feel/customize-built-in-ui-components) | Full customization of the chat interfaces |
+
+    ### Deeply integrated Copilots
+    Give Copilots the ability to take actions directly in your application.
+    |  |  |
+    |---------|-------------|
+    | [**Copilot Readable State**](/reference/hooks/useCopilotReadable) | Enables Copilots to read and understand the application state |
+    | [**Copilot Actions**](/reference/hooks/useCopilotAction) | Copilots can perform actions in the application |
+    | [**Generative UI**](/guides/generative-ui) | Render any component in the copilot chat interface |
+    | [**AI Autosuggestions**](/reference/hooks/useCopilotChatSuggestions) | AI-powered autosuggestions in your AI chat interface |
+    | [**Copilot Tasks**](/reference/classes/CopilotTask) | Let your copilots take actions proactively based on application state |
+
+    ### Rich agentic experiences
+    Integrate your LangGraph agents into your product with ease.
+    | |  |
+    |---------|-------------|
+    | [**Deep support for LangGraph**](/coagents/quickstart) | Bring your LangGraph agents directly into your product |
+    | [**Human-in-the-loop**](/coagents/react-ui/hitl) | Allow your users to work with your agents to solve complex problems |
+    | [**Shared state**](/coagents/react-ui/in-app-agent-read) | Render the state of your LangGraph agents with less than 10 lines of code |
+    | [**Multi-agent**](/coagents/concepts/multi-agent-flows) | Build multi-agent experiences with ease |
+  </Accordion>
+  <Accordion title="How does it all work?">
+    Great question! CopilotKit has three main components:
+    1. **CopilotKit UI**: The UI components that you use to build your Copilots and Agents.
+    2. **CopilotKit Runtime**: The runtime that you use to build your Copilots and Agents. This serves as the backend for your Copilots and Agents.
+    3. **CopilotKit SDK**: In more complex applications, you'll use the SDK to deeply integrate CopilotKit into your agents.
+
+
+    ### Architecture
+    Looking for even more detail? Checkout this diagram below or start learning with our [concept guides](/coagents/concepts/agentic-copilots).
+    <ImageZoom src="/images/architecture-diagram.png" className="rounded-2xl" width={1000} height={1000}/>
+  </Accordion>
+  <Accordion title="Can I use any LLM with CopilotKit?">
+    Yes! CopilotKit supports most LLMs, including OpenAI, Anthropic, Google, and more. In addition, you can use any LLM that is supported by LangGraph or
+    LangChain.
+
+    For more information, checkout our documentation on [bringing your own LLM](/guides/bring-your-own-llm).
+  </Accordion>
+</Accordions>

docs/content/docs/coagents/index.mdx

@@ -1,7 +1,7 @@
 ---
-title: What are CoAgents? (Public Beta)
+title: CoAgents (Public Beta)
 icon: "lucide/Lightbulb"
-description: Everything you need to build Agent-Native applications powered by CopilotKit & LangGraph. The building blocks for the next generation of AI-native apps.
+description: Be a part of the next generation of AI-native apps, powered by CopilotKit & LangGraph.
 ---
 
 import { BiSolidMessage as TextIcon } from "react-icons/bi";
@@ -15,9 +15,17 @@ import {
   CoAgentsFeatureRender,
 } from "@/components/react/coagents/coagents-features.tsx";
 import { DynamicContentWrapper } from "@/components/react/dynamic-content-wrapper";
+import { ExamplesCarousel } from "@/components/react/examples-carousel";
+import { LuPlane, LuBookOpen, LuLightbulb, LuLayoutTemplate, LuBrainCog, LuUserCog, LuWand2, LuPlay} from "react-icons/lu";
+import { CoAgentsExamples } from "@/components/react/examples-carousel";
+import { CTACards } from "@/components/react/cta-cards";
+import { FaSync } from "react-icons/fa";
+import { Socials } from "@/components/react/socials";
 
+# Build Next-Gen AI Apps with Agents
+Unleash the power of **Agent-Native Applications**, the next evolution in AI, with CoAgents. Just like Replit Agent, v0, and OpenAI's Canvas, you can now create intelligent apps powered by LangGraph agents that think, adapt, and collaborate with users in real-time.
 
-<Frame className="mt-0 mb-12">
+<Frame className="mt-0 mb-6">
   <img
     src="/images/CoAgents.gif"
     alt="CoAgents demonstration"
@@ -25,59 +33,102 @@ import { DynamicContentWrapper } from "@/components/react/dynamic-content-wrappe
   />
 </Frame>
 
-## Build Agent-Native Applications with CoAgents
+## Supercharge your app with the power of Agents
+Everything you need to build mind-blowing AI experiences, right out of the box.
 
-A powerful new wave of Agent-Native Applications has emerged based on verticalized AI agents & agent-native UX (Replit Agent, v0, OpenAI’s Canvas, etc). **CoAgents provide everything you need to deeply integrate LangGraph agents into react applications-
-and build such Agent-Native applications or agentic copilots.**
+<CTACards
+  columns={2}
+  cards={[
+    {
+      icon: FaSync,
+      title: "Seamless State Sync",
+      description: "Your app and agent stay perfectly in sync with just one line of code. What your app knows, your agent knows - instantly.",
+      href: "/coagents/react-ui/in-app-agent-read",
+    },
+   {
+      icon: LuLayoutTemplate,
+      title: "Agentic Generative UI",
+      description: "Create UI that updates in real-time based on your agent's thinking. Build trust through transparency.",
+      href: "/coagents/chat-ui/render-agent-state"
+    },
+    {
+      icon: LuBrainCog,
+      title: "Intermediate Agent State",
+      description: "Peek into your agent's process as it works. Watch progress form in real-time, creating engaging and transparent experiences.",
+      href: "/coagents/advanced/intermediate-state-streaming",
+    },
+    {
+      icon: LuWand2,
+      title: "Realtime Frontend Actions",
+      description: "Give your agent the ability to take action in your application with context-aware frontend & backend actions. Seamless integration, zero hassle.",
+      href: "/coagents/advanced/copilotkit-state",
+    },
+    {
+      icon: LuUserCog,
+      title: "Human-in-the-Loop",
+      description: "Set smart checkpoints where humans can guide your agents. Perfect for when you need that human touch.",
+      href: "/coagents/chat-ui/hitl",
+    },
+  ]}
+/>
 
-**See an introduction below:**
+## CoAgents in action
+See **CoAgents** in action with some videos and examples we've made to demonstrate their power.
 
-<div className="flex justify-center my-12">
-  <YouTubeVideo videoId="tVjVYJE-Nic" defaultPlaybackRate={1.0} />
-</div>
+<ExamplesCarousel examples={CoAgentsExamples} />
 
-**We build this example step-by-step in this tutorial:**
-<div className="flex justify-center my-12">
-  <YouTubeVideo videoId="0b6BVqPwqA0" defaultPlaybackRate={1.0} />
-</div>
+## Ready to get started?
+Get started with CoAgents in as little as 5 minutes with one of our guides or tutorials.
 
-<Link
-  href="https://github.com/CopilotKit/CopilotKit/blob/main/examples/coagents-research-canvas/readme.md"
-  className="text-primary-600 decoration-from-font underline [text-underline-position:from-font]"
->
-  Check out Research Canvas demo, built with CoAgents
-</Link>
+<CTACards
+  columns={3}
+  cards={[
+    {
+      icon: LuPlay,
+      title: "Quickstart",
+      description: "Learn how to build your first CoAgent in 5 minutes.",
+      href: "/coagents/quickstart",
+    },
+    {
+      icon: LuPlane,
+      title: "Travel Agent",
+      description: "Learn how to build an agent-native travel app with CopilotKit & LangGraph.",
+      href: "/coagents/tutorials/ai-travel-app",
+    },
+    {
+      icon: LuBookOpen,
+      title: "Researcher Agent",
+      description: "Learn how to build an agent-native researcher with CopilotKit & LangGraph.",
+      href: "/coagents/videos/research-canvas",
+    }
+  ]}
+/>
 
-<Link
-  href="https://github.com/CopilotKit/CopilotKit/blob/main/examples/coagents-research-canvas/readme.md"
-  className="text-primary-600 decoration-from-font underline [text-underline-position:from-font]"
->
-  <Frame className="-mt-12">
-    <img
-      src="/images/coagents/SharedStateCoAgents.gif"
-      alt="CoAgents demonstration"
-      className="w-auto"
-    />
-  </Frame>
-</Link>
+## Common Questions
+Have a question about CoAgents? You're in the right place!
 
-### Key Features
+<Accordions>
+<Accordion title="Can you explain what a CoAgent is in more detail?">
+Sure! CoAgents are what we call "agentic copilots". Well, what's an agentic copilot then? 
 
-- **__Shared State:__** Seamlessly synchronize state between agents and your application, enabling real-time interactions and updates. With a single line of code, your application can see everything the agent is doing, and the agent can see everything that happens inside the application.
+Think of a Copilot as a simple and fully LLM controlled assistant that has relatively limited capabilities. An Agentic Copilot then is a copilot
+that has been enhanced with the ability to use LangGraph agents to perform more complex tasks. This is an extremely powerful way to build AI
+powered applications because it gives you, the developer, the ability to control the agent's behavior in a deterministic way while still letting
+the agent do its magic.
 
-- **__Agentic Generative UI:__** Create dynamic, AI-generated user interfaces that adapt to user needs and agent outputs. Unlike traditional generative UI, agentic generative UI is based on the agent's state, providing users with visibility into what the agent is doing and building trust.
-
-- **__Emit Intermediate Agent State:__** Visualize agent thought processes in real-time, providing transparency and engaging user experiences. This is crucial for agent performance and for UX which matches user expectations.
-
-- **__Human-in-the-Loop:__** Seamlessly integrate human oversight and intervention into your AI workflows for enhanced accuracy and control. Specify breakpoints in the agent process where human input or approval is required, allowing for greater safety and better agent performance.
-
-- **__Realtime Frontend Actions:__** Provide your agent with frontend & backend actions available based on user context and current application state. These tool calls are automatically propagated as needed, with support for generative UI.
-
-With CoAgents, you can harness the power of AI to create intelligent, responsive, and user-centric applications that push the boundaries of what's possible in software development.
-
-## Upcoming Features
-
-We’re actively enhancing our integration with LangGraph. Upcoming improvements include attaching to an existing threadId and automatic message loading, both of which are high priorities on 
-our immediate roadmap.
+For more on this topic, checkout our [agentic copilot](/coagents/concepts/agentic-copilots) concept page.
+</Accordion>
+<Accordion title="Can I attach to an existing thread?">
+Development of CoAgents is ongoing. One part of this is the ability to attach to an existing thread which is a high priority on our roadmap.
 
 Stay tuned for updates!
+</Accordion>
+<Accordion title="Can I use CopilotKit without LangGraph?">
+For CoAgents, the answer is no. LangGraph is the only supported agent framework for CoAgents.
+
+However, if you are not looking to work with agents, CopilotKit is a complete framework for building AI-powered applications. LangGraph is just one tool of many that we integrate with to provide
+rich AI experiences.
+
+Checkout our [CopilotKit Overview](/) for more information!
+</Accordion>
+</Accordions>

docs/snippets/install-sdk.mdx

@@ -6,11 +6,15 @@ you’ll need our LangGraph SDKs.
 
 <Tabs items={["Python", "TypeScript"]}>
   <Tab value="Python">
-    <InstallPythonSDKSnippet components={props.components}/>
+    <div className="py-6">
+      <InstallPythonSDKSnippet components={props.components}/>
+    </div>
   </Tab>
   <Tab value="TypeScript">
-    ```package-install
-    npm install @copilotkit/sdk-js
-    ```
+    <div className="py-6">
+      ```package-install
+      npm install @copilotkit/sdk-js
+      ```
+    </div>
   </Tab>
 </Tabs>

docs/tailwind.config.js

@@ -11,6 +11,15 @@ export default {
     './mdx-components.{ts,tsx}',
     './node_modules/fumadocs-ui/dist/**/*.js',
   ],
+  safelist: [
+    'xl:grid-cols-1',
+    'xl:grid-cols-2',
+    'xl:grid-cols-3',
+    'xl:grid-cols-4',
+    'xl:col-span-2',
+    'xl:col-span-3',
+    'xl:col-span-4',
+  ],
   presets: [createPreset()],
     plugins: [require("tailwindcss-animate")],
     theme: {