docs(copilot-cloud): integrate copilot cloud into the documentation

Signed-off-by: Tyler Slaton <tyler@copilotkit.ai>

Author: tylerslaton

docs/.env

@@ -1,4 +1,4 @@
-# NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY="pk_test_Zmxvd2luZy1ld2UtMzEuY2xlcmsuYWNjb3VudHMuZGV2JA"
+NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY="pk_test_Zmxvd2luZy1ld2UtMzEuY2xlcmsuYWNjb3VudHMuZGV2JA"
 # NEXT_PUBLIC_POSTHOG_KEY="phc_XZdymVYjrph9Mi0xZYGNyCKexxgblXRR1jMENCtdz5Q"
 # NEXT_PUBLIC_POSTHOG_HOST="https://eu.i.posthog.com"
 # NEXT_PUBLIC_SCARF_PIXEL_ID="ffc9f65d-0186-4575-b065-61d62ea9d7d3"

docs/app/(home)/[[...slug]]/page.tsx

@@ -20,10 +20,12 @@ import { Cards, Card } from "fumadocs-ui/components/card";
 import { PropertyReference } from "@/components/react/property-reference";
 import { getImageMeta } from "fumadocs-ui/og";
 import { InsecurePasswordProtected } from "@/components/react/insecure-password-protected";
+import { LinkToCopilotCloud } from "@/components/react/link-to-copilot-cloud";
 
 const mdxComponents = {
   ...defaultMdxComponents,
   InsecurePasswordProtected: InsecurePasswordProtected,
+  LinkToCopilotCloud: LinkToCopilotCloud,
   Tabs: Tabs,
   Tab: Tab,
   Steps: Steps,

docs/components/layout/top-bar.tsx

@@ -1,11 +1,14 @@
 "use client";
 import { SearchIcon } from "lucide-react";
+// import { LinkToCopilotCloud } from "../react/link-to-copilot-cloud";
 
 export function TopBar() {
   return (
     <>
-      <div className="p-2 h-[60px] hidden lg:block justify-center absolute w-[calc(100vw-var(--fd-sidebar-width)-20px)] ml-[var(--fd-sidebar-width)]">
-        <div className="flex justify-center">
+      <div className="p-2 h-[60px] hidden lg:block absolute w-[calc(100vw-var(--fd-sidebar-width)-20px)] ml-[var(--fd-sidebar-width)]">
+        <div className="flex justify-end items-center gap-4">
+          {/* <LinkToCopilotCloud />
+          <div className="h-8 border-l border-secondary-foreground/20 border-1.5" /> */}
           <SearchToggle />
         </div>
       </div>
@@ -15,7 +18,7 @@ export function TopBar() {
 
 export function SearchToggle() {
   return (
-    <div onClick={toggleSearch} className="cursor-pointer h-10 absolute w-[400px] inline-flex items-center gap-2 border bg-fd-secondary/50 p-1.5 text-sm text-fd-muted-foreground transition-colors hover:bg-fd-accent hover:text-fd-accent-foreground rounded-lg max-md:hidden">
+    <div onClick={toggleSearch} className="cursor-pointer h-10 w-[400px] inline-flex items-center gap-2 border bg-fd-secondary/50 p-1.5 text-sm text-fd-muted-foreground transition-colors hover:bg-fd-accent hover:text-fd-accent-foreground rounded-lg max-md:hidden">
       <SearchIcon className="w-4 h-4" />
       Search
       <div className="ms-auto inline-flex gap-0.5">

docs/components/react/link-to-copilot-cloud.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import Link from "next/link";
+import { useAuth } from "@clerk/nextjs";
+import posthog from "posthog-js";
+import { CloudIcon } from "lucide-react";
+
+export function LinkToCopilotCloud({
+  className,
+  subPath,
+  asButton = true,
+  children
+}: {
+  className?: string;
+  subPath?: string;
+  asButton?: boolean;
+  children?: React.ReactNode;
+}) {
+  const [isClient, setIsClient] = useState(false);
+  const { userId } = useAuth();
+
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+
+  if (!isClient) {
+    return null;
+  }
+  const url = new URL(`https://cloud.copilotkit.ai`);
+  url.searchParams.set("ref", "docs");
+
+  const sessionId = posthog.get_session_id();
+
+  if (sessionId) {
+    url.searchParams.set("session_id", sessionId);
+  }
+
+  if (subPath) {
+    url.pathname += subPath;
+  }
+
+  let cn = `${className}`;
+
+  if (asButton) {
+    cn = "text-indigo-800 ring-1 ring-indigo-200 dark:ring-indigo-900 dark:text-indigo-300 items-center bg-gradient-to-r from-indigo-200/50 to-purple-200/80 dark:from-indigo-900/40 dark:to-purple-900/50 flex p-1.5 px-4 rounded-md ";
+    cn += "transition-all duration-100 hover:ring-2 hover:ring-indigo-400";
+  } else {
+    cn = "_text-primary-600 decoration-from-font underline [text-underline-position:from-font]";
+  }
+
+  return (
+    <Link
+      href={url.toString()}
+      target="_blank"
+      className={cn}
+    >
+      {asButton ? <CloudIcon className="w-5 h-5 mr-2" /> : null}
+      {
+        children ? children : userId ? "Go to Copilot Cloud" : "Sign up for Copilot Cloud"
+      }
+    </Link>
+  );
+}

docs/content/docs/(root)/guides/backend-actions/langgraph-platform-endpoint.mdx

@@ -3,6 +3,12 @@ title: "Remote Endpoint (LangGraph Platform)"
 description: "Connect your CopilotKit application to an agent deployed on LangGraph Platform."
 ---
 import FindCopilotRuntimeSnippet from "@/snippets/find-your-copilot-runtime.mdx";
+import { Accordions, Accordion } from "fumadocs-ui/components/accordion";
+import { TailoredContent, TailoredContentOption } from "@/components/react/tailored-content.tsx";
+import CopilotCloudConfigureRemoteEndpointLangGraphSnippet from "@/snippets/copilot-cloud-configure-remote-endpoint-langgraph.mdx";
+import CopilotCloudConfigureCopilotkitProviderSnippet from "@/snippets/copilot-cloud-configure-copilotkit-provider.mdx";
+import LangGraphPlatformDeploymentTabs from "@/snippets/langgraph-platform-deployment-tabs.mdx";
+import { FaCloud, FaServer } from "react-icons/fa";
 
 <Callout type="info">
     This guide assumes you've created a LangGraph agent, and have a `langgraph.json` file set up. If you need a quick introduction, check out [this brief example
@@ -13,43 +19,68 @@ import FindCopilotRuntimeSnippet from "@/snippets/find-your-copilot-runtime.mdx"
 <Steps>
 
     <Step>
-    ### Deploy your agent to LangGraph Platform
+    ### Deploy your agent
 
-    To integrate an agent CopilotKit application, it needs to be deployed to the LangGraph Platform.<br/>
-    Please follow [the official LangGraph Cloud deployment guide](https://langchain-ai.github.io/langgraph/cloud/deployment/cloud/).<br /><br />
-    A successful deployment would yield a an API URL (often referred here as "deployment URL") in the following format: `https://{project-identifiers}.langgraph.app`. You'll need this later.
+    First, you need to host your agent so that CopilotKit can access it.
 
+    <LangGraphPlatformDeploymentTabs components={props.components} />
     </Step>
 
     <Step>
-        ### Connect the app to the remote endpoint
-        Now that you've deployed your agent to LangGraph Platform, integrate it into your CopilotKit application by modifying your CopilotRuntime configuration.<br />
-
-        First, find your CopilotRuntime instance in your code.
-    </Step>
-
-    <Step>
-
-        Update the `CopilotRuntime` config to include the `remoteEndpoints` property:
-
-        ```tsx
-        const runtime = new CopilotRuntime({
-            // ...existing configuration
-            remoteEndpoints: [ // [!code highlight:9]
-                langGraphPlatformEndpoint({
-                    deploymentUrl: "your-api-url",
-                    langsmithApiKey: "your-langsmith-api-key",
-                    // List of all agents which are available under "graphs" list in your langgraph.json file.
-                    agents: [{ name: 'my_agent', description: 'A helpful LLM agent' }]
-                }),
-            ],
-        });
-        ```
-
-        <Callout type="info">
-            Tip: Use the `langGraphPlatformEndpoint` type constructor function
-        </Callout>
-
+    ### Setup your Copilot Runtime
+
+    <TailoredContent>
+        <TailoredContentOption
+            title="Copilot Cloud (Recommended)"
+            description="I'm already using or want to use Copilot Cloud."
+            icon={<FaCloud />}
+        >
+            <InsecurePasswordProtected>
+            If you followed the [Copilot Cloud Quickstart](/docs/quickstart) and opted to use CopilotCloud,
+            you only need to add your LangGraph Platform deployment URL and LangSmith API key to your CopilotCloud.
+
+            <Accordions className="my-4">
+                <Accordion title="Haven't setup Copilot Cloud yet? Click here!" >
+                    Copilot Cloud hooks into your CopilotKit provider, so you'll need to set it up first if you haven't already.
+                    <CopilotCloudConfigureCopilotkitProviderSnippet components={props.components} />
+                </Accordion>
+            </Accordions>
+            <CopilotCloudConfigureRemoteEndpointLangGraphSnippet components={props.components} />
+            </InsecurePasswordProtected>
+        </TailoredContentOption>
+        <TailoredContentOption
+            title="Self-Hosted"
+            description="I'm using or want to use a self-hosted Copilot Runtime."
+            icon={<FaServer />}
+        >
+            <Steps>
+                <Step>
+                    <FindCopilotRuntimeSnippet components={props.components} />
+                </Step>
+                <Step>
+                    Update the `CopilotRuntime` config to include the `remoteEndpoints` property:
+
+                    ```tsx
+                    const runtime = new CopilotRuntime({
+                        // ...existing configuration
+                        remoteEndpoints: [ // [!code highlight:9]
+                            langGraphPlatformEndpoint({
+                                deploymentUrl: "your-api-url",
+                                langsmithApiKey: "your-langsmith-api-key",
+                                // List of all agents which are available under "graphs" list in your langgraph.json file.
+                                agents: [{ name: 'my_agent', description: 'A helpful LLM agent' }]
+                            }),
+                        ],
+                    });
+                    ```
+
+                    <Callout type="info">
+                        Tip: Use the `langGraphPlatformEndpoint` type constructor function
+                    </Callout>
+                </Step>
+            </Steps>
+        </TailoredContentOption>
+    </TailoredContent>
     </Step>
 
     <Step>

docs/content/docs/(root)/guides/backend-actions/remote-backend-endpoint.mdx

@@ -3,6 +3,11 @@ title: "Remote Endpoint (Python)"
 description: "Connect your CopilotKit application to a remote backend endpoint, allowing integration with Python-based services or other non-Node.js backends."
 ---
 import FindCopilotRuntimeSnippet from "@/snippets/find-your-copilot-runtime.mdx";
+import CopilotCloudConfigureRemoteEndpointSnippet from "@/snippets/copilot-cloud-configure-remote-endpoint.mdx";
+import CopilotCloudConfigureCopilotkitProviderSnippet from "@/snippets/copilot-cloud-configure-copilotkit-provider.mdx";
+import { TailoredContent, TailoredContentOption } from "@/components/react/tailored-content";
+import { Accordions, Accordion } from "fumadocs-ui/components/accordion";
+import { FaCloud, FaServer } from "react-icons/fa";
 
 
 ## Stand up a FastAPI server using the CopilotKit Python SDK
@@ -185,42 +190,51 @@ Since we've added the entry point in `server.py`, you can run your FastAPI serve
 
 Now that you've set up your FastAPI server with the backend actions, integrate it into your CopilotKit application by modifying your `CopilotRuntime` configuration.
 
+<TailoredContent>
+    <TailoredContentOption
+        title="Copilot Cloud (Recommended)"
+        description="I want to use Copilot Cloud to serve my remote endpoint."
+        icon={<FaCloud />}
+    >
+        <InsecurePasswordProtected>
+        <CopilotCloudConfigureRemoteEndpointSnippet components={props.components} />
+        </InsecurePasswordProtected>
+    </TailoredContentOption>
+    <TailoredContentOption
+        title="Self-Hosted"
+        description="I want to use a self-hosted Copilot Runtime to serve my remote endpoint."
+        icon={<FaServer />}
+    >
+        <Steps>
+            <Step>
+                <FindCopilotRuntimeSnippet components={props.components} />
+            </Step>
+            <Step>
+                Update the `CopilotRuntime` to include your new `remote endpoint`.
+
+                ```tsx
+                const runtime = new CopilotRuntime({
+                    // ...existing configuration
+                    remoteEndpoints: [ // [!code highlight:5]
+                        { url: "http://localhost:8000/copilotkit_remote" },
+                    ],
+                });
+                ```
+            </Step>
+        </Steps>
+
+        ## Troubleshooting
+
+        A few things to try if you are running into trouble:
+
+        1. Make sure there is no other local application server running on the 8000 port.
+        2. Under `/agent/my_agent/demo.py`, change host from `0.0.0.0` to `127.0.0.1` or to `localhost`
+
+    </TailoredContentOption>
+</TailoredContent>
 
-<Steps>
-<Step>
-<FindCopilotRuntimeSnippet />
-</Step>
-
-<Step>
-
-Update the `CopilotRuntime` config to include the `remoteEndpoints` property:
-
-```tsx
-const runtime = new CopilotRuntime({
-    // ...existing configuration
-    remoteEndpoints: [ // [!code highlight:5]
-        {
-            url: "http://localhost:8000/copilotkit_remote",
-        },
-    ],
-});
-```
-</Step>
-
-<Step>
 ### Test Your Implementation
 
 After setting up the remote endpoint and modifying your `CopilotRuntime`, you can test your implementation by asking the copilot to perform actions that invoke your Python backend. For example, ask the copilot: "Fetch the name for user ID `123`."
 
-</Step>
-
-</Steps>
-
 ---
-
-## Troubleshooting
-
-A few things to try if you are running into trouble:
-
-1. Make sure there is no other local application server running on the 8000 port.
-2. Under `/agent/my_agent/demo.py`, change host from `0.0.0.0` to `127.0.0.1` or to `localhost`

docs/content/docs/(root)/guides/custom-look-and-feel/headless-ui.mdx

@@ -3,4 +3,33 @@ title: "Headless UI (Fully Custom)"
 description: "Fully customize your Copilot's UI from the ground up using headless UI"
 ---
 
-For documentation on using the headless UI to build fully custom Copilot interfaces, please see the [Headless UI guide](/guides/headless-ui).
+The built-in Copilot UI can be customized in many ways -- both through css and by passing in custom sub-components.
+
+CopilotKit also offers **fully custom headless UI**, through the `useCopilotChat` hook. Everything built with the built-in UI (and more) can be implemented with the headless UI, providing deep customizability.
+
+```tsx
+import { useCopilotChat } from "@copilotkit/react-core";
+import { Role, TextMessage } from "@copilotkit/runtime-client-gql";
+
+export function CustomChatInterface() {
+  const {
+    visibleMessages,
+    appendMessage,
+    setMessages,
+    deleteMessage,
+    reloadMessages,
+    stopGeneration,
+    isLoading,
+  } = useCopilotChat();
+
+  const sendMessage = (content: string) => {
+    appendMessage(new TextMessage({ content, role: Role.User }));
+  };
+
+  return (
+    <div>
+      {/* Implement your custom chat UI here */}
+    </div>
+  );
+}
+```