Add documentation

apps/docs/mint.json

@@ -27,11 +27,6 @@
   },
 
   "anchors": [
-    {
-      "name": "Documentation",
-      "icon": "book-open-cover",
-      "url": "https://docs.copilotkit.ai"
-    },
     {
       "name": "Community",
       "icon": "slack",
@@ -50,7 +45,35 @@
     },
     {
       "group": "API Reference",
-      "pages": ["reference/copilotkit-core"]
+      "pages": [
+        {
+          "group": "Core",
+          "pages": [
+            "reference/copilotkit-core",
+            "reference/proxied-copilot-runtime-agent",
+            "reference/frontend-tool"
+          ]
+        },
+        {
+          "group": "React",
+          "pages": [
+            {
+              "group": "Providers",
+              "pages": [
+                "reference/copilotkit-provider",
+                "reference/copilot-chat-configuration-provider"
+              ]
+            },
+            {
+              "group": "Hooks",
+              "pages": [
+                "reference/use-copilot-kit",
+                "reference/use-agent"
+              ]
+            }
+          ]
+        }
+      ]
     }
   ],
   "footerSocials": {

apps/docs/reference/copilot-chat-configuration-provider.mdx

@@ -0,0 +1,179 @@
+---
+title: CopilotChatConfigurationProvider
+description: "CopilotChatConfigurationProvider API Reference"
+---
+
+`CopilotChatConfigurationProvider` is a React context provider that manages configuration for chat UI components,
+including labels, agent ID, and thread ID. It enables customization of all text labels in the chat interface and
+provides context for chat components to access configuration values.
+
+## What is CopilotChatConfigurationProvider?
+
+The CopilotChatConfigurationProvider:
+
+- Manages UI labels for all chat components (placeholders, button labels, etc.), allowing for localization or
+  customization of the chat interface.
+- Lets you to access the current `agentId` and `threadId`
+- Supports nested configuration with proper inheritance
+
+## Basic Usage
+
+Wrap your chat components with the provider to customize configuration:
+
+```tsx
+import { CopilotChatConfigurationProvider } from "@copilotkitnext/react";
+
+function App() {
+  return (
+    <CopilotChatConfigurationProvider
+      threadId="main-thread"
+      agentId="assistant"
+      labels={{
+        chatInputPlaceholder: "Ask me anything...",
+        assistantMessageToolbarCopyMessageLabel: "Copy response",
+      }}
+    >
+      {/* Your chat components */}
+    </CopilotChatConfigurationProvider>
+  );
+}
+```
+
+## Props
+
+### threadId
+
+`string` **(required)**
+
+A unique identifier for the conversation thread. This is used to maintain conversation history and context.
+
+```tsx
+<CopilotChatConfigurationProvider threadId="conversation-123">{children}</CopilotChatConfigurationProvider>
+```
+
+### agentId
+
+`string` **(optional)**
+
+The ID of the agent to use for this chat context. If not provided, defaults to `"default"`.
+
+```tsx
+<CopilotChatConfigurationProvider threadId="thread-1" agentId="customer-support">
+  {children}
+</CopilotChatConfigurationProvider>
+```
+
+### labels
+
+`Partial<CopilotChatLabels>` **(optional)**
+
+Custom labels for chat UI elements. Any labels not provided will use the default values.
+
+```tsx
+<CopilotChatConfigurationProvider
+  threadId="thread-1"
+  labels={{
+    chatInputPlaceholder: "Type your message here...",
+    chatDisclaimerText: "AI responses may contain errors.",
+    assistantMessageToolbarRegenerateLabel: "Try again",
+  }}
+>
+  {children}
+</CopilotChatConfigurationProvider>
+```
+
+### children
+
+`ReactNode` **(required)**
+
+The React components that will have access to the chat configuration context.
+
+## Using with CopilotChat
+
+The `CopilotChat` component automatically creates its own `CopilotChatConfigurationProvider` internally. When using
+`CopilotChat`, you can pass configuration directly as props:
+
+```tsx
+<CopilotChat
+  threadId="main-thread"
+  agentId="assistant"
+  labels={{
+    chatInputPlaceholder: "How can I help you today?",
+  }}
+/>
+```
+
+### Priority System
+
+When `CopilotChat` is used within an existing `CopilotChatConfigurationProvider`, values are merged with the following
+priority (highest to lowest):
+
+1. Props passed directly to `CopilotChat`
+2. Values from the outer `CopilotChatConfigurationProvider`
+3. Default values
+
+Example:
+
+```tsx
+<CopilotChatConfigurationProvider agentId="outer-agent">
+  <CopilotChat
+    threadId="inner-thread"
+    // agentId inherits from outer: "outer-agent"
+  />
+</CopilotChatConfigurationProvider>
+```
+
+## Accessing Configuration
+
+Use the `useCopilotChatConfiguration` hook to access configuration values in your components:
+
+```tsx
+import { useCopilotChatConfiguration } from "@copilotkitnext/react";
+
+function MyComponent() {
+  const config = useCopilotChatConfiguration();
+
+  if (!config) {
+    // No provider found
+    return null;
+  }
+
+  return (
+    <div>
+      <p>Agent: {config.agentId}</p>
+      <p>Thread: {config.threadId}</p>
+      <p>Labels: {JSON.stringify(config.labels)}</p>
+    </div>
+  );
+}
+```
+
+Note: The hook returns `null` if no provider is found in the component tree.
+
+## Localization Example
+
+The provider is ideal for implementing localization:
+
+```tsx
+import { useTranslation } from "react-i18next";
+
+function LocalizedChat() {
+  const { t } = useTranslation();
+
+  return (
+    <CopilotChatConfigurationProvider
+      threadId="chat-1"
+      labels={{
+        chatInputPlaceholder: t("chat.input.placeholder"),
+        assistantMessageToolbarCopyMessageLabel: t("chat.assistant.copy"),
+        assistantMessageToolbarThumbsUpLabel: t("chat.assistant.thumbsUp"),
+        assistantMessageToolbarThumbsDownLabel: t("chat.assistant.thumbsDown"),
+        userMessageToolbarEditMessageLabel: t("chat.user.edit"),
+        chatDisclaimerText: t("chat.disclaimer"),
+      }}
+    >
+      <CopilotChat />
+    </CopilotChatConfigurationProvider>
+  );
+}
+```

apps/docs/reference/copilot-chat.mdx

@@ -0,0 +1,116 @@
+---
+title: CopilotChat
+description: "CopilotChat Component API Reference"
+---
+
+`CopilotChat` is a React component that provides a complete chat interface for interacting with AI agents. It handles
+message display, user input, tool execution rendering, and agent communication automatically.
+
+## What is CopilotChat?
+
+The CopilotChat component:
+
+- Provides a complete chat UI out of the box
+- Manages conversation threads and message history
+- Automatically connects to agents and handles message routing
+- Renders tool executions with visual feedback
+- Supports customization through props and slots
+- Handles auto-scrolling and responsive layouts
+
+## Basic Usage
+
+```tsx
+import { CopilotChat, CopilotKitProvider } from "@copilotkitnext/react";
+
+function App() {
+  return (
+    <CopilotKitProvider runtimeUrl="/api/copilotkit">
+      <CopilotChat />
+    </CopilotKitProvider>
+  );
+}
+```
+
+## Props
+
+### agentId
+
+`string` **(optional)**
+
+The ID of the agent to connect to. Defaults to `"default"`.
+
+```tsx
+<CopilotChat agentId="assistant" />
+```
+
+### threadId
+
+`string` **(optional)**
+
+The conversation thread ID. If not provided, a new thread ID is automatically generated.
+
+```tsx
+<CopilotChat threadId="thread-123" />
+```
+
+### labels
+
+`Partial<CopilotChatLabels>` **(optional)**
+
+Customize the text labels used throughout the chat interface.
+
+```tsx
+<CopilotChat
+  labels={{
+    chatInputPlaceholder: "Ask me anything...",
+    chatDisclaimerText: "AI assistant - verify important info",
+    // ...
+  }}
+/>
+```
+
+### autoScroll
+
+`boolean` **(optional, default: true)**
+
+Automatically scroll to the bottom when new messages appear.
+
+```tsx
+<CopilotChat autoScroll={false} />
+```
+
+### className
+
+`string` **(optional)**
+
+CSS class name for the root container.
+
+```tsx
+<CopilotChat className="h-screen bg-white" />
+```
+
+### Component Slots
+
+CopilotChat supports slot customization for various parts of the UI:
+
+```tsx
+<CopilotChat
+  messageView={CustomMessageView}
+  input={CustomInput}
+  scrollView={CustomScrollView}
+  scrollToBottomButton={CustomScrollButton}
+  inputContainer={CustomInputContainer}
+  feather={CustomFeather}
+  disclaimer={CustomDisclaimer}
+/>
+```
+
+## Auto-scrolling Behavior
+
+CopilotChat automatically scrolls to the bottom when:
+
+- New messages are added
+- The user is already near the bottom
+- `autoScroll` prop is true (default)
+
+The scroll-to-bottom button appears when the user scrolls up and new content is available.