diff --git a/docs/app/(home)/[[...slug]]/page.tsx b/docs/app/(home)/[[...slug]]/page.tsx index d9e3057a95..6664c9f002 100644 --- a/docs/app/(home)/[[...slug]]/page.tsx +++ b/docs/app/(home)/[[...slug]]/page.tsx @@ -7,7 +7,7 @@ import { DocsTitle, } from "fumadocs-ui/page"; import { PageBreadcrumb } from "fumadocs-ui/layouts/docs/page"; -import { notFound } from "next/navigation"; +import { notFound, redirect } from "next/navigation"; import defaultMdxComponents from "fumadocs-ui/mdx"; import { Badge } from "@/components/ui/badge"; import { CloudIcon } from "lucide-react"; @@ -129,7 +129,26 @@ export default async function Page({ params: Promise<{ slug?: string[] }>; }) { const resolvedParams = await params; - const page = source.getPage(resolvedParams.slug); + let page = source.getPage(resolvedParams.slug); + + // Legacy reference URLs without v1/v2 prefix: try v2 first, then v1 + if ( + !page && + resolvedParams.slug && + resolvedParams.slug[0] === "reference" && + resolvedParams.slug[1] !== "v1" && + resolvedParams.slug[1] !== "v2" + ) { + const rest = resolvedParams.slug.slice(1); + const v2Slug = ["reference", "v2", ...rest]; + const v1Slug = ["reference", "v1", ...rest]; + if (source.getPage(v2Slug)) { + redirect(`/${v2Slug.join("/")}`); + } else if (source.getPage(v1Slug)) { + redirect(`/${v1Slug.join("/")}`); + } + } + if (!page) notFound(); const MDX = page.data.body; const cloudOnly = cloudOnlyFeatures.includes(page.data.title); @@ -236,7 +255,22 @@ export async function generateMetadata({ params: Promise<{ slug?: string[] }>; }) { const resolvedParams = await params; - const page = source.getPage(resolvedParams.slug); + let page = source.getPage(resolvedParams.slug); + + // Legacy reference URLs without v1/v2 prefix: try v2 first, then v1 + if ( + !page && + resolvedParams.slug && + resolvedParams.slug[0] === "reference" && + resolvedParams.slug[1] !== "v1" && + resolvedParams.slug[1] !== "v2" + ) { + const rest = resolvedParams.slug.slice(1); + const v2Slug = ["reference", "v2", ...rest]; + const v1Slug = ["reference", "v1", ...rest]; + page = source.getPage(v2Slug) || source.getPage(v1Slug); + } + if (!page) notFound(); return { diff --git a/docs/components/layout/conditional-sidebar.tsx b/docs/components/layout/conditional-sidebar.tsx index 58087fe5a1..41d66acd53 100644 --- a/docs/components/layout/conditional-sidebar.tsx +++ b/docs/components/layout/conditional-sidebar.tsx @@ -7,6 +7,9 @@ import IntegrationsSidebar from "./integrations-sidebar"; import { INTEGRATION_ORDER } from "@/lib/integrations"; import { normalizeUrl } from "@/lib/analytics-utils"; import { useMemo } from "react"; +import VersionSelector, { + getVersionFromPathname, +} from "@/components/ui/reference-sidebar/version-selector"; interface ConditionalSidebarProps { pageTree: DocsLayoutProps["tree"]; @@ -30,8 +33,9 @@ export default function ConditionalSidebar({ // Check if this is a reference route (e.g., /reference) const isReferenceRoute = firstSegment === "reference"; + const currentVersion = getVersionFromPathname(pathname); - // Find the reference folder and create a filtered pageTree + // Find the reference folder and drill into the active version const referencePageTree = useMemo(() => { if (!isReferenceRoute) return null; @@ -46,15 +50,36 @@ export default function ConditionalSidebar({ }) as Node | undefined; if (referenceFolder && "children" in referenceFolder) { - // Return a pageTree with only the reference folder's children + const referenceChildren = (referenceFolder as any).children || []; + + // Find the version folder (v1 or v2) within the reference folder + const versionFolder = referenceChildren.find((node: any) => { + if (node.type !== "folder") return false; + const url = node.index?.url || node.url; + const name = typeof node.name === "string" ? node.name : undefined; + return ( + url === `/reference/${currentVersion}` || + name?.toLowerCase() === currentVersion + ); + }); + + if (versionFolder && "children" in versionFolder) { + // Return a pageTree with only the version folder's children + return { + ...pageTree, + children: (versionFolder as any).children || [], + }; + } + + // Fallback: return the reference folder's children directly return { ...pageTree, - children: (referenceFolder as any).children || [], + children: referenceChildren, }; } return null; - }, [isReferenceRoute, pageTree]); + }, [isReferenceRoute, pageTree, currentVersion]); if (isIntegrationRoute) { return ; @@ -62,7 +87,11 @@ export default function ConditionalSidebar({ if (isReferenceRoute && referencePageTree) { return ( - + } + /> ); } diff --git a/docs/components/layout/sidebar.tsx b/docs/components/layout/sidebar.tsx index 314d746eb7..4dc8f0c3ca 100644 --- a/docs/components/layout/sidebar.tsx +++ b/docs/components/layout/sidebar.tsx @@ -1,6 +1,6 @@ "use client"; -import { useState, useEffect } from "react"; +import { useState, useEffect, type ReactNode } from "react"; import { DocsLayoutProps } from "fumadocs-ui/layouts/docs"; import Separator from "../ui/sidebar/separator"; import Page from "../ui/sidebar/page"; @@ -39,9 +39,11 @@ const isIntegrationFolder = (node: Node): boolean => { const Sidebar = ({ pageTree, showIntegrationSelector = true, + headerSlot, }: { pageTree: DocsLayoutProps["tree"]; showIntegrationSelector?: boolean; + headerSlot?: ReactNode; }) => { const pages = pageTree.children; const [selectedIntegration, setSelectedIntegration] = @@ -69,8 +71,10 @@ const Sidebar = ({ /> )} + {headerSlot &&
{headerSlot}
} +
  • {pages.map((page, index) => { diff --git a/docs/components/ui/reference-sidebar/version-selector.tsx b/docs/components/ui/reference-sidebar/version-selector.tsx new file mode 100644 index 0000000000..c1344a893e --- /dev/null +++ b/docs/components/ui/reference-sidebar/version-selector.tsx @@ -0,0 +1,223 @@ +"use client"; + +import { useState, useEffect, useRef } from "react"; +import { usePathname, useRouter } from "next/navigation"; +import ChevronDownIcon from "../icons/chevron"; +import CheckIcon from "../icons/check"; + +export type ReferenceVersion = "v1" | "v2"; + +const VERSION_OPTIONS: { value: ReferenceVersion; label: string }[] = [ + { value: "v2", label: "v2 (Latest)" }, + { value: "v1", label: "v1" }, +]; + +/** + * Maps v1 page suffixes to their v2 equivalents and vice versa. + * Suffix is the path after `/reference/vN/`, e.g. "hooks/useCopilotAction". + * When switching versions, if the direct path doesn't exist in the target, + * we look up the closest equivalent here, or fall back to the version root. + */ +const V1_TO_V2: Record = { + "hooks/useCopilotAction": "hooks/useFrontendTool", + "hooks/useCopilotReadable": "hooks/useAgentContext", + "hooks/useCopilotAdditionalInstructions": "hooks/useAgentContext", + "hooks/useCopilotChat": "hooks/useAgent", + "hooks/useCopilotChatHeadless_c": "hooks/useAgent", + "hooks/useCopilotChatSuggestions": "hooks/useConfigureSuggestions", + "hooks/useCoAgent": "hooks/useAgent", + "hooks/useCoAgentStateRender": "hooks/useRenderToolCall", + "hooks/useDefaultTool": "hooks/useFrontendTool", + "hooks/useLangGraphInterrupt": "hooks/useHumanInTheLoop", + "components/chat/CopilotChat": "components/CopilotChat", + "components/chat/CopilotPopup": "components/CopilotPopup", + "components/chat/CopilotSidebar": "components/CopilotSidebar", + "components/chat": "components/CopilotChat", +}; + +// Build the reverse mapping (v2 → v1) from the forward mapping. +// For many-to-one mappings, the first entry wins. +const V2_TO_V1: Record = {}; +for (const [v1Path, v2Path] of Object.entries(V1_TO_V2)) { + if (!(v2Path in V2_TO_V1)) { + V2_TO_V1[v2Path] = v1Path; + } +} + +function resolveVersionPath( + suffix: string, + fromVersion: ReferenceVersion, + toVersion: ReferenceVersion, +): string { + const map = fromVersion === "v1" ? V1_TO_V2 : V2_TO_V1; + // Exact match in the mapping → use the equivalent page + if (suffix in map) { + return `/reference/${toVersion}/${map[suffix]}`; + } + // Direct path exists in target (same page name in both versions) → keep it. + // Pages that exist in both: hooks/useAgent, hooks/useFrontendTool, hooks/useHumanInTheLoop, + // hooks/useRenderToolCall, components/CopilotKit, etc. + // We can't check the filesystem from the client, so we maintain a set of + // known pages per version and verify against that. + // For simplicity, if it's not in the mapping, try the direct path — the + // fallback below will catch pages that only exist in one version. + const directPath = `/reference/${toVersion}/${suffix}`; + + // Pages that only exist in v1 (no v2 equivalent at all) + const v1Only = new Set([ + "classes/CopilotRuntime", + "classes/CopilotTask", + "classes/llm-adapters/OpenAIAdapter", + "classes/llm-adapters/OpenAIAssistantAdapter", + "classes/llm-adapters/AnthropicAdapter", + "classes/llm-adapters/LangChainAdapter", + "classes/llm-adapters/GoogleGenerativeAIAdapter", + "classes/llm-adapters/GroqAdapter", + "sdk/python/LangGraph", + "sdk/python/LangGraphAgent", + "sdk/python/CrewAI", + "sdk/python/CrewAIAgent", + "sdk/python/RemoteEndpoints", + "sdk/js/LangGraph", + "components/CopilotTextarea", + ]); + + // Pages that only exist in v2 (no v1 equivalent) + const v2Only = new Set([ + "hooks/useAgentContext", + "hooks/useSuggestions", + "hooks/useConfigureSuggestions", + "hooks/useCopilotKit", + "hooks/useCopilotChatConfiguration", + "components/CopilotChatView", + "components/CopilotChatMessageView", + "components/CopilotChatAssistantMessage", + "components/CopilotChatUserMessage", + "components/CopilotChatInput", + ]); + + const blockedSet = toVersion === "v2" ? v1Only : v2Only; + if (blockedSet.has(suffix)) { + return `/reference/${toVersion}`; + } + + return directPath; +} + +interface VersionSelectorProps { + onNavigate?: () => void; +} + +export function getVersionFromPathname(pathname: string): ReferenceVersion { + if (pathname.startsWith("/reference/v1")) return "v1"; + return "v2"; +} + +const VersionSelector = ({ onNavigate }: VersionSelectorProps) => { + const [isOpen, setIsOpen] = useState(false); + const pathname = usePathname(); + const router = useRouter(); + const dropdownRef = useRef(null); + + const currentVersion = getVersionFromPathname(pathname); + + // Close dropdown on outside click + useEffect(() => { + const handleClickOutside = (event: MouseEvent) => { + if ( + dropdownRef.current && + !dropdownRef.current.contains(event.target as Node) + ) { + setIsOpen(false); + } + }; + document.addEventListener("mousedown", handleClickOutside); + return () => document.removeEventListener("mousedown", handleClickOutside); + }, []); + + const handleVersionClick = (version: ReferenceVersion) => { + setIsOpen(false); + if (version === currentVersion) return; + + // Extract the page suffix after `/reference/vN/` + const prefix = `/reference/${currentVersion}/`; + const suffix = pathname.startsWith(prefix) + ? pathname.slice(prefix.length) + : ""; + + const newPath = suffix + ? resolveVersionPath(suffix, currentVersion, version) + : `/reference/${version}`; + + onNavigate?.(); + router.push(newPath); + }; + + const currentOption = VERSION_OPTIONS.find( + (opt) => opt.value === currentVersion, + )!; + + return ( +
    +
    setIsOpen(!isOpen)} + onKeyDown={(e) => { + if (e.key === "Enter" || e.key === " ") { + setIsOpen(!isOpen); + } + }} + tabIndex={0} + role="button" + aria-label="Select API version" + aria-expanded={isOpen} + > +
    +
    + + API + +
    + + {currentOption.label} + +
    + +
    + +
    +
    + + {isOpen && ( +
    + {VERSION_OPTIONS.map(({ value, label }) => ( +
    handleVersionClick(value)} + onKeyDown={(e) => { + if (e.key === "Enter" || e.key === " ") { + handleVersionClick(value); + } + }} + tabIndex={0} + role="option" + aria-selected={currentVersion === value} + > + {label} + {currentVersion === value && ( + + )} +
    + ))} +
    + )} +
    + ); +}; + +export default VersionSelector; diff --git a/docs/content/docs/(root)/faq.mdx b/docs/content/docs/(root)/faq.mdx index ca944be32f..ed351d5ab9 100644 --- a/docs/content/docs/(root)/faq.mdx +++ b/docs/content/docs/(root)/faq.mdx @@ -17,21 +17,21 @@ We've got answers to some common questions! ### Concierge - The Concierge Copilot understands your application's capabilities and full user context. It translates + The Concierge Copilot understands your application's capabilities and full user context. It translates high-level user intent into actions by serving as an intelligent intermediary. - For example, our [Banking Assistant](https://github.com/CopilotKit/demo-banking) implements Concierge Copilots + For example, our [Banking Assistant](https://github.com/CopilotKit/demo-banking) implements Concierge Copilots to help users manage their (_fake_) banking needs. - + ### Worker The Worker Copilot is a domain-specific agent that can help users perform their core work tasks. - It serves as a partner to the user that is better at performing some tasks and worse at others. + It serves as a partner to the user that is better at performing some tasks and worse at others. Ultimately, it amplifies your users to produce better work than they thought possible. This pattern is often used in backoffice copilots. - Think of the Worker Copilot as Cursor, Replit Agent, or Windsurf, but for any domain. For example, + Think of the Worker Copilot as Cursor, Replit Agent, or Windsurf, but for any domain. For example, see our [Open Researcher ANA](https://github.com/CopilotKit/open-research-ana). @@ -39,21 +39,21 @@ We've got answers to some common questions! 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 | + | [**Chat**](/reference/v1/components/chat/CopilotChat) | Simple and powerful chat interface | + | [**Pop-up**](/reference/v1/components/chat/CopilotPopup) | The Chat component in a pop-up format | + | [**Sidebar**](/reference/v1/components/chat/CopilotSidebar) | The Chat component in a sidebar format | + | [**Copilot Textarea**](/reference/v1/components/CopilotTextarea) | Powerful AI autocompletion as a drop-in replacement for any textarea | | [**Headless**](/custom-look-and-feel/customize-built-in-ui-components) | Full customization of the chat interfaces | ### Deeply integrated Copilots Give Copilots the ability to execute tools directly in your application. | | | |---------|-------------| - | [**Copilot Readable State**](/reference/hooks/useCopilotReadable) | Enables Copilots to read and understand the application state | - | [**Frontend Tools**](/reference/hooks/useFrontendTool) | Copilots can execute tools in the application | + | [**Copilot Readable State**](/reference/v1/hooks/useCopilotReadable) | Enables Copilots to read and understand the application state | + | [**Frontend Tools**](/reference/v1/hooks/useFrontendTool) | Copilots can execute tools in the application | | [**Generative UI**](/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 execute tools proactively based on application state | + | [**AI Autosuggestions**](/reference/v1/hooks/useCopilotChatSuggestions) | AI-powered autosuggestions in your AI chat interface | + | [**Copilot Tasks**](/reference/v1/classes/CopilotTask) | Let your copilots execute tools proactively based on application state | ### Rich agentic experiences Integrate your LangGraph agents into your product with ease. @@ -76,4 +76,4 @@ We've got answers to some common questions! For more information, checkout our documentation on [bringing your own LLM](/direct-to-llm/guides/bring-your-own-llm). - \ No newline at end of file + diff --git a/docs/content/docs/integrations/adk/frontend-actions.mdx b/docs/content/docs/integrations/adk/frontend-actions.mdx index 96d9d35b06..4f02d99b3f 100644 --- a/docs/content/docs/integrations/adk/frontend-actions.mdx +++ b/docs/content/docs/integrations/adk/frontend-actions.mdx @@ -44,7 +44,7 @@ Use frontend tools when you need your agent to interact with client-side primiti ### Create a frontend tool - First, you'll need to create a frontend tool using the [useFrontendTool](/reference/hooks/useFrontendTool) hook. Here's a simple one to get you started + First, you'll need to create a frontend tool using the [useFrontendTool](/reference/v1/hooks/useFrontendTool) hook. Here's a simple one to get you started that says hello to the user. ```tsx title="page.tsx" @@ -87,4 +87,4 @@ Use frontend tools when you need your agent to interact with client-side primiti - \ No newline at end of file + diff --git a/docs/content/docs/integrations/adk/generative-ui/frontend-tools.mdx b/docs/content/docs/integrations/adk/generative-ui/frontend-tools.mdx index 22d9462128..a4df083592 100644 --- a/docs/content/docs/integrations/adk/generative-ui/frontend-tools.mdx +++ b/docs/content/docs/integrations/adk/generative-ui/frontend-tools.mdx @@ -44,7 +44,7 @@ Use frontend tools when you need your agent to interact with client-side primiti ### Create a frontend tool - First, you'll need to create a frontend tool using the [useFrontendTool](/reference/hooks/useFrontendTool) hook. Here's a simple one to get you started + First, you'll need to create a frontend tool using the [useFrontendTool](/reference/v1/hooks/useFrontendTool) hook. Here's a simple one to get you started that says hello to the user. ```tsx title="page.tsx" @@ -105,4 +105,3 @@ Use frontend tools when you need your agent to interact with client-side primiti /> - diff --git a/docs/content/docs/integrations/adk/shared-state/in-app-agent-read.mdx b/docs/content/docs/integrations/adk/shared-state/in-app-agent-read.mdx index 94c41f539e..23db3819ab 100644 --- a/docs/content/docs/integrations/adk/shared-state/in-app-agent-read.mdx +++ b/docs/content/docs/integrations/adk/shared-state/in-app-agent-read.mdx @@ -99,7 +99,7 @@ state updates, you can reflect these updates natively in your application. ### Use the `useCoAgent` Hook - With your agent connected and running all that is left is to call the [useCoAgent](/reference/hooks/useCoAgent) hook, pass the agent's name, and + With your agent connected and running all that is left is to call the [useCoAgent](/reference/v1/hooks/useCoAgent) hook, pass the agent's name, and optionally provide an initial state. ```tsx title="ui/app/page.tsx" @@ -149,7 +149,7 @@ state updates, you can reflect these updates natively in your application. ## Rendering agent state in the chat You can also render the agent's state in the chat UI. This is useful for informing the user about the agent's state in a -more in-context way. To do this, you can use the [useCoAgentStateRender](/reference/hooks/useCoAgentStateRender) hook. +more in-context way. To do this, you can use the [useCoAgentStateRender](/reference/v1/hooks/useCoAgentStateRender) hook. ```tsx title="ui/app/page.tsx" import { useCoAgentStateRender } from "@copilotkit/react-core"; // [!code highlight] diff --git a/docs/content/docs/integrations/ag2/frontend-actions.mdx b/docs/content/docs/integrations/ag2/frontend-actions.mdx index bdaeb80872..5a236b3dc3 100644 --- a/docs/content/docs/integrations/ag2/frontend-actions.mdx +++ b/docs/content/docs/integrations/ag2/frontend-actions.mdx @@ -51,7 +51,7 @@ Without frontend actions, agents are limited to just processing and returning da ### Create a frontend action - First, you'll need to create a frontend action using the [useCopilotAction](/reference/hooks/useCopilotAction) hook. Here's a simple one to get you started + First, you'll need to create a frontend action using the [useCopilotAction](/reference/v1/hooks/useCopilotAction) hook. Here's a simple one to get you started that says hello to the user. ```tsx title="page.tsx" diff --git a/docs/content/docs/integrations/ag2/generative-ui/frontend-tools.mdx b/docs/content/docs/integrations/ag2/generative-ui/frontend-tools.mdx index a14e011714..cf5a516812 100644 --- a/docs/content/docs/integrations/ag2/generative-ui/frontend-tools.mdx +++ b/docs/content/docs/integrations/ag2/generative-ui/frontend-tools.mdx @@ -61,7 +61,7 @@ Use frontend tools when you need your agent to interact with client-side primiti ### Create a frontend tool - First, you'll need to create a frontend tool using the [useFrontendTool](/reference/hooks/useFrontendTool) hook. Here's a simple one to get you started + First, you'll need to create a frontend tool using the [useFrontendTool](/reference/v1/hooks/useFrontendTool) hook. Here's a simple one to get you started that says hello to the user. ```tsx title="page.tsx" diff --git a/docs/content/docs/integrations/ag2/readables.mdx b/docs/content/docs/integrations/ag2/readables.mdx index 85ef70f9e5..ef91ff59d4 100644 --- a/docs/content/docs/integrations/ag2/readables.mdx +++ b/docs/content/docs/integrations/ag2/readables.mdx @@ -39,7 +39,7 @@ This context can then be shared with your AG2 backend. ### Add the data to the Copilot - The [`useCopilotReadable` hook](/reference/hooks/useCopilotReadable) is used to add data as context to the Copilot. + The [`useCopilotReadable` hook](/reference/v1/hooks/useCopilotReadable) is used to add data as context to the Copilot. ```tsx title="YourComponent.tsx" showLineNumbers {1, 7-10} "use client" // only necessary if you are using Next.js with the App Router. // [!code highlight] @@ -157,7 +157,7 @@ This context can then be shared with your AG2 backend. ### Add the data to the Copilot - The [`useCopilotReadable` hook](/reference/hooks/useCopilotReadable) is used to add data as context to the Copilot. + The [`useCopilotReadable` hook](/reference/v1/hooks/useCopilotReadable) is used to add data as context to the Copilot. ```tsx title="YourComponent.tsx" showLineNumbers {1, 7-10} "use client" // only necessary if you are using Next.js with the App Router. // [!code highlight] diff --git a/docs/content/docs/integrations/ag2/shared-state/read.mdx b/docs/content/docs/integrations/ag2/shared-state/read.mdx index 049f371576..3d1c6202ce 100644 --- a/docs/content/docs/integrations/ag2/shared-state/read.mdx +++ b/docs/content/docs/integrations/ag2/shared-state/read.mdx @@ -92,7 +92,7 @@ state updates, you can reflect these updates natively in your application. ### Use the `useAgent` Hook - With your agent connected and running all that is left is to call the [useAgent](/reference/hooks/useAgent) hook, pass the agent's ID, and + With your agent connected and running all that is left is to call the [useAgent](/reference/v1/hooks/useAgent) hook, pass the agent's ID, and optionally provide an initial state. ```tsx title="ui/app/page.tsx" @@ -142,7 +142,7 @@ state updates, you can reflect these updates natively in your application. ## Rendering agent state in the chat You can also render the agent's state in the chat UI. This is useful for informing the user about the agent's state in a -more in-context way. To do this, you can use the [useCoAgentStateRender](/reference/hooks/useCoAgentStateRender) hook. +more in-context way. To do this, you can use the [useCoAgentStateRender](/reference/v1/hooks/useCoAgentStateRender) hook. ```tsx title="ui/app/page.tsx" import { useCoAgentStateRender } from "@copilotkit/react-core"; // [!code highlight] diff --git a/docs/content/docs/integrations/ag2/use-agent-hook.mdx b/docs/content/docs/integrations/ag2/use-agent-hook.mdx index e34f2d99ed..03fa6fbf7c 100644 --- a/docs/content/docs/integrations/ag2/use-agent-hook.mdx +++ b/docs/content/docs/integrations/ag2/use-agent-hook.mdx @@ -52,7 +52,7 @@ This page covers everything you need to know about using `useAgent` with AG2. Se className="p-6 rounded-xl text-base" title="Reference" description="Complete API reference documentation for useAgent." - href="/reference/hooks/useAgent" + href="/reference/v1/hooks/useAgent" /> @@ -93,4 +93,4 @@ export function ModelStatus() { - [Shared State](/ag2/shared-state) - Deep dive into state management - [Readables](/ag2/readables) - Pass app context to your AG2 backend -- [useAgent API Reference](/reference/hooks/useAgent) - Complete API documentation +- [useAgent API Reference](/reference/v1/hooks/useAgent) - Complete API documentation diff --git a/docs/content/docs/integrations/agent-spec/generative-ui/frontend-tools.mdx b/docs/content/docs/integrations/agent-spec/generative-ui/frontend-tools.mdx index c337dd4e02..24e1f54835 100644 --- a/docs/content/docs/integrations/agent-spec/generative-ui/frontend-tools.mdx +++ b/docs/content/docs/integrations/agent-spec/generative-ui/frontend-tools.mdx @@ -44,7 +44,7 @@ Use frontend tools when you need your agent to interact with client-side primiti ### Create a frontend tool - First, you'll need to create a frontend tool using the [useFrontendTool](/reference/hooks/useFrontendTool) hook. Here's a simple one to get you started + First, you'll need to create a frontend tool using the [useFrontendTool](/reference/v1/hooks/useFrontendTool) hook. Here's a simple one to get you started that says hello to the user. ```tsx title="page.tsx" @@ -145,7 +145,7 @@ Use frontend tools when you need your agent to interact with client-side primiti if __name__ == "__main__": import uvicorn uvicorn.run(app, host="0.0.0.0", port=8000) - + ``` diff --git a/docs/content/docs/integrations/agno/frontend-tools.mdx b/docs/content/docs/integrations/agno/frontend-tools.mdx index d44a863d84..5fa2330b22 100644 --- a/docs/content/docs/integrations/agno/frontend-tools.mdx +++ b/docs/content/docs/integrations/agno/frontend-tools.mdx @@ -43,7 +43,7 @@ Use frontend tools when you need your agent to interact with client-side primiti ### Create a frontend tool - First, you'll need to create a frontend tool using the [useFrontendTool](/reference/hooks/useFrontendTool) hook. Here's a simple one to get you started + First, you'll need to create a frontend tool using the [useFrontendTool](/reference/v1/hooks/useFrontendTool) hook. Here's a simple one to get you started that says hello to the user. ```tsx title="page.tsx" diff --git a/docs/content/docs/integrations/agno/generative-ui/frontend-tools.mdx b/docs/content/docs/integrations/agno/generative-ui/frontend-tools.mdx index 2dcace3e7d..eb7b386de8 100644 --- a/docs/content/docs/integrations/agno/generative-ui/frontend-tools.mdx +++ b/docs/content/docs/integrations/agno/generative-ui/frontend-tools.mdx @@ -78,7 +78,7 @@ Use frontend tools when you need your agent to interact with client-side primiti ### Create a frontend tool with generative UI - Use the [useFrontendTool](/reference/hooks/useFrontendTool) hook to implement the tool with custom rendering: + Use the [useFrontendTool](/reference/v1/hooks/useFrontendTool) hook to implement the tool with custom rendering: ```tsx title="page.tsx" import { useFrontendTool } from "@copilotkit/react-core" // [!code highlight] diff --git a/docs/content/docs/integrations/agno/use-agent-hook.mdx b/docs/content/docs/integrations/agno/use-agent-hook.mdx index ac5f13d8ba..fec0e4abe2 100644 --- a/docs/content/docs/integrations/agno/use-agent-hook.mdx +++ b/docs/content/docs/integrations/agno/use-agent-hook.mdx @@ -48,7 +48,7 @@ This page covers everything you need to know about using `useAgent` with Agno. S className="p-6 rounded-xl text-base" title="Reference" description="Complete API reference documentation for useAgent." - href="/reference/hooks/useAgent" + href="/reference/v1/hooks/useAgent" /> @@ -62,4 +62,4 @@ import UseAgentSnippet from "@/snippets/use-agent.mdx"; ## See Also -- [useAgent API Reference](/reference/hooks/useAgent) - Complete API documentation +- [useAgent API Reference](/reference/v1/hooks/useAgent) - Complete API documentation diff --git a/docs/content/docs/integrations/aws-strands/frontend-actions.mdx b/docs/content/docs/integrations/aws-strands/frontend-actions.mdx index 47d96b90af..f41b2ade66 100644 --- a/docs/content/docs/integrations/aws-strands/frontend-actions.mdx +++ b/docs/content/docs/integrations/aws-strands/frontend-actions.mdx @@ -94,7 +94,7 @@ Check out the [Frontend Tools overview](/frontend-actions) to understand what th ### Create the frontend tool handler - Create a frontend tool using the [useFrontendTool](/reference/hooks/useFrontendTool) hook. The name must match + Create a frontend tool using the [useFrontendTool](/reference/v1/hooks/useFrontendTool) hook. The name must match the tool name defined in your agent. ```tsx title="app/page.tsx" diff --git a/docs/content/docs/integrations/aws-strands/generative-ui/frontend-tools.mdx b/docs/content/docs/integrations/aws-strands/generative-ui/frontend-tools.mdx index 0553a32fbe..9dd4681032 100644 --- a/docs/content/docs/integrations/aws-strands/generative-ui/frontend-tools.mdx +++ b/docs/content/docs/integrations/aws-strands/generative-ui/frontend-tools.mdx @@ -43,7 +43,7 @@ Use frontend tools when you need your agent to interact with client-side primiti ### Create a frontend tool - Create a frontend tool using the [useFrontendTool](/reference/hooks/useFrontendTool) hook. Here's a simple example + Create a frontend tool using the [useFrontendTool](/reference/v1/hooks/useFrontendTool) hook. Here's a simple example that says hello to the user. ```tsx title="page.tsx" diff --git a/docs/content/docs/integrations/aws-strands/shared-state/in-app-agent-read.mdx b/docs/content/docs/integrations/aws-strands/shared-state/in-app-agent-read.mdx index 81aa6ade26..fb796fbb1b 100644 --- a/docs/content/docs/integrations/aws-strands/shared-state/in-app-agent-read.mdx +++ b/docs/content/docs/integrations/aws-strands/shared-state/in-app-agent-read.mdx @@ -63,7 +63,7 @@ state updates, you can reflect these updates natively in your application. ### Use the `useCoAgent` Hook - With your agent connected and running, call the [useCoAgent](/reference/hooks/useCoAgent) hook, pass the agent's name, and + With your agent connected and running, call the [useCoAgent](/reference/v1/hooks/useCoAgent) hook, pass the agent's name, and optionally provide an initial state. ```tsx title="ui/app/page.tsx" @@ -110,7 +110,7 @@ state updates, you can reflect these updates natively in your application. ## Rendering agent state in the chat You can also render the agent state in the chat UI. This is useful for informing the user about the state in a -more in-context way. To do this, you can use the [useCoAgentStateRender](/reference/hooks/useCoAgentStateRender) hook. +more in-context way. To do this, you can use the [useCoAgentStateRender](/reference/v1/hooks/useCoAgentStateRender) hook. ```tsx title="ui/app/page.tsx" import { useCoAgentStateRender } from "@copilotkit/react-core"; // [!code highlight] diff --git a/docs/content/docs/integrations/aws-strands/shared-state/in-app-agent-write.mdx b/docs/content/docs/integrations/aws-strands/shared-state/in-app-agent-write.mdx index ecc07e7aea..f10fb4cc37 100644 --- a/docs/content/docs/integrations/aws-strands/shared-state/in-app-agent-write.mdx +++ b/docs/content/docs/integrations/aws-strands/shared-state/in-app-agent-write.mdx @@ -62,7 +62,7 @@ You can use this when you want to provide user input or control to your agent's ### Use the `useCoAgent` Hook - With your agent connected and running, call the [useCoAgent](/reference/hooks/useCoAgent) hook, pass the agent's name, and + With your agent connected and running, call the [useCoAgent](/reference/v1/hooks/useCoAgent) hook, pass the agent's name, and use the `setState` function to update the agent state. ```tsx title="ui/app/page.tsx" diff --git a/docs/content/docs/integrations/aws-strands/use-agent-hook.mdx b/docs/content/docs/integrations/aws-strands/use-agent-hook.mdx index 8e005df7c8..1f42c475be 100644 --- a/docs/content/docs/integrations/aws-strands/use-agent-hook.mdx +++ b/docs/content/docs/integrations/aws-strands/use-agent-hook.mdx @@ -48,7 +48,7 @@ This page covers everything you need to know about using `useAgent` with AWS Str className="p-6 rounded-xl text-base" title="Reference" description="Complete API reference documentation for useAgent." - href="/reference/hooks/useAgent" + href="/reference/v1/hooks/useAgent" /> @@ -62,4 +62,4 @@ import UseAgentSnippet from "@/snippets/use-agent.mdx"; ## See Also -- [useAgent API Reference](/reference/hooks/useAgent) - Complete API documentation +- [useAgent API Reference](/reference/v1/hooks/useAgent) - Complete API documentation diff --git a/docs/content/docs/integrations/crewai-crews/frontend-actions.mdx b/docs/content/docs/integrations/crewai-crews/frontend-actions.mdx index 0202a581e3..0313edc9bd 100644 --- a/docs/content/docs/integrations/crewai-crews/frontend-actions.mdx +++ b/docs/content/docs/integrations/crewai-crews/frontend-actions.mdx @@ -22,7 +22,7 @@ Check out the [Frontend Actions overview](/frontend-actions) to understand what ### Create a frontend action - First, you'll need to create a frontend action using the [useCopilotAction](/reference/hooks/useCopilotAction) hook. Here's a simple one to get you started + First, you'll need to create a frontend action using the [useCopilotAction](/reference/v1/hooks/useCopilotAction) hook. Here's a simple one to get you started that says hello to the user. ```tsx title="page.tsx" diff --git a/docs/content/docs/integrations/crewai-crews/quickstart.mdx b/docs/content/docs/integrations/crewai-crews/quickstart.mdx index 7dc7813bd8..8f6ca6a055 100644 --- a/docs/content/docs/integrations/crewai-crews/quickstart.mdx +++ b/docs/content/docs/integrations/crewai-crews/quickstart.mdx @@ -98,7 +98,7 @@ Before you begin, you'll need the following: ## Setup the CopilotKit Provider - The [``](/reference/components/CopilotKit) component must wrap the Copilot-aware parts of your application. For most use-cases, + The [``](/reference/v1/components/CopilotKit) component must wrap the Copilot-aware parts of your application. For most use-cases, it's appropriate to wrap the CopilotKit provider around the entire app, e.g. in your layout.tsx. diff --git a/docs/content/docs/integrations/crewai-crews/shared-state/in-app-agent-read.mdx b/docs/content/docs/integrations/crewai-crews/shared-state/in-app-agent-read.mdx index ee982175db..f01d224682 100644 --- a/docs/content/docs/integrations/crewai-crews/shared-state/in-app-agent-read.mdx +++ b/docs/content/docs/integrations/crewai-crews/shared-state/in-app-agent-read.mdx @@ -45,7 +45,7 @@ You can use this when you want to provide the user with a way to read the output ### Use the `useCoAgent` Hook - With your agent connected and running all that is left is to call the [useCoAgent](/reference/hooks/useCoAgent) hook, pass the agent's name, and + With your agent connected and running all that is left is to call the [useCoAgent](/reference/v1/hooks/useCoAgent) hook, pass the agent's name, and optionally provide an initial state. ```tsx title="ui/app/page.tsx" diff --git a/docs/content/docs/integrations/crewai-crews/use-agent-hook.mdx b/docs/content/docs/integrations/crewai-crews/use-agent-hook.mdx index 77e494abaa..585aab9d6d 100644 --- a/docs/content/docs/integrations/crewai-crews/use-agent-hook.mdx +++ b/docs/content/docs/integrations/crewai-crews/use-agent-hook.mdx @@ -48,7 +48,7 @@ This page covers everything you need to know about using `useAgent` with CrewAI className="p-6 rounded-xl text-base" title="Reference" description="Complete API reference documentation for useAgent." - href="/reference/hooks/useAgent" + href="/reference/v1/hooks/useAgent" /> @@ -62,4 +62,4 @@ import UseAgentSnippet from "@/snippets/use-agent.mdx"; ## See Also -- [useAgent API Reference](/reference/hooks/useAgent) - Complete API documentation +- [useAgent API Reference](/reference/v1/hooks/useAgent) - Complete API documentation diff --git a/docs/content/docs/integrations/crewai-flows/frontend-actions.mdx b/docs/content/docs/integrations/crewai-flows/frontend-actions.mdx index 3395cd1fb7..1a0c2cecd1 100644 --- a/docs/content/docs/integrations/crewai-flows/frontend-actions.mdx +++ b/docs/content/docs/integrations/crewai-flows/frontend-actions.mdx @@ -25,7 +25,7 @@ Check out the [Frontend Actions overview](/frontend-actions) to understand what ### Create a frontend action - First, you'll need to create a frontend action using the [useCopilotAction](/reference/hooks/useCopilotAction) hook. Here's a simple one to get you started + First, you'll need to create a frontend action using the [useCopilotAction](/reference/v1/hooks/useCopilotAction) hook. Here's a simple one to get you started that says hello to the user. ```tsx title="page.tsx" @@ -58,7 +58,7 @@ Check out the [Frontend Actions overview](/frontend-actions) to understand what ### Install the CopilotKit SDK - + Now, we'll need to modify the agent to access these frontend tools. In your terminal, navigate to your agent's folder and continue from there! diff --git a/docs/content/docs/integrations/crewai-flows/quickstart.mdx b/docs/content/docs/integrations/crewai-flows/quickstart.mdx index c2e269b4cd..830e711b63 100644 --- a/docs/content/docs/integrations/crewai-flows/quickstart.mdx +++ b/docs/content/docs/integrations/crewai-flows/quickstart.mdx @@ -128,7 +128,7 @@ Before you begin, you must have a [CrewAI Flow](https://docs.crewai.com/guides/f ### Setup the CopilotKit Provider - The [``](/reference/components/CopilotKit) component must wrap the Copilot-aware parts of your application. For most use-cases, + The [``](/reference/v1/components/CopilotKit) component must wrap the Copilot-aware parts of your application. For most use-cases, it's appropriate to wrap the CopilotKit provider around the entire app, e.g. in your layout.tsx. diff --git a/docs/content/docs/integrations/crewai-flows/shared-state/in-app-agent-read.mdx b/docs/content/docs/integrations/crewai-flows/shared-state/in-app-agent-read.mdx index d309a01829..ef32521bd7 100644 --- a/docs/content/docs/integrations/crewai-flows/shared-state/in-app-agent-read.mdx +++ b/docs/content/docs/integrations/crewai-flows/shared-state/in-app-agent-read.mdx @@ -64,7 +64,7 @@ state updates, you can reflect these updates natively in your application. ### Use the `useCoAgent` Hook - With your agent connected and running all that is left is to call the [useCoAgent](/reference/hooks/useCoAgent) hook, pass the agent's name, and + With your agent connected and running all that is left is to call the [useCoAgent](/reference/v1/hooks/useCoAgent) hook, pass the agent's name, and optionally provide an initial state. ```tsx title="ui/app/page.tsx" @@ -109,7 +109,7 @@ state updates, you can reflect these updates natively in your application. ## Rendering agent state in the chat You can also render the agent's state in the chat UI. This is useful for informing the user about the agent's state in a -more in-context way. To do this, you can use the [useCoAgentStateRender](/reference/hooks/useCoAgentStateRender) hook. +more in-context way. To do this, you can use the [useCoAgentStateRender](/reference/v1/hooks/useCoAgentStateRender) hook. ```tsx title="ui/app/page.tsx" import { useCoAgentStateRender } from "@copilotkit/react-core"; // [!code highlight] diff --git a/docs/content/docs/integrations/crewai-flows/use-agent-hook.mdx b/docs/content/docs/integrations/crewai-flows/use-agent-hook.mdx index 0d0bad91c7..bd61410729 100644 --- a/docs/content/docs/integrations/crewai-flows/use-agent-hook.mdx +++ b/docs/content/docs/integrations/crewai-flows/use-agent-hook.mdx @@ -48,7 +48,7 @@ This page covers everything you need to know about using `useAgent` with CrewAI className="p-6 rounded-xl text-base" title="Reference" description="Complete API reference documentation for useAgent." - href="/reference/hooks/useAgent" + href="/reference/v1/hooks/useAgent" /> @@ -62,4 +62,4 @@ import UseAgentSnippet from "@/snippets/use-agent.mdx"; ## See Also -- [useAgent API Reference](/reference/hooks/useAgent) - Complete API documentation +- [useAgent API Reference](/reference/v1/hooks/useAgent) - Complete API documentation diff --git a/docs/content/docs/integrations/direct-to-llm/guides/connect-your-data/frontend.mdx b/docs/content/docs/integrations/direct-to-llm/guides/connect-your-data/frontend.mdx index f60e5467d4..1aa7a801a9 100644 --- a/docs/content/docs/integrations/direct-to-llm/guides/connect-your-data/frontend.mdx +++ b/docs/content/docs/integrations/direct-to-llm/guides/connect-your-data/frontend.mdx @@ -11,13 +11,13 @@ For your copilot to best answer your users' needs, you will want to provide it w ### Add the data to the Copilot - The [`useCopilotReadable` hook](/reference/hooks/useCopilotReadable) is used to add data as context to the Copilot. + The [`useCopilotReadable` hook](/reference/v1/hooks/useCopilotReadable) is used to add data as context to the Copilot. ```tsx title="YourComponent.tsx" showLineNumbers {1, 7-10} "use client" // only necessary if you are using Next.js with the App Router. // [!code highlight] import { useCopilotReadable } from "@copilotkit/react-core"; // [!code highlight] import { useState } from 'react'; - + export function YourComponent() { // Create colleagues state with some sample data const [colleagues, setColleagues] = useState([ @@ -25,7 +25,7 @@ For your copilot to best answer your users' needs, you will want to provide it w { id: 2, name: "Jane Smith", role: "Designer" }, { id: 3, name: "Bob Wilson", role: "Product Manager" } ]); - + // Define Copilot readable state // [!code highlight:4] useCopilotReadable({ @@ -52,9 +52,9 @@ For your copilot to best answer your users' needs, you will want to provide it w Test it out by passing some data in the hook and asking the copilot questions about it.
    - Example of connecting data to Copilot
    diff --git a/docs/content/docs/integrations/direct-to-llm/guides/copilot-textarea.mdx b/docs/content/docs/integrations/direct-to-llm/guides/copilot-textarea.mdx index 88632852f8..2397530ea6 100644 --- a/docs/content/docs/integrations/direct-to-llm/guides/copilot-textarea.mdx +++ b/docs/content/docs/integrations/direct-to-llm/guides/copilot-textarea.mdx @@ -10,8 +10,8 @@ icon: "lucide/TextSelect" `` is a React component that acts as a drop-in replacement for the standard `