@copilotkit/vue 1.83.0 → 2.0.0-rc.1

package/src/v2/components/chat/__tests__/BasicMarkdown.test.ts

@@ -0,0 +1,69 @@
+import { describe, it, expect } from "vitest";
+import { mount } from "@vue/test-utils";
+import BasicMarkdown from "../BasicMarkdown.vue";
+
+describe("BasicMarkdown.vue", () => {
+  it("renders headings", () => {
+    const w = mount(BasicMarkdown, { props: { content: "# Title" } });
+    expect(w.find("h1").text()).toBe("Title");
+  });
+
+  it("renders bold/italic", () => {
+    const w = mount(BasicMarkdown, { props: { content: "**b** *i*" } });
+    expect(w.find("strong").text()).toBe("b");
+    expect(w.find("em").text()).toBe("i");
+  });
+
+  it("renders code blocks", () => {
+    const w = mount(BasicMarkdown, { props: { content: "```\nx\n```" } });
+    expect(w.find("pre code").text()).toContain("x");
+  });
+
+  it("renders tables", () => {
+    const w = mount(BasicMarkdown, {
+      props: { content: "| a | b |\n| --- | --- |\n| 1 | 2 |" },
+    });
+    expect(w.findAll("th")).toHaveLength(2);
+    expect(w.findAll("tbody td")).toHaveLength(2);
+  });
+
+  it("renders links with safe href", () => {
+    const w = mount(BasicMarkdown, {
+      props: { content: "[CK](https://copilotkit.ai)" },
+    });
+    expect(w.find("a").attributes("href")).toBe("https://copilotkit.ai");
+  });
+
+  it("neutralizes javascript: URIs in links (no XSS)", () => {
+    const w = mount(BasicMarkdown, {
+      props: { content: "[x](javascript:alert(1))" },
+    });
+    expect(w.find("a").attributes("href")).toBeUndefined();
+  });
+
+  it("neutralizes javascript: image src", () => {
+    const w = mount(BasicMarkdown, {
+      props: { content: "![x](javascript:alert(1))" },
+    });
+    expect(w.find("img").attributes("src")).toBeUndefined();
+  });
+
+  it("renders nothing for empty content", () => {
+    const w = mount(BasicMarkdown, { props: { content: "" } });
+    expect(w.text()).toBe("");
+  });
+
+  it("rejects data:image/svg+xml image src (SVG script vector)", () => {
+    const w = mount(BasicMarkdown, {
+      props: { content: "![x](data:image/svg+xml;base64,PHN2Zz48L3N2Zz4=)" },
+    });
+    expect(w.find("img").attributes("src")).toBeUndefined();
+  });
+
+  it("still allows data:image/png image src", () => {
+    const w = mount(BasicMarkdown, {
+      props: { content: "![x](data:image/png;base64,iVBORw0KGgo=)" },
+    });
+    expect(w.find("img").attributes("src")).toContain("data:image/png");
+  });
+});

package/src/v2/components/chat/__tests__/CopilotChat.e2e.test.ts

@@ -92,11 +92,14 @@ describe("CopilotChat E2E - Chat Basics and Streaming Patterns", () => {
       agent.emit(runFinishedEvent());
       agent.complete();
 
+      // The streaming renderer splits text across span segments; query by textContent instead.
       await waitFor(() => {
-        const assistantMessage = screen.getByText(
-          "Hello! How can I help you today?",
+        const el = screen.queryAllByText((_t, element) =>
+          (element?.textContent ?? "").includes(
+            "Hello! How can I help you today?",
+          ),
         );
-        expect(assistantMessage).toBeDefined();
+        expect(el.length).toBeGreaterThan(0);
       });
     });
 
@@ -111,22 +114,32 @@ describe("CopilotChat E2E - Chat Basics and Streaming Patterns", () => {
 
       agent.emit(textChunkEvent(messageId, "Once upon"));
 
+      // The streaming renderer splits text across span segments; query by textContent instead.
       await waitFor(() => {
-        expect(screen.getByText(/Once upon/)).toBeDefined();
+        const el = screen.queryAllByText((_t, element) =>
+          (element?.textContent ?? "").includes("Once upon"),
+        );
+        expect(el.length).toBeGreaterThan(0);
       });
 
       agent.emit(textChunkEvent(messageId, " a time"));
 
       await waitFor(() => {
-        expect(screen.getByText(/Once upon a time/)).toBeDefined();
+        const el = screen.queryAllByText((_t, element) =>
+          (element?.textContent ?? "").includes("Once upon a time"),
+        );
+        expect(el.length).toBeGreaterThan(0);
       });
 
       agent.emit(textChunkEvent(messageId, " there was a robot."));
 
       await waitFor(() => {
-        expect(
-          screen.getByText(/Once upon a time there was a robot\./),
-        ).toBeDefined();
+        const el = screen.queryAllByText((_t, element) =>
+          (element?.textContent ?? "").includes(
+            "Once upon a time there was a robot.",
+          ),
+        );
+        expect(el.length).toBeGreaterThan(0);
       });
 
       agent.emit(runFinishedEvent());
@@ -650,8 +663,11 @@ describe("CopilotChat E2E - Chat Basics and Streaming Patterns", () => {
       );
 
       await waitFor(() => {
-        const allMessages = screen.getAllByText(
-          /Here is some actual text content/,
+        // The streaming renderer splits text across span segments; query by textContent instead.
+        const allMessages = screen.queryAllByText((_t, element) =>
+          (element?.textContent ?? "").includes(
+            "Here is some actual text content",
+          ),
         );
         expect(allMessages.length).toBeGreaterThan(0);
 
@@ -807,8 +823,12 @@ describe("CopilotChat E2E - Chat Basics and Streaming Patterns", () => {
       consumerAgent.emit(runFinishedEvent());
       consumerAgent.complete();
 
+      // The streaming renderer splits text across span segments; query by textContent instead.
       await waitFor(() => {
-        expect(screen.getByText(/I can help with that/)).toBeDefined();
+        const el = screen.queryAllByText((_t, element) =>
+          (element?.textContent ?? "").includes("I can help with that"),
+        );
+        expect(el.length).toBeGreaterThan(0);
       });
 
       await waitFor(
@@ -1014,8 +1034,15 @@ describe("CopilotChat E2E - Chat Basics and Streaming Patterns", () => {
       await agent.emit(reasoningMessageEndEvent(reasoningId));
       await agent.emit(reasoningEndEvent(reasoningId));
 
+      // The streaming renderer splits text across span segments; query by textContent instead.
       await waitFor(() => {
-        expect(screen.getByText(/Part 1 Part 2 Part 3/)).toBeDefined();
+        const el = screen.queryAllByText(
+          (_t, element) =>
+            (element?.textContent ?? "").includes("Part 1") &&
+            (element?.textContent ?? "").includes("Part 2") &&
+            (element?.textContent ?? "").includes("Part 3"),
+        );
+        expect(el.length).toBeGreaterThan(0);
       });
 
       await agent.emit(runFinishedEvent());
@@ -1041,17 +1068,23 @@ describe("CopilotChat E2E - Chat Basics and Streaming Patterns", () => {
       await agent.emit(runFinishedEvent());
       await agent.complete();
 
+      // The streaming renderer splits text across span segments; query by textContent instead.
       await waitFor(() => {
         expect(screen.getByText(/Thought for/)).toBeDefined();
-        expect(screen.getByText("The answer is 42.")).toBeDefined();
+        const el = screen.queryAllByText((_t, element) =>
+          (element?.textContent ?? "").includes("The answer is 42."),
+        );
+        expect(el.length).toBeGreaterThan(0);
       });
 
       const reasoningEl = screen
         .getByText(/Thought for/)
         .closest("[data-message-id]");
       const textEl = screen
-        .getByText("The answer is 42.")
-        .closest("[data-message-id]");
+        .queryAllByText((_t, element) =>
+          (element?.textContent ?? "").includes("The answer is 42."),
+        )[0]
+        ?.closest("[data-message-id]");
 
       if (reasoningEl && textEl) {
         const position = reasoningEl.compareDocumentPosition(textEl);
@@ -1121,8 +1154,12 @@ describe("CopilotChat E2E - Chat Basics and Streaming Patterns", () => {
 
       await agent.emit(textChunkEvent(textId, "Starting answer..."));
 
+      // The streaming renderer splits text across span segments; query by textContent instead.
       await waitFor(() => {
-        expect(screen.getByText(/Starting answer/)).toBeDefined();
+        const el = screen.queryAllByText((_t, element) =>
+          (element?.textContent ?? "").includes("Starting answer"),
+        );
+        expect(el.length).toBeGreaterThan(0);
       });
 
       await waitFor(() => {

package/src/v2/components/chat/__tests__/CopilotChat.licenseWarning.test.ts

@@ -3,10 +3,8 @@ import { defineComponent, h, provide, ref } from "vue";
 import { render, cleanup } from "@testing-library/vue";
 import CopilotKitProvider from "../../../providers/CopilotKitProvider.vue";
 import CopilotChatConfigurationProvider from "../../../providers/CopilotChatConfigurationProvider.vue";
-import {
-  LicenseContextKey,
-  type LicenseContextValue,
-} from "../../../providers/license-context";
+import { LicenseContextKey } from "../../../providers/license-context";
+import type { LicenseContextValue } from "../../../providers/license-context";
 import { StateCapturingAgent } from "../../../__tests__/utils/agents";
 import CopilotChat from "../CopilotChat.vue";
 import CopilotSidebar from "../CopilotSidebar.vue";
@@ -16,9 +14,9 @@ import CopilotPopup from "../CopilotPopup.vue";
  * Vue parity tests for the inline feature warning surfaces on
  * `CopilotChat`, `CopilotSidebar`, and `CopilotPopup`. Mirrors the React
  * inline warning + console.warn behavior at:
- *   packages/react-core/src/v2/components/chat/CopilotChat.tsx
- *   packages/react-core/src/v2/components/chat/CopilotSidebar.tsx
- *   packages/react-core/src/v2/components/chat/CopilotPopup.tsx
+ *   packages/react-core/src/components/chat/CopilotChat.tsx
+ *   packages/react-core/src/components/chat/CopilotSidebar.tsx
+ *   packages/react-core/src/components/chat/CopilotPopup.tsx
  *
  * The default `createLicenseContextValue(null)` is permissive
  * (`checkFeature` always returns true), so the inline warning is never

package/src/v2/components/chat/__tests__/CopilotChatAssistantMessage.markdown.test.ts

@@ -0,0 +1,54 @@
+import { describe, it, expect } from "vitest";
+import { defineComponent, h, provide } from "vue";
+import { render } from "@testing-library/vue";
+import type { AssistantMessage } from "@ag-ui/core";
+import CopilotKitProvider from "../../../providers/CopilotKitProvider.vue";
+import CopilotChatConfigurationProvider from "../../../providers/CopilotChatConfigurationProvider.vue";
+import CopilotChatAssistantMessage from "../CopilotChatAssistantMessage.vue";
+import { MARKDOWN_RENDERER_KEY } from "../../../providers/markdown-renderer";
+
+const message: AssistantMessage = {
+  id: "1",
+  role: "assistant",
+  content: "# Hi",
+};
+
+const Providers = (inner: object) =>
+  defineComponent({
+    components: {
+      CopilotKitProvider,
+      CopilotChatConfigurationProvider,
+    },
+    render() {
+      return h(CopilotKitProvider, { runtimeUrl: "/api/copilotkit" }, () => [
+        h(CopilotChatConfigurationProvider, { threadId: "test-thread" }, () => [
+          h(inner),
+        ]),
+      ]);
+    },
+  });
+
+describe("CopilotChatAssistantMessage markdown (vue)", () => {
+  it("renders basic markdown by default", () => {
+    const Inner = defineComponent({
+      setup: () => () => h(CopilotChatAssistantMessage, { message }),
+    });
+    const { container } = render(Providers(Inner));
+    expect(container.querySelector("h1")?.textContent).toBe("Hi");
+  });
+
+  it("uses the provided renderer when set", () => {
+    const Custom = defineComponent({
+      props: { content: { type: String, default: "" } },
+      setup: (p) => () => h("div", { "data-testid": "custom" }, p.content),
+    });
+    const Inner = defineComponent({
+      setup() {
+        provide(MARKDOWN_RENDERER_KEY, Custom);
+        return () => h(CopilotChatAssistantMessage, { message });
+      },
+    });
+    const { container } = render(Providers(Inner));
+    expect(container.querySelector('[data-testid="custom"]')).not.toBeNull();
+  });
+});

package/src/v2/components/chat/__tests__/CopilotChatAssistantMessage.test.ts

@@ -1064,45 +1064,4 @@ describe("CopilotChatAssistantMessage", () => {
       expect(screen.queryByRole("button", { name: /copy/i })).toBeNull();
     });
   });
-
-  describe("Vue-specific semantics", () => {
-    it("renders markdown image and table actions", () => {
-      const message: AssistantMessage = {
-        id: "assistant-vue-extra",
-        role: "assistant",
-        content: `![Alt text](https://example.com/image.png)\n\n| Feature | Supported |\n| --- | --- |\n| Tables | yes |`,
-        timestamp: new Date(),
-      };
-
-      const Host = defineComponent({
-        components: {
-          CopilotKitProvider,
-          CopilotChatConfigurationProvider,
-          CopilotChatAssistantMessage,
-        },
-        setup() {
-          return { message, TEST_THREAD_ID };
-        },
-        template: `
-          <CopilotKitProvider runtime-url="/api/copilotkit">
-            <CopilotChatConfigurationProvider :thread-id="TEST_THREAD_ID">
-              <CopilotChatAssistantMessage :message="message" />
-            </CopilotChatConfigurationProvider>
-          </CopilotKitProvider>
-        `,
-      });
-
-      renderWithProvider(Host);
-      expect(
-        document.querySelector('button[title="Download image"]'),
-      ).toBeDefined();
-      expect(document.querySelector("table")).toBeDefined();
-      expect(
-        document.querySelector('button[title="Copy table"]'),
-      ).toBeDefined();
-      expect(
-        document.querySelector('button[title="Download table"]'),
-      ).toBeDefined();
-    });
-  });
 });

package/src/v2/components/chat/__tests__/CopilotChatToolRerenders.e2e.test.ts

@@ -223,8 +223,12 @@ describe("Tool Call Re-render Prevention", () => {
       delta: "The weather in Paris is ",
     } as BaseEvent);
 
+    // The streaming renderer splits text across span segments; query by textContent instead.
     await waitFor(() => {
-      expect(screen.getByText(/The weather in Paris is/)).toBeDefined();
+      const el = screen.queryAllByText((_t, element) =>
+        (element?.textContent ?? "").includes("The weather in Paris is"),
+      );
+      expect(el.length).toBeGreaterThan(0);
     });
 
     await agent.emit({
@@ -234,7 +238,10 @@ describe("Tool Call Re-render Prevention", () => {
     } as BaseEvent);
 
     await waitFor(() => {
-      expect(screen.getByText(/currently sunny/)).toBeDefined();
+      const el = screen.queryAllByText((_t, element) =>
+        (element?.textContent ?? "").includes("currently sunny"),
+      );
+      expect(el.length).toBeGreaterThan(0);
     });
 
     await agent.emit({
@@ -244,7 +251,10 @@ describe("Tool Call Re-render Prevention", () => {
     } as BaseEvent);
 
     await waitFor(() => {
-      expect(screen.getByText(/22°C/)).toBeDefined();
+      const el = screen.queryAllByText((_t, element) =>
+        (element?.textContent ?? "").includes("22°C"),
+      );
+      expect(el.length).toBeGreaterThan(0);
     });
 
     const renderCountAfterAllText = toolRenderCount;
@@ -325,8 +335,12 @@ describe("Tool Call Re-render Prevention", () => {
       delta: "Let me search for that...",
     } as BaseEvent);
 
+    // The streaming renderer splits text across span segments; query by textContent instead.
     await waitFor(() => {
-      expect(screen.getByText(/Let me search for that/)).toBeDefined();
+      const el = screen.queryAllByText((_t, element) =>
+        (element?.textContent ?? "").includes("Let me search for that"),
+      );
+      expect(el.length).toBeGreaterThan(0);
     });
 
     const renderCountAfterText = toolRenderCount;

package/src/v2/components/chat/__tests__/markdown-renderer-config.e2e.test.ts

@@ -0,0 +1,59 @@
+import { describe, it, expect } from "vitest";
+import { h, defineComponent, provide } from "vue";
+import { render } from "@testing-library/vue";
+import type { AssistantMessage } from "@ag-ui/core";
+import CopilotKitProvider from "../../../providers/CopilotKitProvider.vue";
+import CopilotChatConfigurationProvider from "../../../providers/CopilotChatConfigurationProvider.vue";
+import CopilotChatAssistantMessage from "../CopilotChatAssistantMessage.vue";
+import { MARKDOWN_RENDERER_KEY } from "../../../providers/markdown-renderer";
+
+const codeMsg: AssistantMessage = {
+  id: "m1",
+  role: "assistant",
+  content: "```\nx\n```",
+} as any;
+
+/** Wraps the component in the required providers, optionally injecting a markdownRenderer. */
+function makeWrapper(rendererValue: unknown) {
+  return defineComponent({
+    render() {
+      return h(CopilotKitProvider, { runtimeUrl: "/api/copilotkit" }, () => [
+        h(CopilotChatConfigurationProvider, { threadId: "test-thread" }, () => [
+          h(
+            defineComponent({
+              setup() {
+                provide(MARKDOWN_RENDERER_KEY, rendererValue as any);
+                return () =>
+                  h(CopilotChatAssistantMessage, {
+                    message: codeMsg,
+                    messages: [codeMsg],
+                  });
+              },
+            }),
+          ),
+        ]),
+      ]);
+    },
+  });
+}
+
+describe("Vue markdownRenderer config", () => {
+  it("provider config configures the built-in default", () => {
+    const { container } = render(
+      makeWrapper({
+        nodeRenderers: {
+          codeBlock: (node: any) =>
+            h("pre", { "data-testid": "prov-code" }, node.text),
+        },
+      }),
+    );
+    expect(container.querySelector('[data-testid="prov-code"]')).not.toBeNull();
+  });
+
+  it("provider component replaces the renderer (escape hatch)", () => {
+    const Custom = (props: { content: string }) =>
+      h("div", { "data-testid": "custom" }, props.content);
+    const { container } = render(makeWrapper(Custom));
+    expect(container.querySelector('[data-testid="custom"]')).not.toBeNull();
+  });
+});

package/src/v2/components/chat/index.ts

@@ -1,4 +1,6 @@
 export * from "./types";
+export { default as BasicMarkdown } from "./BasicMarkdown.vue";
+export { default as StreamingMarkdownDefault } from "./StreamingMarkdownDefault.vue";
 export { default as CopilotChatAssistantMessage } from "./CopilotChatAssistantMessage.vue";
 export { default as CopilotChatAudioRecorder } from "./CopilotChatAudioRecorder.vue";
 import _CopilotChat from "./CopilotChat.vue";

package/src/v2/hooks/__tests__/use-agent.e2e.test.ts

@@ -129,10 +129,14 @@ describe("useAgent e2e", () => {
       await agent.emit(runFinishedEvent());
       await agent.complete();
 
+      // The streaming renderer splits text across span segments; query by textContent instead.
       await waitFor(() => {
-        expect(
-          screen.getByText("Hello! I received your message."),
-        ).toBeDefined();
+        const el = screen.queryAllByText((_text, element) =>
+          (element?.textContent ?? "").includes(
+            "Hello! I received your message.",
+          ),
+        );
+        expect(el.length).toBeGreaterThan(0);
       });
     });
   });

package/src/v2/hooks/__tests__/use-frontend-tool.e2e.test.ts

@@ -556,10 +556,14 @@ describe("useFrontendTool E2E - Dynamic Registration", () => {
         ),
       );
 
+      // The streaming renderer splits text across span segments; query by textContent instead.
       await waitFor(() => {
-        expect(
-          screen.getByText("This is a follow-up message after tool execution"),
-        ).toBeDefined();
+        const el = screen.queryAllByText((_text, element) =>
+          (element?.textContent ?? "").includes(
+            "This is a follow-up message after tool execution",
+          ),
+        );
+        expect(el.length).toBeGreaterThan(0);
       });
 
       await agent.emit(runFinishedEvent());

package/src/v2/hooks/index.ts

@@ -23,7 +23,6 @@ export type {
 } from "./use-attachments";
 export { useKeyboardHeight } from "./use-keyboard-height";
 export type { KeyboardState } from "./use-keyboard-height";
-export { useKatexStyles } from "./use-katex-styles";
 export { useCapabilities } from "./use-capabilities";
 export { useRenderCustomMessages } from "./use-render-custom-messages";
 export { useRenderActivityMessage } from "./use-render-activity-message";

package/src/v2/hooks/use-pin-to-send.ts

@@ -13,7 +13,7 @@ export interface UsePinToSendOptions {
 }
 
 /**
- * Vue counterpart of React's `usePinToSend` (`packages/react-core/src/v2/hooks/use-pin-to-send.ts`).
+ * Vue counterpart of React's `usePinToSend` (`packages/react-core/src/hooks/use-pin-to-send.ts`).
  *
  * Anchors the chat scroll container so the most recent user message stays
  * pinned near the top of the viewport while the assistant streams a

package/src/v2/providers/CopilotKitProvider.types.ts

@@ -15,6 +15,7 @@ import type {
   VueToolCallRenderer,
 } from "../types";
 import type { Component } from "vue";
+import type { MarkdownRendererValue } from "./markdown-renderer";
 
 export interface CopilotKitProviderProps {
   runtimeUrl?: string;
@@ -119,6 +120,15 @@ export interface CopilotKitProviderProps {
      */
     allowSameOriginFallback?: boolean;
   };
+  /**
+   * Global markdown renderer for assistant/reasoning messages. Either a Vue
+   * component (escape hatch — receives `{ content: string; isStreaming?: boolean }`)
+   * or a `DefaultMarkdownRendererProps` config object (e.g.
+   * `{ nodeRenderers: { codeBlock: ShikiBlock } }`) to configure the built-in
+   * streaming renderer without writing a wrapper. Overrides the built-in default;
+   * a per-message slot still wins.
+   */
+  markdownRenderer?: MarkdownRendererValue;
   /**
    * Enable debug logging for the client-side event pipeline.
    *

package/src/v2/providers/CopilotKitProvider.vue

@@ -45,6 +45,7 @@ import {
 } from "../components/MCPAppsActivityRenderer";
 import { CopilotKitKey, InspectorKey, SandboxFunctionsKey } from "./keys";
 import type { VueInspectorOpenRequest } from "./keys";
+import { MARKDOWN_RENDERER_KEY } from "./markdown-renderer";
 import {
   LicenseContextKey,
   createLicenseContextValue,
@@ -769,6 +770,7 @@ provide(CopilotKitKey, {
   a2uiIncludeSchema,
 });
 provide(SandboxFunctionsKey, sandboxFunctions);
+provide(MARKDOWN_RENDERER_KEY, props.markdownRenderer);
 
 // License context — driven by structured and legacy Runtime authority.
 const retryableRuntimeEntitlementFailure = computed(

package/src/v2/providers/__tests__/CopilotKitProvider.headersAtSendTime.test.ts

@@ -1,7 +1,7 @@
 /**
  * #1937: the headers builder is evaluated when a request is SENT, not during
  * render/setup. Mirrors
- * `react-core/src/v2/providers/__tests__/CopilotKitProvider.headersAtSendTime.test.tsx`.
+ * `react-core/src/providers/__tests__/CopilotKitProvider.headersAtSendTime.test.tsx`.
  */
 import { mount } from "@vue/test-utils";
 import { defineComponent, h, nextTick } from "vue";

package/src/v2/providers/__tests__/markdown-renderer.test.ts

@@ -0,0 +1,40 @@
+import { describe, it, expect } from "vitest";
+import { defineComponent, h, provide } from "vue";
+import { mount } from "@vue/test-utils";
+import {
+  MARKDOWN_RENDERER_KEY,
+  useMarkdownRenderer,
+} from "../markdown-renderer";
+
+describe("useMarkdownRenderer (vue)", () => {
+  it("returns undefined with no provider", () => {
+    let captured: unknown = "unset";
+    const Probe = defineComponent({
+      setup() {
+        captured = useMarkdownRenderer();
+        return () => h("div");
+      },
+    });
+    mount(Probe);
+    expect(captured).toBeUndefined();
+  });
+
+  it("returns the provided renderer", () => {
+    const Custom = defineComponent({ setup: () => () => h("span") });
+    let captured: unknown = null;
+    const Probe = defineComponent({
+      setup() {
+        captured = useMarkdownRenderer();
+        return () => h("div");
+      },
+    });
+    const Wrapper = defineComponent({
+      setup() {
+        provide(MARKDOWN_RENDERER_KEY, Custom);
+        return () => h(Probe);
+      },
+    });
+    mount(Wrapper);
+    expect(captured).toBe(Custom);
+  });
+});

package/src/v2/providers/index.ts

@@ -19,3 +19,4 @@ export {
   type CopilotChatConfigurationValue,
 } from "./types";
 export type { CopilotKitContextValue } from "./keys";
+export * from "./markdown-renderer";

package/src/v2/providers/markdown-renderer.ts

@@ -0,0 +1,39 @@
+import { inject } from "vue";
+import type { Component, InjectionKey } from "vue";
+import type { VueStreamingMarkdownNodeRenderers } from "@copilotkit/markdown-renderer/vue";
+import type { StreamingMarkdownParserOptions } from "@copilotkit/markdown-renderer";
+
+/** Config for the built-in Vue default renderer (pass instead of a component). */
+export interface DefaultMarkdownRendererProps {
+  nodeRenderers?: VueStreamingMarkdownNodeRenderers;
+  caret?: boolean;
+  options?: Partial<StreamingMarkdownParserOptions>;
+  class?: string;
+}
+
+export type MarkdownRendererValue = Component | DefaultMarkdownRendererProps;
+
+/** Injection key for a global markdown renderer component (or `undefined`). */
+export const MARKDOWN_RENDERER_KEY: InjectionKey<
+  MarkdownRendererValue | undefined
+> = Symbol("copilotkit-markdown-renderer");
+
+/**
+ * The markdown renderer provided at the provider level, or `undefined`.
+ * Message components fall back to the built-in `StreamingMarkdownDefault` when undefined.
+ * The value is either a Vue component (accepting `{ content: string; isStreaming?: boolean }`)
+ * or a `DefaultMarkdownRendererProps` config object for the built-in renderer.
+ */
+export function useMarkdownRenderer(): MarkdownRendererValue | undefined {
+  return inject(MARKDOWN_RENDERER_KEY, undefined);
+}
+
+/** A Vue component is a function or an object carrying setup/render/__vccOpts/__name. */
+export function isVueComponentRenderer(value: unknown): value is Component {
+  if (typeof value === "function") return true;
+  if (value && typeof value === "object") {
+    const o = value as Record<string, unknown>;
+    return "setup" in o || "render" in o || "__vccOpts" in o || "__name" in o;
+  }
+  return false;
+}