docs(shell-docs): import CopilotKit from v2

tylerslaton · tylerslaton · commit f73771e865bc · 2026-06-02T10:08:50.000-07:00
diff --git a/showcase/shell-docs/src/content/docs/agent-spec/quickstart.mdx b/showcase/shell-docs/src/content/docs/agent-spec/quickstart.mdx
@@ -345,7 +345,7 @@ hideTOC: true
           Wrap your application with the CopilotKit provider:
 
           ```tsx title="app/layout.tsx"
-          import { CopilotKit } from "@copilotkit/react-core"; // [!code highlight]
+          import { CopilotKit } from "@copilotkit/react-core/v2"; // [!code highlight]
           import "@copilotkit/react-ui/v2/styles.css";
           import './globals.css';
 
diff --git a/showcase/shell-docs/src/content/docs/agentic-protocols/mcp.mdx b/showcase/shell-docs/src/content/docs/agentic-protocols/mcp.mdx
@@ -102,7 +102,7 @@ For further reading, check out the [Model Context Protocol](https://modelcontext
         ```tsx
         "use client";
 
-        import { CopilotKit } from "@copilotkit/react-core";
+        import { CopilotKit } from "@copilotkit/react-core/v2";
 
         export default function App() {
           return (
@@ -200,7 +200,7 @@ For further reading, check out the [Model Context Protocol](https://modelcontext
         ```tsx
         "use client";
 
-        import { CopilotKit } from "@copilotkit/react-core";
+        import { CopilotKit } from "@copilotkit/react-core/v2";
         import { CopilotChat } from "@copilotkit/react-core/v2";
 
         export default function Page() {
diff --git a/showcase/shell-docs/src/content/docs/auth.mdx b/showcase/shell-docs/src/content/docs/auth.mdx
@@ -25,7 +25,7 @@ If you don't need any of those, skip auth entirely. The agent runs anonymously a
 Pass your token via the `headers` prop on `<CopilotKit>`. CopilotKit forwards every request with that header attached.
 
 ```tsx title="frontend/src/app/page.tsx"
-import { CopilotKit } from "@copilotkit/react-core";
+import { CopilotKit } from "@copilotkit/react-core/v2";
 
 <CopilotKit
   runtimeUrl="/api/copilotkit"
@@ -84,7 +84,7 @@ export const GET = (req: NextRequest) => handler(req);
 Pass your token via the `properties` prop. CopilotKit forwards it to LangGraph as a Bearer token automatically.
 
 ```tsx title="frontend/src/app/page.tsx"
-import { CopilotKit } from "@copilotkit/react-core";
+import { CopilotKit } from "@copilotkit/react-core/v2";
 
 <CopilotKit
   runtimeUrl="/api/copilotkit"
@@ -189,7 +189,7 @@ async def my_agent_node(state: AgentState, config: RunnableConfig):
 Pass your token via the `properties` prop. CopilotKit forwards it to AG2's `/chat` endpoint as a request header.
 
 ```tsx title="frontend/src/app/page.tsx"
-import { CopilotKit } from "@copilotkit/react-core";
+import { CopilotKit } from "@copilotkit/react-core/v2";
 
 <CopilotKit
   runtimeUrl="/api/copilotkit"
@@ -274,7 +274,7 @@ def get_account_data(
 Microsoft Agent Framework's AG-UI host expects authentication on a request header rather than the runtime properties channel. Pass the token via `<CopilotKit headers={...}>`:
 
 ```tsx title="frontend/src/app/page.tsx"
-import { CopilotKit } from "@copilotkit/react-core";
+import { CopilotKit } from "@copilotkit/react-core/v2";
 
 <CopilotKit
   runtimeUrl="/api/copilotkit"
diff --git a/showcase/shell-docs/src/content/docs/backend/copilot-runtime.mdx b/showcase/shell-docs/src/content/docs/backend/copilot-runtime.mdx
@@ -40,7 +40,7 @@ export const POST = async (req: NextRequest) => {
 Then point your frontend at the endpoint:
 
 ```tsx
-import { CopilotKit } from "@copilotkit/react-core";
+import { CopilotKit } from "@copilotkit/react-core/v2";
 
 <CopilotKit runtimeUrl="/api/copilotkit">
   <YourApp />
@@ -115,7 +115,7 @@ a2ui: { agents: ["my-agent"] }
 On the frontend, the A2UI renderer activates automatically — no extra configuration needed. If you want to override the default theme, pass an `a2ui` prop to `<CopilotKit>`:
 
 ```tsx
-import { CopilotKit } from "@copilotkit/react-core";
+import { CopilotKit } from "@copilotkit/react-core/v2";
 
 <CopilotKit runtimeUrl="/api/copilotkit" a2ui={{ theme: myCustomTheme }}>
   {children}
@@ -145,7 +145,7 @@ CopilotKit is built on the [AG-UI protocol](./ag-ui), which is an open standard.
 
 ```tsx
 import { HttpAgent } from "@ag-ui/client";
-import { CopilotKit } from "@copilotkit/react-core";
+import { CopilotKit } from "@copilotkit/react-core/v2";
 
 const myAgent = new HttpAgent({
   url: "https://my-agent.example.com",
diff --git a/showcase/shell-docs/src/content/docs/deepagents/index.mdx b/showcase/shell-docs/src/content/docs/deepagents/index.mdx
@@ -261,7 +261,7 @@ Before you begin, you'll need the following:
 
         ```tsx title="app/layout.tsx"
         // [!code highlight:2]
-        import { CopilotKit } from "@copilotkit/react-core";
+        import { CopilotKit } from "@copilotkit/react-core/v2";
         import "@copilotkit/react-core/v2/styles.css";
 
         // ...
diff --git a/showcase/shell-docs/src/content/docs/deploy/agentcore.mdx b/showcase/shell-docs/src/content/docs/deploy/agentcore.mdx
@@ -272,7 +272,7 @@ Browser → CopilotKit Runtime → AgentCore Runtime → your agent
         ### Add the CopilotKit provider
 
         ```tsx title="app/layout.tsx"
-        import { CopilotKit } from "@copilotkit/react-core";
+        import { CopilotKit } from "@copilotkit/react-core/v2";
         import "@copilotkit/react-core/v2/styles.css";
 
         export default function RootLayout({ children }: { children: React.ReactNode }) {
diff --git a/showcase/shell-docs/src/content/docs/integrations/adk/quickstart.mdx b/showcase/shell-docs/src/content/docs/integrations/adk/quickstart.mdx
@@ -253,7 +253,7 @@ Before you begin, you'll need the following:
                 Wrap your application with the CopilotKit provider:
 
                 ```tsx title="app/layout.tsx"
-                import { CopilotKit } from "@copilotkit/react-core"; // [!code highlight]
+                import { CopilotKit } from "@copilotkit/react-core/v2"; // [!code highlight]
                 import "@copilotkit/react-ui/v2/styles.css";
                 import './globals.css';
 
diff --git a/showcase/shell-docs/src/content/docs/integrations/agent-spec/quickstart.mdx b/showcase/shell-docs/src/content/docs/integrations/agent-spec/quickstart.mdx
@@ -345,7 +345,7 @@ hideTOC: true
           Wrap your application with the CopilotKit provider:
 
           ```tsx title="app/layout.tsx"
-          import { CopilotKit } from "@copilotkit/react-core"; // [!code highlight]
+          import { CopilotKit } from "@copilotkit/react-core/v2"; // [!code highlight]
           import "@copilotkit/react-ui/v2/styles.css";
           import './globals.css';
 
diff --git a/showcase/shell-docs/src/content/docs/integrations/aws-strands/quickstart.mdx b/showcase/shell-docs/src/content/docs/integrations/aws-strands/quickstart.mdx
@@ -308,7 +308,7 @@ Before you begin, you'll need the following:
                 Wrap your application with the CopilotKit provider:
 
                 ```tsx title="app/layout.tsx"
-                import { CopilotKit } from "@copilotkit/react-core"; // [!code highlight]
+                import { CopilotKit } from "@copilotkit/react-core/v2"; // [!code highlight]
                 import "@copilotkit/react-ui/v2/styles.css";
                 import './globals.css';
 
diff --git a/showcase/shell-docs/src/content/docs/integrations/deepagents/quickstart.mdx b/showcase/shell-docs/src/content/docs/integrations/deepagents/quickstart.mdx
@@ -340,7 +340,7 @@ Before you begin, you'll need the following:
         Wrap your application with the CopilotKit provider:
 
         ```tsx title="app/layout.tsx"
-        import { CopilotKit } from "@copilotkit/react-core";
+        import { CopilotKit } from "@copilotkit/react-core/v2";
         import "@copilotkit/react-ui/v2/styles.css";
 
         // ...
diff --git a/showcase/shell-docs/src/content/docs/integrations/langgraph/deep-agents.mdx b/showcase/shell-docs/src/content/docs/integrations/langgraph/deep-agents.mdx
@@ -264,7 +264,7 @@ Before you begin, you'll need the following:
 
         ```tsx title="app/layout.tsx"
         // [!code highlight:2]
-        import { CopilotKit } from "@copilotkit/react-core";
+        import { CopilotKit } from "@copilotkit/react-core/v2";
         import "@copilotkit/react-core/v2/styles.css";
 
         // ...
diff --git a/showcase/shell-docs/src/content/docs/integrations/langgraph/quickstart.mdx b/showcase/shell-docs/src/content/docs/integrations/langgraph/quickstart.mdx
@@ -368,7 +368,7 @@ Before you begin, you'll need the following:
 
               ```tsx title="app/layout.tsx"
               // [!code highlight:2]
-              import { CopilotKit } from "@copilotkit/react-core";
+              import { CopilotKit } from "@copilotkit/react-core/v2";
               import "@copilotkit/react-ui/v2/styles.css";
               import './globals.css';
 
diff --git a/showcase/shell-docs/src/content/docs/integrations/microsoft-agent-framework/quickstart.mdx b/showcase/shell-docs/src/content/docs/integrations/microsoft-agent-framework/quickstart.mdx
@@ -355,7 +355,7 @@ Before you begin, you'll need the following:
                 via the Microsoft Agent Framework agent.
 
                 ```tsx title="app/layout.tsx"
-                import { CopilotKit } from "@copilotkit/react-core"; // [!code highlight]
+                import { CopilotKit } from "@copilotkit/react-core/v2"; // [!code highlight]
                 import "@copilotkit/react-ui/v2/styles.css";
                 import './globals.css';
 
diff --git a/showcase/shell-docs/src/content/docs/migrate/v2.mdx b/showcase/shell-docs/src/content/docs/migrate/v2.mdx
@@ -29,7 +29,7 @@ CopilotKit V2 consolidates the frontend into a single package. Both hooks and UI
 ### Update v1 hook imports
 
 Replace v1 hooks from `@copilotkit/react-core` with their v2 equivalents from `@copilotkit/react-core/v2`.
-Keep the `<CopilotKit>` provider imported from `@copilotkit/react-core`.
+Keep the `<CopilotKit>` provider name, but import it from `@copilotkit/react-core/v2`.
 
 #### Before
 ```tsx
@@ -39,8 +39,7 @@ import { useCopilotReadable, useCopilotAction } from "@copilotkit/react-core";
 
 #### After
 ```tsx
-import { CopilotKit } from "@copilotkit/react-core";
-import { useAgent } from "@copilotkit/react-core/v2";
+import { CopilotKit, useAgent } from "@copilotkit/react-core/v2";
 ```
 
 </Step>
@@ -114,8 +113,7 @@ export function App() {
 ### After
 
 ```tsx
-import { CopilotKit } from "@copilotkit/react-core";
-import { CopilotPopup } from "@copilotkit/react-core/v2";
+import { CopilotKit, CopilotPopup } from "@copilotkit/react-core/v2";
 import "@copilotkit/react-core/v2/styles.css";
 
 export function App() {
diff --git a/showcase/shell-docs/src/content/docs/premium/observability.mdx b/showcase/shell-docs/src/content/docs/premium/observability.mdx
@@ -22,7 +22,7 @@ All observability hooks require a `publicLicenseKey` (self-hosted) or `publicApi
 Track user interactions and chat events:
 
 ```tsx
-import { CopilotKit } from "@copilotkit/react-core";
+import { CopilotKit } from "@copilotkit/react-core/v2";
 import { CopilotChat } from "@copilotkit/react-core/v2";
 
 export default function App() {
@@ -57,7 +57,7 @@ export default function App() {
 Monitor runtime errors:
 
 ```tsx
-import { CopilotKit } from "@copilotkit/react-core";
+import { CopilotKit } from "@copilotkit/react-core/v2";
 
 <CopilotKit
   publicApiKey="ck_pub_your_key" // [!code highlight]
diff --git a/showcase/shell-docs/src/content/docs/troubleshooting/error-debugging.mdx b/showcase/shell-docs/src/content/docs/troubleshooting/error-debugging.mdx
@@ -11,7 +11,7 @@ CopilotKit provides a visual error console for local development and a programma
 ## Quick setup
 
 ```tsx
-import { CopilotKit } from "@copilotkit/react-core";
+import { CopilotKit } from "@copilotkit/react-core/v2";
 
 export default function App() {
   return (
@@ -44,7 +44,7 @@ The v2 API provides an `onError` callback on both `CopilotKit` and `CopilotChat`
 Catches every error across the entire application:
 
 ```tsx
-import { CopilotKit } from "@copilotkit/react-core";
+import { CopilotKit } from "@copilotkit/react-core/v2";
 
 <CopilotKit
   runtimeUrl="/api/copilotkit"
diff --git a/showcase/shell-docs/src/content/docs/troubleshooting/observability-connectors.mdx b/showcase/shell-docs/src/content/docs/troubleshooting/observability-connectors.mdx
@@ -10,7 +10,7 @@ See [Observability](/premium/observability) for a complete description of all Ob
 ## Quick Setup
 
 ```tsx
-import { CopilotKit } from "@copilotkit/react-core";
+import { CopilotKit } from "@copilotkit/react-core/v2";
 
 export default function App() {
   return (
@@ -69,7 +69,7 @@ type CopilotKitErrorEvent = {
 - **`context`** — a free-form record carrying whatever extra metadata the error site provides (e.g. `agentId`, `runId`, `toolName`, request URL).
 
 ```tsx
-import { CopilotKit } from "@copilotkit/react-core";
+import { CopilotKit } from "@copilotkit/react-core/v2";
 import { CopilotKitCoreErrorCode } from "@copilotkit/core";
 
 <CopilotKit
@@ -103,7 +103,7 @@ import { CopilotKitCoreErrorCode } from "@copilotkit/core";
 
 ```tsx
 import * as Sentry from "@sentry/react";
-import { CopilotKit } from "@copilotkit/react-core";
+import { CopilotKit } from "@copilotkit/react-core/v2";
 
 <CopilotKit
   publicApiKey="ck_pub_your_key" // or publicLicenseKey for self-hosted
@@ -125,7 +125,7 @@ import { CopilotKit } from "@copilotkit/react-core";
 ### Custom Analytics
 
 ```tsx
-import { CopilotKit } from "@copilotkit/react-core";
+import { CopilotKit } from "@copilotkit/react-core/v2";
 
 <CopilotKit
   publicApiKey="ck_pub_your_key" // or publicLicenseKey for self-hosted
@@ -178,7 +178,7 @@ The three hooks correspond to the three phases of an LLM call. Custom observabil
 ### Development Environment
 
 ```tsx
-import { CopilotKit } from "@copilotkit/react-core";
+import { CopilotKit } from "@copilotkit/react-core/v2";
 
 <CopilotKit
   runtimeUrl="http://localhost:3000/api/copilotkit"
@@ -196,7 +196,7 @@ import { CopilotKit } from "@copilotkit/react-core";
 ### Production Environment
 
 ```tsx
-import { CopilotKit } from "@copilotkit/react-core";
+import { CopilotKit } from "@copilotkit/react-core/v2";
 
 <CopilotKit
   runtimeUrl="https://your-app.com/api/copilotkit"
diff --git a/showcase/shell-docs/src/content/docs/tutorials/multi-conversation-chat.mdx b/showcase/shell-docs/src/content/docs/tutorials/multi-conversation-chat.mdx
@@ -40,7 +40,7 @@ A chat application with a thread sidebar — similar to ChatGPT or Claude's conv
     Create a two-panel layout: a sidebar for the thread list on the left, and the chat area on the right. We'll use a simple flexbox layout.
 
     ```tsx title="App.tsx"
-    import { CopilotKit } from "@copilotkit/react-core";
+    import { CopilotKit } from "@copilotkit/react-core/v2";
 
     export default function App() {
       return (
diff --git a/showcase/shell-docs/src/content/snippets/cloud/cloud-copilotkit-provider.mdx b/showcase/shell-docs/src/content/snippets/cloud/cloud-copilotkit-provider.mdx
@@ -1,7 +1,7 @@
 ```tsx title="layout.tsx"
 import "./globals.css";
 import { ReactNode } from "react";
-import { CopilotKit } from "@copilotkit/react-core"; // [!code highlight]
+import { CopilotKit } from "@copilotkit/react-core/v2"; // [!code highlight]
 
 export default function RootLayout({ children }: { children: ReactNode }) {
   return (
diff --git a/showcase/shell-docs/src/content/snippets/coagents/cloud-configure-copilotkit-provider.mdx b/showcase/shell-docs/src/content/snippets/coagents/cloud-configure-copilotkit-provider.mdx
@@ -1,7 +1,7 @@
 ```tsx title="layout.tsx"
 import "./globals.css";
 import { ReactNode } from "react";
-import { CopilotKit } from "@copilotkit/react-core"; // [!code highlight]
+import { CopilotKit } from "@copilotkit/react-core/v2"; // [!code highlight]
 
 export default function RootLayout({ children }: { children: ReactNode }) {
   return (
diff --git a/showcase/shell-docs/src/content/snippets/coagents/self-host-configure-copilotkit-provider.mdx b/showcase/shell-docs/src/content/snippets/coagents/self-host-configure-copilotkit-provider.mdx
@@ -1,7 +1,7 @@
 ```tsx title="layout.tsx"
 import "./globals.css";
 import { ReactNode } from "react";
-import { CopilotKit } from "@copilotkit/react-core"; // [!code highlight]
+import { CopilotKit } from "@copilotkit/react-core/v2"; // [!code highlight]
 
 export default function RootLayout({ children }: { children: ReactNode }) {
   return (
diff --git a/showcase/shell-docs/src/content/snippets/copilot-cloud-configure-copilotkit-provider.mdx b/showcase/shell-docs/src/content/snippets/copilot-cloud-configure-copilotkit-provider.mdx
@@ -16,7 +16,7 @@ For most use-cases, it's appropriate to wrap the `CopilotKit` provider around th
 import "./globals.css";
 
 import { ReactNode } from "react";
-import { CopilotKit } from "@copilotkit/react-core"; // [!code highlight]
+import { CopilotKit } from "@copilotkit/react-core/v2"; // [!code highlight]
 
 export default function RootLayout({ children }: { children: ReactNode }) {
   return (
diff --git a/showcase/shell-docs/src/content/snippets/integrations/agentcore/index.mdx b/showcase/shell-docs/src/content/snippets/integrations/agentcore/index.mdx
@@ -279,7 +279,7 @@ Browser → CopilotKit Runtime → AgentCore Runtime → your agent
         ### Add the CopilotKit provider
 
         ```tsx title="app/layout.tsx"
-        import { CopilotKit } from "@copilotkit/react-core";
+        import { CopilotKit } from "@copilotkit/react-core/v2";
         import "@copilotkit/react-core/v2/styles.css";
 
         export default function RootLayout({ children }: { children: React.ReactNode }) {
diff --git a/showcase/shell-docs/src/content/snippets/landing-code-showcase.mdx b/showcase/shell-docs/src/content/snippets/landing-code-showcase.mdx
@@ -18,7 +18,7 @@ import {
 ]}>
   <CodePanel>
     ```tsx title="app.tsx"
-    import { CopilotKit } from "@copilotkit/react-core";
+    import { CopilotKit } from "@copilotkit/react-core/v2";
     import { CopilotSidebar } from "@copilotkit/react-core/v2";
     import "@copilotkit/react-core/v2/styles.css";
 
diff --git a/showcase/shell-docs/src/content/snippets/self-hosting-copilot-runtime-configure-copilotkit-provider.mdx b/showcase/shell-docs/src/content/snippets/self-hosting-copilot-runtime-configure-copilotkit-provider.mdx
@@ -1,7 +1,7 @@
 ```tsx title="layout.tsx"
 import "./globals.css";
 import { ReactNode } from "react";
-import { CopilotKit } from "@copilotkit/react-core"; // [!code highlight]
+import { CopilotKit } from "@copilotkit/react-core/v2"; // [!code highlight]
 
 export default function RootLayout({ children }: { children: ReactNode }) {
   return (
diff --git a/showcase/shell-docs/src/content/snippets/shared/generative-ui/a2ui.mdx b/showcase/shell-docs/src/content/snippets/shared/generative-ui/a2ui.mdx
@@ -70,7 +70,7 @@ Once configured, any A2UI output returned from your agent will automatically be
 The A2UI renderer activates automatically — no extra configuration needed on the frontend. Optionally, pass a custom theme:
 
 ```tsx
-import { CopilotKit } from "@copilotkit/react-core";
+import { CopilotKit } from "@copilotkit/react-core/v2";
 import { myCustomTheme } from "@copilotkit/a2ui-renderer";
 
 <CopilotKit runtimeUrl="/api/copilotkit" a2ui={{ theme: myCustomTheme }}>
diff --git a/showcase/shell-docs/src/content/snippets/shared/generative-ui/mcp-apps.mdx b/showcase/shell-docs/src/content/snippets/shared/generative-ui/mcp-apps.mdx
@@ -161,7 +161,7 @@ If you're looking to add an MCP App into an existing application, let's walk thr
 
     ```tsx title="app/layout.tsx"
     // [!code highlight:2]
-    import { CopilotKit } from "@copilotkit/react-core";
+    import { CopilotKit } from "@copilotkit/react-core/v2";
     import "@copilotkit/react-core/v2/styles.css";
 
     // ...
diff --git a/showcase/shell-docs/src/content/snippets/shared/guides/custom-look-and-feel/bring-your-own-components.mdx b/showcase/shell-docs/src/content/snippets/shared/guides/custom-look-and-feel/bring-your-own-components.mdx
diff --git a/showcase/shell-docs/src/content/snippets/shared/guides/custom-look-and-feel/markdown-rendering.mdx b/showcase/shell-docs/src/content/snippets/shared/guides/custom-look-and-feel/markdown-rendering.mdx
diff --git a/showcase/shell-docs/src/content/snippets/shared/premium/observability.mdx b/showcase/shell-docs/src/content/snippets/shared/premium/observability.mdx
diff --git a/showcase/shell-docs/src/content/snippets/shared/reference/copilotkit-component.mdx b/showcase/shell-docs/src/content/snippets/shared/reference/copilotkit-component.mdx
diff --git a/showcase/shell-docs/src/content/snippets/shared/troubleshooting/error-debugging.mdx b/showcase/shell-docs/src/content/snippets/shared/troubleshooting/error-debugging.mdx
diff --git a/showcase/shell-docs/src/content/snippets/shared/troubleshooting/migrate-to-v2.mdx b/showcase/shell-docs/src/content/snippets/shared/troubleshooting/migrate-to-v2.mdx
diff --git a/showcase/shell-docs/src/content/snippets/shared/troubleshooting/observability-connectors.mdx b/showcase/shell-docs/src/content/snippets/shared/troubleshooting/observability-connectors.mdx
diff --git a/showcase/shell-docs/src/content/snippets/use-agent.mdx b/showcase/shell-docs/src/content/snippets/use-agent.mdx
diff --git a/showcase/shell-docs/src/lib/__tests__/docs-render.test.ts b/showcase/shell-docs/src/lib/__tests__/docs-render.test.ts
