docs(CPK-7187): add Deep Agents as top-level integration

- Add Deep Agents to the integration selector, grid, quickstart dropdown,
  and feature matrix
- Create docs/integrations/deepagents/ with landing page and quickstart
  (ported from langgraph/deep-agents.mdx)
- Add rewrite rule in next.config.mjs so /deepagents routes correctly
- Add deepagents to middleware FRAMEWORKS list
- Add callout on langgraph/deep-agents pointing to the new integration

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: marthakelly

docs/components/content/integration-grid.tsx

@@ -5,6 +5,7 @@ import Ag2Icon from "@/components/ui/icons/ag2";
 import CrewaiIcon from "@/components/ui/icons/crewai";
 import CopilotKitMarkIcon from "@/components/ui/icons/copilotkit-mark";
 import LanggraphIcon from "@/components/ui/icons/langgraph";
+import DeepAgentsIcon from "@/components/ui/icons/deepagents";
 import LlamaIndexIcon from "@/components/ui/icons/llama-index";
 import MastraIcon from "@/components/ui/icons/mastra";
 import AgnoIcon from "@/components/ui/icons/agno";
@@ -16,6 +17,7 @@ import type { ComponentType } from "react";
 export type IntegrationName =
   | "built-in-agent"
   | "langgraph"
+  | "deepagents"
   | "adk"
   | "microsoft-agent-framework"
   | "aws-strands"
@@ -48,6 +50,12 @@ const INTEGRATIONS: Integration[] = [
     description: "Build and deploy stateful AI agents with LangChain.",
     icon: LanggraphIcon,
   },
+  {
+    name: "deepagents",
+    label: "Deep Agents",
+    description: "Build sophisticated AI agents with LangChain's Deep Agents framework.",
+    icon: DeepAgentsIcon,
+  },
   {
     name: "adk",
     label: "ADK",

docs/components/react/feature-matrix.tsx

@@ -15,6 +15,7 @@ type Feature = {
 const frameworks: Framework[] = [
   { name: "Built-in", slug: "built-in-agent" },
   { name: "LangChain", slug: "langgraph" },
+  { name: "Deep Agents", slug: "deepagents" },
   { name: "ADK", slug: "adk" },
   { name: "Microsoft", slug: "microsoft-agent-framework" },
   { name: "AWS Strands", slug: "aws-strands" },
@@ -52,6 +53,18 @@ const matrix: Record<string, Record<string, boolean>> = {
     mcpApps: true,
     a2ui: true,
   },
+  deepagents: {
+    sharedState: true,
+    feTools: true,
+    readables: true,
+    toolRendering: true,
+    stateStreaming: true,
+    genUI: true,
+    interrupts: true,
+    agentAppContext: true,
+    mcpApps: true,
+    a2ui: true,
+  },
   adk: {
     sharedState: true,
     feTools: true,

docs/components/react/quickstart-dropdown.tsx

@@ -10,6 +10,7 @@ export function QuickstartDropdown() {
   const options = [
     { label: "Direct to LLM", url: "/direct-to-llm/guides/quickstart" },
     { label: "LangChain", url: "/langgraph/quickstart" },
+    { label: "Deep Agents", url: "/deepagents/quickstart" },
     {
       label: "Microsoft Agent Framework",
       url: "/microsoft-agent-framework/quickstart",

docs/components/ui/icons/deepagents.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import { cn } from "@/lib/utils";
+
+interface DeepAgentsIconProps {
+  className?: string;
+  width?: number;
+  height?: number;
+}
+
+const DEFAULT_CLASSNAME = "text-icon";
+
+const DeepAgentsIcon = ({
+  className,
+  width = 16,
+  height = 16,
+}: DeepAgentsIconProps) => {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 128 128"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={cn(DEFAULT_CLASSNAME, className)}
+    >
+      <path
+        d="M40.1024 85.0722C47.6207 77.5537 51.8469 67.3453 51.8469 56.7136C51.8469 46.0818 47.617 35.8734 40.1024 28.355L11.7446 0C4.22995 7.5185 0 17.7269 0 28.3586C0 38.9903 4.22995 49.1987 11.7446 56.7172L40.0987 85.0722H40.1024Z"
+        fill="currentColor"
+      />
+      <path
+        d="M99.4385 87.698C91.9239 80.1832 81.7121 75.9531 71.0844 75.9531C60.4566 75.9531 50.2448 80.1832 42.7266 87.698L71.0844 116.057C78.599 123.571 88.8107 127.802 99.4421 127.802C110.074 127.802 120.282 123.571 127.8 116.057L99.4421 87.698H99.4385Z"
+        fill="currentColor"
+      />
+      <path
+        d="M11.8146 115.987C19.3329 123.502 29.541 127.732 40.1724 127.732V87.6289H0.0664062C0.0700559 98.2606 4.29635 108.469 11.8146 115.987Z"
+        fill="currentColor"
+      />
+      <path
+        d="M110.387 45.7684C102.869 38.2535 92.6608 34.0198 82.0258 34.0234C71.3943 34.0234 61.1863 38.2535 53.668 45.772L82.0258 74.1306L110.387 45.7684Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default DeepAgentsIcon;

docs/components/ui/integrations-sidebar/integration-selector.tsx

@@ -9,6 +9,7 @@ import AgnoIcon from "../icons/agno";
 import CrewaiIcon from "../icons/crewai";
 import CopilotKitMarkIcon from "../icons/copilotkit-mark";
 import LanggraphIcon from "../icons/langgraph";
+import DeepAgentsIcon from "../icons/deepagents";
 import LlamaIndexIcon from "../icons/llama-index";
 import MastraIcon from "../icons/mastra";
 import PydanticAiIcon from "../icons/pydantic-ai";
@@ -39,6 +40,7 @@ const INTEGRATION_ICONS: Record<
 > = {
   "built-in-agent": CopilotKitMarkIcon,
   langgraph: LanggraphIcon,
+  deepagents: DeepAgentsIcon,
   adk: AdkIcon,
   "microsoft-agent-framework": MicrosoftIcon,
   "aws-strands": AwsStrandsIcon,

docs/content/docs/integrations/deepagents/index.mdx

@@ -0,0 +1,58 @@
+---
+title: Introduction
+icon: "lucide/BrainCircuit"
+description: Bring your Deep Agents to your users with CopilotKit via AG-UI.
+hideHeader: true
+---
+import DeepAgentsIcon from "@/components/ui/icons/deepagents";
+import { FrameworkOverview } from "@/components/content/landing-pages/framework-overview";
+
+<FrameworkOverview
+  frameworkName="Deep Agents"
+  frameworkIcon={<DeepAgentsIcon className="h-14 w-14" />}
+  header="Bring your Deep Agents to your users"
+  subheader="Give your Deep Agents real user-interactivity using CopilotKit and AG-UI. Build rich, interactive, agent-powered applications with LangChain's Deep Agents framework."
+  bannerVideo="https://cdn.copilotkit.ai/docs/copilotkit/videos/coagents/overview.mp4"
+  guideLink="/deepagents/quickstart"
+  initCommand="npx copilotkit@latest init"
+  featuresLink="https://feature-viewer.copilotkit.ai/langgraph/feature/agentic_chat"
+  supportedFeatures={[
+    {
+      title: "Generative UI",
+      description: "Render your agent's state, progress, outputs, and tool calls with custom UI components in real-time. Bridges the gap between AI agents and user interfaces.",
+      documentationLink: "/langgraph/generative-ui",
+      demoLink: "https://feature-viewer.copilotkit.ai/langgraph/feature/tool_based_generative_ui",
+      videoUrl: "https://cdn.copilotkit.ai/docs/copilotkit/videos/coagents/haiku.mp4"
+    },
+    {
+      title: "Human in the Loop",
+      description: "Empower users to guide agents at key checkpoints. Combine the best of AI and human judgment for more reliable and controllable agent behavior.",
+      documentationLink: "/langgraph/human-in-the-loop",
+      demoLink: "https://examples-coagents-ai-travel-app.vercel.app/",
+      videoUrl: "https://cdn.copilotkit.ai/docs/copilotkit/images/coagents/human-in-the-loop-example.mp4"
+    },
+    {
+      title: "Shared State",
+      description: "Keep your agent and your app in sync. Your agent can see everything in your app, and your app can react to your agent in real-time.",
+      documentationLink: "/langgraph/shared-state",
+      demoLink: "https://feature-viewer.copilotkit.ai/langgraph/feature/shared_state",
+      videoUrl: "https://cdn.copilotkit.ai/docs/copilotkit/videos/coagents/shared-state.mp4"
+    }
+  ]}
+  architectureImage="https://cdn.copilotkit.ai/docs/copilotkit/images/coagents/coagents-highlevel-overview.png"
+  liveDemos={[
+    {
+      type: "saas",
+      title: "SaaS Copilot",
+      description: "A traditional SaaS application enhanced with AI agents. These copilots integrate seamlessly into existing workflows, providing intelligent assistance for specific business processes. Perfect for customer service, sales automation, project management, and domain-specific tasks where users need guided, step-by-step AI assistance.",
+      iframeUrl: "https://examples-coagents-ai-travel-app.vercel.app?copilotOpen=true"
+    },
+    {
+      type: "canvas",
+      title: "Canvas Copilot",
+      description: "An infinite canvas interface where users collaborate with AI agents in a spatial, visual environment. These copilots excel at research, brainstorming, content creation, and complex problem-solving where information needs to be organized, connected, and explored in a non-linear, creative way.",
+      iframeUrl: "https://examples-coagents-research-canvas-ui.vercel.app/"
+    }
+  ]}
+  tutorialLink="/langgraph/tutorials/ai-travel-app"
+/>

docs/content/docs/integrations/deepagents/meta.json

@@ -0,0 +1,9 @@
+{
+  "title": "Deep Agents",
+  "root": true,
+  "pages": [
+    "---Getting Started---",
+    "index",
+    "quickstart"
+  ]
+}