Skip to content

Commit fcf114a

Browse files
tylerslatonbrandonmcconnell
tylerslaton
and
brandonmcconnell
authored
docs: implement prototypical docs structure for LangGraph (CopilotKit#2585)
Signed-off-by: Tyler Slaton <tyler@copilotkit.ai> Co-authored-by: Brandon McConnell <brandon@dreamthinkbuild.com>
1 parent b857fee commit fcf114a

39 files changed

Lines changed: 10952 additions & 7648 deletions

‎.github/workflows/dojo-e2e.yml‎

Lines changed: 57 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -3,66 +3,72 @@ name: e2e/dojo
33
on:
44
push:
55
branches: [main]
6+
paths-ignore:
7+
- "docs/**"
8+
- "README.md"
69
pull_request:
710
branches: [main]
11+
paths-ignore:
12+
- "docs/**"
13+
- "README.md"
814

915
jobs:
1016
e2e:
1117
name: E2E Tests
1218
runs-on: depot-ubuntu-latest-8
1319

1420
steps:
15-
- name: Checkout CPK
16-
uses: actions/checkout@v4
17-
with:
18-
path: CopilotKit
19-
20-
- name: Checkout AGUI
21-
uses: actions/checkout@v4
22-
with:
23-
repository: ag-ui-protocol/ag-ui
24-
path: ag-ui
25-
ref: main
26-
27-
- name: Set up Node.js
28-
uses: actions/setup-node@v4
29-
with:
30-
node-version: '22'
31-
32-
- name: Install pnpm
33-
uses: pnpm/action-setup@v4
34-
with:
35-
version: 10.13.1
36-
37-
- name: Install Poetry
38-
uses: snok/install-poetry@v1
39-
with:
40-
version: latest
41-
virtualenvs-create: true
42-
virtualenvs-in-project: true
43-
44-
- name: Install uv
45-
uses: astral-sh/setup-uv@v6
46-
47-
- name: Setup pnpm cache
48-
uses: actions/cache@v4
49-
with:
50-
path: ~/.local/share/pnpm/store
51-
key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
52-
restore-keys: |
53-
${{ runner.os }}-pnpm-store-
54-
55-
- name: Install cpk dependencies
56-
working-directory: CopilotKit/CopilotKit
57-
run: pnpm install --frozen-lockfile
58-
59-
- name: Build cpk
60-
working-directory: CopilotKit/CopilotKit
61-
run: |
62-
unset TURBO_API
63-
unset TURBO_TOKEN
64-
unset TURBO_TEAM
65-
pnpm build
21+
- name: Checkout CPK
22+
uses: actions/checkout@v4
23+
with:
24+
path: CopilotKit
25+
26+
- name: Checkout AGUI
27+
uses: actions/checkout@v4
28+
with:
29+
repository: ag-ui-protocol/ag-ui
30+
path: ag-ui
31+
ref: main
32+
33+
- name: Set up Node.js
34+
uses: actions/setup-node@v4
35+
with:
36+
node-version: "22"
37+
38+
- name: Install pnpm
39+
uses: pnpm/action-setup@v4
40+
with:
41+
version: 10.13.1
42+
43+
- name: Install Poetry
44+
uses: snok/install-poetry@v1
45+
with:
46+
version: latest
47+
virtualenvs-create: true
48+
virtualenvs-in-project: true
49+
50+
- name: Install uv
51+
uses: astral-sh/setup-uv@v6
52+
53+
- name: Setup pnpm cache
54+
uses: actions/cache@v4
55+
with:
56+
path: ~/.local/share/pnpm/store
57+
key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
58+
restore-keys: |
59+
${{ runner.os }}-pnpm-store-
60+
61+
- name: Install cpk dependencies
62+
working-directory: CopilotKit/CopilotKit
63+
run: pnpm install --frozen-lockfile
64+
65+
- name: Build cpk
66+
working-directory: CopilotKit/CopilotKit
67+
run: |
68+
unset TURBO_API
69+
unset TURBO_TOKEN
70+
unset TURBO_TEAM
71+
pnpm build
6672
6773
- name: Install ag-ui dependencies
6874
working-directory: ag-ui

‎.github/workflows/preview-envs-deploy.yml‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@ name: Preview Environments
22

33
on:
44
pull_request:
5+
paths-ignore:
6+
- "docs/**"
7+
- "README.md"
58
branches:
69
- main
710

‎docs/components/content/iframe-switcher.tsx‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import * as React from "react";
2+
import {
3+
Tabs,
4+
TabsContent,
5+
TabsList,
6+
TabsTrigger,
7+
} from "fumadocs-ui/components/tabs";
8+
import { Monitor, Code } from "lucide-react";
9+
10+
interface IframeSwitcherProps {
11+
exampleUrl: string;
12+
codeUrl: string;
13+
height?: string;
14+
exampleLabel?: string;
15+
codeLabel?: string;
16+
}
17+
18+
export function IframeSwitcher({
19+
exampleUrl,
20+
codeUrl,
21+
height = "600px",
22+
exampleLabel = "Example",
23+
codeLabel = "Code",
24+
}: IframeSwitcherProps) {
25+
return (
26+
<Tabs defaultValue={exampleLabel}>
27+
<TabsList>
28+
<TabsTrigger value={exampleLabel}>
29+
<Monitor className="w-4 h-4" />
30+
{exampleLabel}
31+
</TabsTrigger>
32+
<TabsTrigger value={codeLabel}>
33+
<Code className="w-4 h-4" />
34+
{codeLabel}
35+
</TabsTrigger>
36+
</TabsList>
37+
<TabsContent className="p-0" value={exampleLabel}>
38+
<iframe
39+
src={exampleUrl}
40+
className="w-full rounded-lg"
41+
style={{ height }}
42+
title="Interactive Example"
43+
sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-modals"
44+
/>
45+
</TabsContent>
46+
<TabsContent className="p-0" value={codeLabel}>
47+
<iframe
48+
src={codeUrl}
49+
className="w-full rounded-lg"
50+
style={{ height }}
51+
title="Code View"
52+
sandbox="allow-scripts allow-same-origin"
53+
/>
54+
</TabsContent>
55+
</Tabs>
56+
);
57+
}

‎docs/components/content/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { IframeSwitcher } from "./iframe-switcher";

‎docs/content/docs/langgraph/advanced/emit-messages.mdx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ title: "Manually emitting messages"
33
icon: "lucide/Radio"
44
---
55
import InstallSDKSnippet from "@/snippets/install-sdk.mdx"
6-
import RunAndConnectSnippet from "@/snippets/coagents/run-and-connect-agent.mdx"
6+
import RunAndConnect from "@/snippets/integrations/langgraph/run-and-connect.mdx"
77

88
While most agent interactions happen automatically through shared state updates as the agent runs, you can also **manually send messages from within your agent code** to provide immediate feedback to users.
99

@@ -28,8 +28,8 @@ Manually emitted messages are great for **when you don't want to wait for the no
2828

2929
<Steps>
3030
<Step>
31-
### Run and Connect Your Agent to CopilotKit
32-
<RunAndConnectSnippet />
31+
### Run and connect your agent
32+
<RunAndConnect components={props.components} />
3333
</Step>
3434
<Step>
3535
### Install the CopilotKit SDK

docs/content/docs/langgraph/multi-agent-flows.mdx renamed to docs/content/docs/langgraph/advanced/multi-agent-flows.mdx

File renamed without changes.

‎docs/content/docs/langgraph/agent-app-context.mdx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
---
2-
title: Shared Context Between the Agent and App
2+
title: Readables
33
icon: "lucide/BookA"
44
description: Share app specific context with your agent.
55
---
66

7-
One of the most common use cases for CopilotKit is to register app state and context using `useCopilotReadble`.
7+
One of the most common use cases for CopilotKit is to register app state and context using `useCopilotReadable`.
88
This way, you can notify CopilotKit of what is going in your app in real time.
99
Some examples might be: the current user, the current page, etc.
1010

‎docs/content/docs/langgraph/agentic-chat-ui.mdx‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,21 +9,27 @@ import SelfHostingCopilotRuntimeConfigureCopilotKitProvider from "@/snippets/sel
99
import CopilotCloudConfigureCopilotKitProvider from "@/snippets/cloud/cloud-copilotkit-provider.mdx";
1010
import ComponentExamples from "@/snippets/component-examples.mdx";
1111
import { UserIcon, PaintbrushIcon, WrenchIcon, RepeatIcon } from "lucide-react";
12+
import { IframeSwitcher } from "@/components/content"
1213

13-
<video src="https://cdn.copilotkit.ai/docs/copilotkit/images/coagents/agentic-chat-ui.mp4" className="rounded-lg shadow-xl" loop playsInline controls autoPlay muted />
14-
<Callout>
15-
This video shows the result of `npx copilotkit@latest init` with the [implementation](#implementation) section applied to it!
16-
</Callout>
14+
<IframeSwitcher
15+
id="frontend-tools-example"
16+
exampleUrl="https://feature-viewer.copilotkit.ai/langgraph/feature/agentic_chat?sidebar=false&chatDefaultOpen=false"
17+
codeUrl="https://feature-viewer.copilotkit.ai/langgraph/feature/agentic_chat?view=code&sidebar=false&codeLayout=tabs"
18+
exampleLabel="Demo"
19+
codeLabel="Code"
20+
height="700px"
21+
/>
1722

1823
## What is this?
1924

2025
Agentic chat UIs are ways for your users to interact with your agent. CopilotKit provides a variety of different components to choose from, each
2126
with their own unique use cases.
2227

23-
If you've gone through the [getting started guide](/coagents/quickstart/langgraph) **you already have a agentic chat UI setup**! Nothing else is needed
28+
If you've gone through the [getting started guide](/langgraph/quickstart) **you already have a agentic chat UI setup**! Nothing else is needed
2429
to get started.
2530

2631
## When should I use this?
32+
2733
CopilotKit provides a variety of different batteries-included components to choose from to create agent native applications. They scale
2834
from simple chat UIs to completely custom applications.
2935

‎docs/content/docs/langgraph/custom-look-and-feel/index.mdx‎

Lines changed: 0 additions & 42 deletions
This file was deleted.

‎docs/content/docs/langgraph/custom-look-and-feel/markdown-rendering-coagents_custom-look-and-feel.mdx‎

Lines changed: 0 additions & 7 deletions
This file was deleted.

0 commit comments

Comments
 (0)