Merge branch 'main' into tyler/beautiful-haslett-a95038

Author: tylerslaton

docs/content/docs/(root)/generative-ui/a2ui.mdx

@@ -5,11 +5,16 @@ description: "Render declarative UI components using the A2UI specification."
 hideTOC: true
 ---
 import { IntegrationGrid } from "@/components/content/integration-grid";
+import { Callout } from "fumadocs-ui/components/callout";
 
 ## What is this?
 
 A2UI (Agent-to-UI) is a declarative specification for generative UI. It allows agents to render structured UI components using a JSON-based schema, without requiring custom React components for every interaction.
 
+<Callout type="info">
+  **Free course:** See this pattern built end-to-end in [Build Interactive Agents with Generative UI](https://www.deeplearning.ai/short-courses/build-interactive-agents-with-generative-ui/) — a free DeepLearning.AI short course taught by CopilotKit's CEO covering the full Generative UI spectrum (Controlled, Declarative, and Open-Ended).
+</Callout>
+
 ## Choose your AI backend
 
 <IntegrationGrid path="generative-ui/a2ui" />

docs/content/docs/(root)/generative-ui/mcp-apps.mdx

@@ -5,11 +5,16 @@ description: "Render interactive UI components from MCP servers directly in your
 hideTOC: true
 ---
 import { IntegrationGrid } from "@/components/content/integration-grid";
+import { Callout } from "fumadocs-ui/components/callout";
 
 ## What is this?
 
 MCP Apps are MCP servers that expose tools with associated UI resources. When the agent calls one of these tools, CopilotKit automatically fetches and renders the UI component in the chat — no additional frontend code required.
 
+<Callout type="info">
+  **Free course:** See this pattern built end-to-end in [Build Interactive Agents with Generative UI](https://www.deeplearning.ai/short-courses/build-interactive-agents-with-generative-ui/) — a free DeepLearning.AI short course taught by CopilotKit's CEO covering the full Generative UI spectrum (Controlled, Declarative, and Open-Ended).
+</Callout>
+
 Key benefits:
 - **Zero frontend code** — UI components are served by the MCP server
 - **Full interactivity** — Components can use HTML, CSS, and JavaScript

docs/content/docs/(root)/generative-ui/open-generative-ui.mdx

@@ -5,11 +5,16 @@ description: "Let agents generate fully interactive HTML/CSS/JS UIs that stream
 ---
 
 import { Tabs, Tab } from "fumadocs-ui/components/tabs";
+import { Callout } from "fumadocs-ui/components/callout";
 
 ## What is this?
 
 Open Generative UI lets the agent generate complete, sandboxed UI on the fly — HTML, CSS, and JavaScript — and stream it live into the chat. The user sees the interface build in real time: styles apply first, then HTML streams in progressively, and finally JavaScript expressions execute one by one.
 
+<Callout type="info">
+  **Free course:** See this pattern built end-to-end in [Build Interactive Agents with Generative UI](https://www.deeplearning.ai/short-courses/build-interactive-agents-with-generative-ui/) — a free DeepLearning.AI short course taught by CopilotKit's CEO covering the full Generative UI spectrum (Controlled, Declarative, and Open-Ended).
+</Callout>
+
 Key benefits:
 - **No predefined components** — the agent creates any UI it needs, on demand
 - **Live streaming** — HTML streams into a preview as it's generated

docs/content/docs/(root)/generative-ui/state-rendering.mdx

@@ -5,11 +5,16 @@ description: Render your agent's state with custom UI components in real-time.
 hideTOC: true
 ---
 import { IntegrationGrid } from "@/components/content/integration-grid";
+import { Callout } from "fumadocs-ui/components/callout";
 
 ## What is this?
 
 State rendering lets you build UI that reflects your agent's state in real-time. As your agent progresses through nodes and emits state updates, your frontend renders those changes — showing progress, drafts, or intermediate results.
 
+<Callout type="info">
+  **Free course:** See this pattern built end-to-end in [Build Interactive Agents with Generative UI](https://www.deeplearning.ai/short-courses/build-interactive-agents-with-generative-ui/) — a free DeepLearning.AI short course taught by CopilotKit's CEO covering the full Generative UI spectrum (Controlled, Declarative, and Open-Ended).
+</Callout>
+
 ## When should I use this?
 
 Use state rendering when you want to:

docs/content/docs/(root)/generative-ui/tool-rendering.mdx

@@ -5,11 +5,16 @@ description: Render your agent's tool calls with custom UI components.
 hideTOC: true
 ---
 import { IntegrationGrid } from "@/components/content/integration-grid";
+import { Callout } from "fumadocs-ui/components/callout";
 
 ## What is this?
 
 Tool rendering lets you customize how your agent's backend tool calls appear in the chat. Instead of showing raw tool execution, you can render custom React components that display tool arguments, progress, and results.
 
+<Callout type="info">
+  **Free course:** See this pattern built end-to-end in [Build Interactive Agents with Generative UI](https://www.deeplearning.ai/short-courses/build-interactive-agents-with-generative-ui/) — a free DeepLearning.AI short course taught by CopilotKit's CEO covering the full Generative UI spectrum (Controlled, Declarative, and Open-Ended).
+</Callout>
+
 ## When should I use this?
 
 Use tool rendering when you want to:

docs/content/docs/(root)/generative-ui/your-components/display-only.mdx

@@ -6,11 +6,16 @@ hideTOC: true
 ---
 import { IntegrationGrid } from "@/components/content/integration-grid";
 import { Tabs, Tab } from "fumadocs-ui/components/tabs";
+import { Callout } from "fumadocs-ui/components/callout";
 
 ## What is this?
 
 Display-only generative UI lets you register React components as tools your agent can invoke. When the agent calls the tool, CopilotKit renders your component directly in the chat with the tool's arguments as props — no handler logic or user interaction required.
 
+<Callout type="info">
+  **Free course:** See this pattern built end-to-end in [Build Interactive Agents with Generative UI](https://www.deeplearning.ai/short-courses/build-interactive-agents-with-generative-ui/) — a free DeepLearning.AI short course taught by CopilotKit's CEO covering the full Generative UI spectrum (Controlled, Declarative, and Open-Ended).
+</Callout>
+
 <Tabs items={['page.tsx', 'chart.tsx']}>
   <Tab value="page.tsx">
   ```tsx

docs/content/docs/learn/generative-ui/index.mdx

@@ -41,6 +41,10 @@ This page covers:
 
 </TwoColumnSection>
 
+<Callout type="info">
+  **Prefer to learn by building?** [Build Interactive Agents with Generative UI](https://www.deeplearning.ai/short-courses/build-interactive-agents-with-generative-ui/) is a free DeepLearning.AI short course taught by CopilotKit's CEO. It walks through the Controlled, Declarative, and Open-Ended Generative UI patterns end-to-end with React, LangChain, and AG-UI.
+</Callout>
+
 ---
 
 <div>

examples/v2/react/storybook/stories/CopilotSidebarView.stories.tsx

@@ -31,6 +31,22 @@ export const Default: Story = {
   },
 };
 
+export const RightPosition: Story = {
+  args: {
+    autoScroll: true,
+    position: "right",
+    width: 480,
+  },
+};
+
+export const LeftPosition: Story = {
+  args: {
+    autoScroll: true,
+    position: "left",
+    width: 480,
+  },
+};
+
 export const CustomHeader: Story = {
   args: {
     header: {

packages/react-core/src/v2/components/chat/CopilotSidebar.tsx

@@ -14,13 +14,15 @@ export type CopilotSidebarProps = Omit<CopilotChatProps, "chatView"> & {
   toggleButton?: CopilotSidebarViewProps["toggleButton"];
   defaultOpen?: boolean;
   width?: number | string;
+  position?: CopilotSidebarViewProps["position"];
 };
 
 export function CopilotSidebar({
   header,
   toggleButton,
   defaultOpen,
   width,
+  position,
   ...chatProps
 }: CopilotSidebarProps) {
   const { checkFeature } = useLicenseContext();
@@ -41,6 +43,7 @@ export function CopilotSidebar({
         toggleButton: viewToggleButton,
         width: viewWidth,
         defaultOpen: viewDefaultOpen,
+        position: viewPosition,
         ...restProps
       } = viewProps as CopilotSidebarViewProps;
 
@@ -51,12 +54,13 @@ export function CopilotSidebar({
           toggleButton={toggleButton ?? viewToggleButton}
           width={width ?? viewWidth}
           defaultOpen={defaultOpen ?? viewDefaultOpen}
+          position={position ?? viewPosition}
         />
       );
     };
 
     return Object.assign(Component, CopilotChatView);
-  }, [header, toggleButton, width, defaultOpen]);
+  }, [header, toggleButton, width, defaultOpen, position]);
 
   return (
     <>

packages/react-core/src/v2/components/chat/CopilotSidebarView.tsx

@@ -21,13 +21,15 @@ export type CopilotSidebarViewProps = CopilotChatViewProps & {
   toggleButton?: SlotValue<typeof CopilotChatToggleButton>;
   width?: number | string;
   defaultOpen?: boolean;
+  position?: "left" | "right";
 };
 
 export function CopilotSidebarView({
   header,
   toggleButton,
   width,
   defaultOpen = true,
+  position = "right",
   ...props
 }: CopilotSidebarViewProps) {
   return (
@@ -36,6 +38,7 @@ export function CopilotSidebarView({
         header={header}
         toggleButton={toggleButton}
         width={width}
+        position={position}
         {...props}
       />
     </CopilotChatConfigurationProvider>
@@ -46,6 +49,7 @@ function CopilotSidebarViewInternal({
   header,
   toggleButton,
   width,
+  position = "right",
   ...props
 }: Omit<CopilotSidebarViewProps, "defaultOpen">) {
   const configuration = useCopilotChatConfiguration();
@@ -118,29 +122,34 @@ function CopilotSidebarViewInternal({
       return;
     if (!window.matchMedia("(min-width: 768px)").matches) return;
 
+    const marginStyleProp =
+      position === "left" ? "marginInlineStart" : "marginInlineEnd";
+    const transitionCssProp =
+      position === "left" ? "margin-inline-start" : "margin-inline-end";
+
     if (isSidebarOpen) {
       if (hasMounted.current) {
-        document.body.style.transition = `margin-inline-end ${SIDEBAR_TRANSITION_MS}ms ease`;
+        document.body.style.transition = `${transitionCssProp} ${SIDEBAR_TRANSITION_MS}ms ease`;
       }
-      document.body.style.marginInlineEnd = widthToMargin(sidebarWidth);
+      document.body.style[marginStyleProp] = widthToMargin(sidebarWidth);
     } else if (hasMounted.current) {
-      document.body.style.transition = `margin-inline-end ${SIDEBAR_TRANSITION_MS}ms ease`;
-      document.body.style.marginInlineEnd = "";
+      document.body.style.transition = `${transitionCssProp} ${SIDEBAR_TRANSITION_MS}ms ease`;
+      document.body.style[marginStyleProp] = "";
     }
 
     hasMounted.current = true;
 
     return () => {
-      document.body.style.marginInlineEnd = "";
+      document.body.style[marginStyleProp] = "";
       document.body.style.transition = "";
     };
-  }, [isSidebarOpen, sidebarWidth]);
+  }, [isSidebarOpen, sidebarWidth, position]);
 
   const headerElement = renderSlot(header, CopilotModalHeader, {});
   const toggleButtonElement = renderSlot(
     toggleButton,
     CopilotChatToggleButton,
-    {},
+    position === "left" ? { className: "cpk:left-6 cpk:right-auto" } : {},
   );
 
   return (
@@ -151,18 +160,23 @@ function CopilotSidebarViewInternal({
         data-copilotkit
         data-testid="copilot-sidebar"
         data-copilot-sidebar
+        data-position={position}
         className={cn(
           "copilotKitSidebar copilotKitWindow",
-          "cpk:fixed cpk:right-0 cpk:top-0 cpk:z-[1200] cpk:flex",
+          "cpk:fixed cpk:top-0 cpk:z-[1200] cpk:flex",
+          position === "left" ? "cpk:left-0" : "cpk:right-0",
           // Height with dvh fallback and safe area support
           "cpk:h-[100vh] cpk:h-[100dvh] cpk:max-h-screen",
           // Responsive width: full on mobile, custom on desktop
           "cpk:w-full",
-          "cpk:border-l cpk:border-border cpk:bg-background cpk:text-foreground cpk:shadow-xl",
+          position === "left" ? "cpk:border-r" : "cpk:border-l",
+          "cpk:border-border cpk:bg-background cpk:text-foreground cpk:shadow-xl",
           "cpk:transition-transform cpk:duration-300 cpk:ease-out",
           isSidebarOpen
             ? "cpk:translate-x-0"
-            : "cpk:translate-x-full cpk:pointer-events-none",
+            : position === "left"
+              ? "cpk:-translate-x-full cpk:pointer-events-none"
+              : "cpk:translate-x-full cpk:pointer-events-none",
         )}
         style={
           {