core docs: specify all ways of customizing the ui in dedicatd guides

docs/content/docs/(root)/guides/custom-look-and-feel/built-in-ui-components.mdx

@@ -0,0 +1,9 @@
+---
+title: "Built-in Copilot UI"
+description: "An overview of the built-in Copilot UI components."
+---
+import ConnectCopilotUI from "@/snippets/copilot-ui.mdx";
+
+# Setting up the built-in UI components
+
+<ConnectCopilotUI components={props.components} />

docs/content/docs/(root)/guides/custom-look-and-feel/customize-built-in-ui-components.mdx

@@ -1,18 +1,22 @@
 ---
-title: "Custom Look & Feel"
-description: "Learn how to customize the look and feel of CopilotKit in your app."
+title: "Customize the built-in components"
+description: "Customize the look and feel of the built-in Copilot UI components."
 ---
 import { CopilotKitCSS, InteractiveCSSInspector } from "@/components/react/copilotkit-css";
 
+## CSS Variables
+
 <CopilotKitCSS />
 
-## CSS Variables
-CopilotKit uses CSS variables to make it easay to customize the look and feel of the components. Hover over the interactive UI elements below to see the available CSS variables.
+CopilotKit uses CSS variables to make it easay to customize the look and feel of the components.<br/>
+Hover over the interactive UI elements below to see the available CSS variables.
+
+<Callout type="info">
+  Hover over the interactive UI elements below to see the available CSS variables.
+</Callout>
 
 <InteractiveCSSInspector />
 
-## Customize CopilotKit Appearance
-
 You can override / customize the CSS, customize the icons, customize labels, swap out react components, and use headless UI. See below.
 
 ### CSS Variables (Easiest)
@@ -48,7 +52,7 @@ For example:
 }
 ```
 
-### Custom Icons
+## Custom Icons
 
 You can customize the icons by passing the `icons` property to the `CopilotSidebar`, `CopilotPopup` or `CopilotChat` component.
 
@@ -64,7 +68,7 @@ Below is a list of customizable icons:
 - `regenerateIcon`: The icon to use for the regenerate button.
 - `pushToTalkIcon`: The icon to use for push to talk.
 
-### Custom Labels
+## Custom Labels
 
 To customize labels, pass the `labels` property to the `CopilotSidebar`, `CopilotPopup` or `CopilotChat` component.
 
@@ -76,7 +80,7 @@ Below is a list of customizable labels:
 - `stopGenerating`: The label to display on the stop button.
 - `regenerateResponse`: The label to display on the regenerate button.
 
-### Swapping Out Components
+## Swapping Out Components
 
 To completely customize the look and feel of CopilotKit, you can swap out the components of the chat window.
 
@@ -129,4 +133,4 @@ export function CustomResponseButton({ onClick, inProgress }: ResponseButtonProp
 
 ## Headless UI (Full Customizability)
 
-Finally, as a reminder, CopilotKit also supports [Headless UI]() for full customizability and programmatic control.
+Finally, as a reminder, CopilotKit also supports [Headless UI](/guides/custom-look-and-feel/headless-ui) for full customizability and programmatic control.

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

@@ -0,0 +1,35 @@
+---
+title: "Headless Copilot UI"
+description: "Fully customize your Copilot's UI from the ground up using 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>
+  );
+}
+```

docs/content/docs/(root)/guides/custom-look-and-feel/meta.json

@@ -0,0 +1,8 @@
+{
+  "title": "Customize Look & Feel",
+  "pages": [
+    "built-in-ui-components",
+    "customize-built-in-ui-components",
+    "headless-ui"
+  ]
+}

docs/content/docs/(root)/quickstart.mdx

@@ -32,6 +32,9 @@ import ConnectCopilotUI from "@/snippets/copilot-ui.mdx";
 </Step>
 <Step>
   ### Connect Copilot UI
+  You are almost there!
+  Now it's time to setup your Copilot UI.
+
   <ConnectCopilotUI components={props.components} />
 </Step>
 </Steps>

docs/content/docs/coagents/chat-ui/chat-with-agent.mdx

@@ -1,4 +1,7 @@
 ---
-title: Implementing agent chat
+title: Chat with an agent
 ---
 
+No need to do anything else -- chat with an agent JustWorks!
+
+You can use any of the built-in Copilot

docs/content/docs/coagents/chat-ui/meta.json

@@ -1,6 +1,7 @@
 {
   "title": "chat-ui",
   "pages": [
+    "chat-with-agent",
     "render-agent-state",
     "hitl"
   ]

docs/snippets/copilot-ui.mdx

@@ -1,6 +1,5 @@
 
-You are almost there!
-Now it's time to setup your Copilot UI.
+import HeadlessUI from "@/snippets/headless-ui.mdx";
 
 First, import the default styles in your root component (typically `layout.tsx`) :
 
@@ -93,8 +92,8 @@ import "@copilotkit/react-ui/styles.css";
   </Tab>
   <Tab value="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 can be implemented with the headless UI, providing deep customizability.
+
+    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";
@@ -122,6 +121,5 @@ import "@copilotkit/react-ui/styles.css";
       );
     }
     ```
-
   </Tab>
 </Tabs>

docs/snippets/headless-ui.mdx

@@ -0,0 +1,30 @@
+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>
+  );
+}
+```