docs: add sign-up CTAs across documentation

samjulien · BenTaylorDev · commit c0fa02703cfe · 2026-05-04T10:00:44.000-05:00
Places dashboard sign-up CTAs on topical pages, threads guides,
reference pages, and integration overview pages. Each CTA is tagged
with a stable surface identifier for PostHog attribution and routes to
the dashboard with matching UTM parameters.

Placements include:
- Home and quickstart landing pages
- Prebuilt-components, shared-state, and chat-related reference pages
- Threads how-to, tutorial, reference, and per-integration threads pages
  (via the shared snippet)
- Inspector, event-inspector, and learning explainer pages
- Premium overview, observability, headless-ui, and self-hosting pages
  (via the shared snippets)
- Integration overview pages — placed via the new afterFeatures slot on
  the four FrameworkOverview-based pages (LangGraph, ADK, AWS Strands,
  Microsoft Agent Framework) and below the features grid on Built-in
  Agent
- Manual-setup quickstart pages (a2a, ag2, agent-spec, built-in-agent,
  crewai-flows, deepagents)

Also normalizes platform copy across the affected pages.
diff --git a/docs/content/docs/(root)/index.mdx b/docs/content/docs/(root)/index.mdx
@@ -19,7 +19,7 @@ CopilotKit is the __frontend stack for agents__ and __generative UI__. Connect a
 
 Look below to find right guide for your needs, whether you're starting from nothing or have existing agent you want to give a prebuilt chat UI or fully custom UI.
 
-<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3 not-prose mb-10 mt-10">
+<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3 not-prose mb-4 mt-10">
   <a href="/quickstart" className="group flex items-start gap-3 bg-card border border-border/80 rounded-lg p-4 no-underline hover:border-primary/60 hover:bg-accent/50 transition-colors shadow-sm">
     <Play className="h-5 w-5 text-primary mt-0.5 flex-shrink-0" />
     <div>
@@ -50,6 +50,14 @@ Look below to find right guide for your needs, whether you're starting from noth
   </a>
 </div>
 
+<OpsPlatformCTA
+  variant="tile"
+  title="Production-ready agents on the free Developer tier"
+  body="Persistent threads, observability, and the full CopilotKit platform."
+  surface="docs:home:hero-tile"
+  className="mb-10"
+/>
+
 {/* ── Code Examples ── */}
 <LandingCodeShowcase components={props.components}/>
 
diff --git a/docs/content/docs/(root)/inspector.mdx b/docs/content/docs/(root)/inspector.mdx
@@ -9,6 +9,13 @@ import { Callout } from "fumadocs-ui/components/callout";
 
 <Inspector components={props.components} />
 
+<OpsPlatformCTA
+  variant="inline"
+  title="The threads tab needs Intelligence"
+  body="When you open the Inspector, threads is the default tab. Sign up for the free Developer tier to see your conversation history."
+  surface="docs:inspector:inline"
+/>
+
 <Callout type="info">
   Want to preview A2UI catalog components directly in your editor? See the [VS Code Extension](/vs-code-extension)
   for live preview with hot-reload.
diff --git a/docs/content/docs/(root)/prebuilt-components.mdx b/docs/content/docs/(root)/prebuilt-components.mdx
@@ -18,6 +18,13 @@ They handle streaming, generative UI, and deep customization — so you can focu
   Want users to send images, audio, or documents alongside their messages? See [Multimodal Attachments](/multimodal-attachments).
 </Callout>
 
+<OpsPlatformCTA
+  variant="inline"
+  title="Want users to resume conversations across sessions?"
+  body="Persistent threads ship with the CopilotKit platform. Try it for free."
+  surface="docs:prebuilt-components:inline"
+/>
+
 ## Get started by choosing your AI backend
 
 <IntegrationGrid path="prebuilt-components" />
diff --git a/docs/content/docs/(root)/quickstart.mdx b/docs/content/docs/(root)/quickstart.mdx
@@ -14,6 +14,13 @@ full stack agent for you.
 npx copilotkit@latest create
 ```
 
+<OpsPlatformCTA
+  variant="inline"
+  title="Building for production?"
+  body="Get persistent threads, observability, and the full CopilotKit platform. Try it for free."
+  surface="docs:quickstart:after-cli"
+/>
+
 ## Start from an AI backend
 
 To get started, choose the shape of your backend to get started with CopilotKit. This will
diff --git a/docs/content/docs/(root)/shared-state.mdx b/docs/content/docs/(root)/shared-state.mdx
@@ -27,6 +27,13 @@ Agentic Copilots maintain a shared state that seamlessly connects your UI with t
 
 Use shared state when you want to facilitate collaboration between your agent and the user. Updates flow both ways — the agent's outputs are automatically reflected in the UI, and any inputs the user updates in the UI are automatically reflected in the agent's execution.
 
+<OpsPlatformCTA
+  variant="inline"
+  title="Building stateful agents?"
+  body="Persistent threads ship with the CopilotKit platform on the free Developer tier."
+  surface="docs:shared-state:inline"
+/>
+
 ## Get started by choosing your AI backend
 
 <IntegrationGrid path="shared-state" exclude={["agno", "agent-spec"]} />
diff --git a/docs/content/docs/(root)/troubleshooting/event-inspector.mdx b/docs/content/docs/(root)/troubleshooting/event-inspector.mdx
@@ -14,6 +14,13 @@ Use it when:
 - You want to understand the AG-UI event lifecycle (e.g., how `RUN_STARTED` flows through `TEXT_MESSAGE_CONTENT` chunks to `RUN_FINISHED`)
 - You need to inspect tool call arguments or state deltas for a specific interaction
 
+<OpsPlatformCTA
+  variant="inline"
+  title="The threads tab needs Intelligence"
+  body="When you open the Inspector, threads is the default tab. Sign up for the free Developer tier to see your conversation history."
+  surface="docs:troubleshooting/event-inspector:inline"
+/>
+
 ## Prerequisites
 
 - A CopilotKit runtime running locally in development mode (`NODE_ENV` is **not** `production`)
diff --git a/docs/content/docs/integrations/a2a/quickstart.mdx b/docs/content/docs/integrations/a2a/quickstart.mdx
@@ -28,6 +28,14 @@ import { Tabs, Tab } from "fumadocs-ui/components/tabs";
   muted
 />
 
+<OpsPlatformCTA
+  variant="card"
+  title="Ship A2A to production"
+  body="Add persistent threads, observability, and the inspector with the CopilotKit platform."
+  ctaLabel="Create a free account"
+  surface="docs:a2a/quickstart:top"
+/>
+
 ## Prerequisites
 
 Before you begin, you'll need the following:
diff --git a/docs/content/docs/integrations/ag2/quickstart.mdx b/docs/content/docs/integrations/ag2/quickstart.mdx
@@ -57,6 +57,14 @@ npx copilotkit@latest init
 
 Follow the prompts to pick AG2 and the features you want, then run the install/start commands it prints.
 
+<OpsPlatformCTA
+  variant="card"
+  title="Ship AG2 to production"
+  body="Add persistent threads, observability, and the inspector with the CopilotKit platform."
+  ctaLabel="Create a free account"
+  surface="docs:ag2/quickstart:top"
+/>
+
 ## Prerequisites
 
 Before you begin, you'll need the following:
@@ -153,3 +161,4 @@ You've now got a Weather Agent running with CopilotKit! This demonstrates how qu
     icon={<UserIcon />}
   />
 </Cards>
+
diff --git a/docs/content/docs/integrations/agent-spec/quickstart.mdx b/docs/content/docs/integrations/agent-spec/quickstart.mdx
@@ -10,6 +10,14 @@ import {
   TailoredContentOption,
 } from "@/components/react/tailored-content.tsx";
 
+<OpsPlatformCTA
+  variant="card"
+  title="Ship Agent Spec to production"
+  body="Add persistent threads, observability, and the inspector with the CopilotKit platform."
+  ctaLabel="Create a free account"
+  surface="docs:agent-spec/quickstart:top"
+/>
+
 ## Prerequisites
 
 - Node.js 20+
@@ -500,3 +508,4 @@ Follow per-adapter tutorials: [LangGraph integration](/agent-spec/langgraph) and
 - Agent Spec docs: https://oracle.github.io/agent-spec/development/docs_home.html
 - Agent Spec x AG-UI tutorial: https://oracle.github.io/agent-spec/26.1.0/howtoguides/howto_ag_ui.html
 - Agent Spec Tracing: https://oracle.github.io/agent-spec/development/agentspec/tracing.html
+
diff --git a/docs/content/docs/integrations/built-in-agent/index.mdx b/docs/content/docs/integrations/built-in-agent/index.mdx
@@ -33,6 +33,14 @@ If you need more control over your agent loop, consider using an [agent framewor
   <Card title="Custom Agent" href="/built-in-agent/custom-agent" description="Bring your own AI SDK, TanStack AI, or custom LLM backend." icon={<Blocks className="text-primary" />} />
 </Cards>
 
+<OpsPlatformCTA
+  variant="card"
+  title="Ship the Built-in Agent to production"
+  body="Add persistent threads, observability, and the inspector with the CopilotKit platform."
+  ctaLabel="Create a free account"
+  surface="docs:built-in-agent:after-features"
+/>
+
 ## Getting Started
 
 Head to the [Quickstart](./quickstart) to set up a working Built-in Agent in minutes.
diff --git a/docs/content/docs/integrations/built-in-agent/quickstart.mdx b/docs/content/docs/integrations/built-in-agent/quickstart.mdx
@@ -24,6 +24,14 @@ import { Tabs, Tab } from "fumadocs-ui/components/tabs";
   muted
 />
 
+<OpsPlatformCTA
+  variant="card"
+  title="Ship the Built-in Agent to production"
+  body="Add persistent threads, observability, and the inspector with the CopilotKit platform."
+  ctaLabel="Create a free account"
+  surface="docs:built-in-agent/quickstart:top"
+/>
+
 ## Prerequisites
 
 Before you begin, you'll need the following:
@@ -225,3 +233,4 @@ Now that you have your basic agent setup, explore these advanced features:
     icon={<MonitorIcon />}
   />
 </Cards>
+
diff --git a/docs/content/docs/integrations/crewai-flows/quickstart.mdx b/docs/content/docs/integrations/crewai-flows/quickstart.mdx
@@ -41,6 +41,14 @@ import CopilotUI from "@/snippets/copilot-ui.mdx";
   muted
 />
 
+<OpsPlatformCTA
+  variant="card"
+  title="Ship CrewAI Flows to production"
+  body="Add persistent threads, observability, and the inspector with the CopilotKit platform."
+  ctaLabel="Create a free account"
+  surface="docs:crewai-flows/quickstart:top"
+/>
+
 ## Prerequisites
 
 Before you begin, you must have a [CrewAI Flow](https://docs.crewai.com/guides/flows/first-flow) deployed on [CrewAI Enterprise](https://docs.crewai.com/enterprise/introduction). If you're looking for a sample flows, check out this [example agentic chat implementation](https://github.com/suhasdeshpande/agentic_chat).
@@ -275,3 +283,4 @@ can help you build power agent native applications.
     icon={<WrenchIcon />}
   />
 </Cards>
+
diff --git a/docs/content/docs/integrations/deepagents/quickstart.mdx b/docs/content/docs/integrations/deepagents/quickstart.mdx
@@ -6,6 +6,14 @@ icon: "lucide/Rocket"
 
 import { Tabs, Tab } from "fumadocs-ui/components/tabs";
 
+<OpsPlatformCTA
+  variant="card"
+  title="Ship Deep Agents to production"
+  body="Add persistent threads, observability, and the inspector with the CopilotKit platform."
+  ctaLabel="Create a free account"
+  surface="docs:deepagents/quickstart:top"
+/>
+
 ## Prerequisites
 
 Before you begin, you'll need the following:
diff --git a/docs/content/docs/integrations/langgraph/index.mdx b/docs/content/docs/integrations/langgraph/index.mdx
@@ -54,5 +54,14 @@ import { FrameworkOverview } from "@/components/content/landing-pages/framework-
       iframeUrl: "https://examples-coagents-research-canvas-ui.vercel.app/"
     }
   ]}
+  afterFeatures={
+    <OpsPlatformCTA
+      variant="card"
+      title="Bring your LangGraph agents to production"
+      body="Add persistent threads, observability, and the inspector with the CopilotKit platform."
+      ctaLabel="Create a free account"
+      surface="docs:langgraph:top"
+    />
+  }
   tutorialLink="/langgraph/tutorials/ai-travel-app"
 />
diff --git a/docs/content/docs/integrations/microsoft-agent-framework/index.mdx b/docs/content/docs/integrations/microsoft-agent-framework/index.mdx
@@ -49,6 +49,15 @@ import { FrameworkOverview } from "@/components/content/landing-pages/framework-
       iframeUrl: "https://feature-viewer.copilotkit.ai/microsoft-agent-framework-dotnet/feature/agentic_chat"
     },
   ]}
+  afterFeatures={
+    <OpsPlatformCTA
+      variant="card"
+      title="Bring your Agent Framework agents to production"
+      body="Add persistent threads, observability, and the inspector with the CopilotKit platform."
+      ctaLabel="Create a free account"
+      surface="docs:microsoft-agent-framework:top"
+    />
+  }
   tutorialLink="/microsoft-agent-framework/quickstart"
 />
 
diff --git a/docs/content/docs/reference/v2/components/CopilotChat.mdx b/docs/content/docs/reference/v2/components/CopilotChat.mdx
@@ -9,6 +9,13 @@ description: "High-level chat component that connects an agent to a chat view"
 
 `CopilotChat` manages messages, running state, and suggestions automatically -- you only need to specify which agent to connect and, optionally, customise labels or slot overrides.
 
+<OpsPlatformCTA
+  variant="inline"
+  title="Looking for chat history?"
+  body="Pair CopilotChat with useThreads on the CopilotKit platform for persistent, resumable conversations on the free Developer tier."
+  surface="docs:reference/v2/components/CopilotChat:inline"
+/>
+
 ## Import
 
 ```tsx
diff --git a/docs/content/docs/reference/v2/components/CopilotKit.mdx b/docs/content/docs/reference/v2/components/CopilotKit.mdx
@@ -9,4 +9,11 @@ import CopilotKitComponent from "@/snippets/shared/reference/copilotkit-componen
   This provider is shared across v1 and v2 APIs. It must be imported from the root package (`@copilotkit/react-core`), not from the v2 subpackage.
 </Callout>
 
+<OpsPlatformCTA
+  variant="inline"
+  title="Need a publicLicenseKey?"
+  body="Get one with the free Developer tier of the CopilotKit platform, which also includes threads, persistence, and observability."
+  surface="docs:reference/v2/components/CopilotKit:inline"
+/>
+
 <CopilotKitComponent components={props.components} />
diff --git a/docs/content/docs/reference/v2/index.mdx b/docs/content/docs/reference/v2/index.mdx
@@ -8,6 +8,13 @@ import { Accordions, Accordion } from "fumadocs-ui/components/accordion";
 
 The v2 React API (`@copilotkit/react-core/v2`) is the next-generation interface for building copilot-powered applications. It provides a streamlined set of hooks and components built on top of the [AG-UI](https://docs.ag-ui.com) agent protocol.
 
+<OpsPlatformCTA
+  variant="inline"
+  title="Building production agents?"
+  body="Persistent threads, observability, and the full CopilotKit platform on the free Developer tier."
+  surface="docs:reference/v2:top"
+/>
+
 ## Provider Setup
 
 The v2 API uses the [`<CopilotKit>`](/reference/v2/components/CopilotKit) provider. Wrap your application with it to configure the runtime connection:
diff --git a/docs/snippets/shared/premium/headless-ui.mdx b/docs/snippets/shared/premium/headless-ui.mdx
@@ -12,6 +12,14 @@ import {
 CopilotKit offers *fully headless UI* through the `useCopilotChatHeadless_c` hook. By using this hook, you can build your own chat interfaces
 from the ground up while still utilizing CopilotKit's core features and ease-of-use.
 
+<OpsPlatformCTA
+  variant="card"
+  title="Headless UI requires an CopilotKit platform license key"
+  body="Sign up for a free account to get a publicLicenseKey and unlock the headless hooks."
+  ctaLabel="Create a free account"
+  surface="docs:premium/headless-ui:top"
+/>
+
 ## Navigation
 This page has all the information you need to get started with CopilotKit's headless UI. Select where you'd like to get started below.
 
diff --git a/docs/snippets/shared/premium/observability.mdx b/docs/snippets/shared/premium/observability.mdx
@@ -5,6 +5,15 @@ icon: "lucide/Activity"
 ---
 
 Monitor CopilotKit with first‑class observability hooks that emit structured signals for chat events, user interactions, and runtime errors. Send these signals straight to your existing stack, including Sentry, Datadog, New Relic, and OpenTelemetry, or route them to your analytics pipeline. The hooks expose stable schemas and IDs so you can join agent events with app telemetry, trace sessions end to end, and alert on failures in real time. Works with Copilot Cloud via `publicApiKey`, or self‑hosted via `publicLicenseKey`.
+
+<OpsPlatformCTA
+  variant="card"
+  title="Observability requires an CopilotKit platform license key"
+  body="Sign up for a free account to get a publicLicenseKey and start monitoring your agents."
+  ctaLabel="Create a free account"
+  surface="docs:premium/observability:top"
+/>
+
 ## Quick Start
 
 <Callout type="info">
diff --git a/docs/snippets/shared/premium/overview.mdx b/docs/snippets/shared/premium/overview.mdx
@@ -37,9 +37,12 @@ Access to premium features requires a public license key. To get yours, follow t
   <Step>
     #### Sign up
 
-    Create a *free* account on [Copilot Cloud](https://cloud.copilotkit.ai).
-
-    This does not require a credit card or use of Copilot Cloud.
+    <OpsPlatformCTA
+      variant="inline"
+      title="Create a free CopilotKit platform account"
+      body="No credit card required. Get a public license key plus persistent threads, observability, and more."
+      surface="docs:premium/overview:signup-step"
+    />
   </Step>
   <Step>
     #### Get your public license key
