Skip to content

Commit e48a34a

Browse files
tylerslatontylerslaton
authored
docs: update landing pages for docs and coagents
Signed-off-by: Tyler Slaton <tyler@copilotkit.ai>
1 parent 5c9aa37 commit e48a34a

20 files changed

Lines changed: 632 additions & 126 deletions

File tree

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,11 +21,14 @@ import { PropertyReference } from "@/components/react/property-reference";
2121
import { getImageMeta } from "fumadocs-ui/og";
2222
import { InsecurePasswordProtected } from "@/components/react/insecure-password-protected";
2323
import { LinkToCopilotCloud } from "@/components/react/link-to-copilot-cloud";
24+
import { Accordions, Accordion} from "fumadocs-ui/components/accordion";
2425

2526
const mdxComponents = {
2627
...defaultMdxComponents,
2728
InsecurePasswordProtected: InsecurePasswordProtected,
2829
LinkToCopilotCloud: LinkToCopilotCloud,
30+
Accordions: Accordions,
31+
Accordion: Accordion,
2932
Tabs: Tabs,
3033
Tab: Tab,
3134
Steps: Steps,

‎docs/app/coagents-0.3-banner.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ export function CoagentsV0_3Banner() {
99

1010
if (isCoagentsPath) {
1111
return (
12-
<div className="bg-gradient-to-r from-indigo-900 via-blue-800 to-indigo-900 text-primary-foreground px-4 py-3 text-center relative">
12+
<div className="bg-gradient-to-r from-indigo-900 via-blue-800 to-indigo-900 text-white px-4 py-3 text-center relative absolute">
1313
<p className="font-medium">
1414
<span className="mr-2 font-bold">CoAgents v0.3</span>
1515
Big quality of life improvements coming soon!

‎docs/components/layout/top-bar.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export function TopBar() {
2424

2525
export function SearchToggle() {
2626
return (
27-
<div onClick={toggleSearch} className="cursor-pointer h-10 w-[240px] 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">
27+
<div onClick={toggleSearch} className="cursor-pointer h-10 w-[240px] 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-md max-md:hidden">
2828
<SearchIcon className="w-4 h-4" />
2929
Search
3030
<div className="ms-auto inline-flex gap-0.5">

‎docs/components/react/cta-cards.tsx‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
2+
import Link from "next/link";
3+
import { IconType } from "react-icons";
4+
5+
interface CTACardProps {
6+
icon: IconType;
7+
title: string;
8+
description: string;
9+
href: string;
10+
iconBgColor?: string;
11+
}
12+
13+
interface CTACardsProps {
14+
cards: CTACardProps[];
15+
columns?: 1 | 2 | 3 | 4;
16+
}
17+
18+
export function CTACard({ icon: Icon, title, description, href, iconBgColor = "bg-indigo-500" }: CTACardProps) {
19+
return (
20+
<Link href={href} className="no-underline">
21+
<Card className="transition-transform hover:scale-105 cursor-pointer shadow-xl shadow-indigo-500/20 h-full">
22+
<CardHeader>
23+
<div className="flex items-center gap-3">
24+
<div className={`flex items-center justify-center ${iconBgColor} rounded-full w-10 h-10`}>
25+
<Icon className="h-6 w-6 text-white"/>
26+
</div>
27+
<CardTitle className="text-md">{title}</CardTitle>
28+
</div>
29+
<CardDescription className="text-md pt-4">{description}</CardDescription>
30+
</CardHeader>
31+
</Card>
32+
</Link>
33+
);
34+
}
35+
36+
export function CTACards({ cards, columns = 3 }: CTACardsProps) {
37+
const lastItemClass = cards.length % columns !== 0 ? `xl:col-span-${columns - (cards.length % columns) + 1}` : '';
38+
39+
return (
40+
<div className={`grid grid-cols-1 gap-y-8 gap-x-4 xl:grid-cols-${columns} py-6`}>
41+
{cards.map((card, index) => (
42+
<div
43+
key={index}
44+
className={index === cards.length - 1 ? lastItemClass : ''}
45+
>
46+
<CTACard {...card} />
47+
</div>
48+
))}
49+
</div>
50+
);
51+
}

‎docs/components/react/examples-carousel.tsx‎

Lines changed: 222 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,222 @@
1+
"use client"
2+
3+
import { Card, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
4+
import { Frame } from "@/components/react/frame";
5+
import { LuBookOpen, LuBanknote, LuPlane, LuFileSpreadsheet, LuCode, LuExternalLink, LuLightbulb } from "react-icons/lu";
6+
import { badgeVariants } from "@/components/ui/badge";
7+
import Link from "next/link";
8+
import { cn } from "@/lib/utils";
9+
import { Tabs, Tab } from "@/components/react/tabs";
10+
import { YouTubeVideo } from "./youtube-video";
11+
12+
interface CarouselExample {
13+
icon: React.ElementType;
14+
title: string;
15+
description: string;
16+
media: {
17+
type: 'video' | 'image' | 'youtube';
18+
src: string;
19+
};
20+
links: {
21+
source?: string;
22+
demo?: string;
23+
tutorial?: string;
24+
};
25+
}
26+
27+
interface ExamplesCarouselProps {
28+
examples?: CarouselExample[];
29+
}
30+
31+
const badgeStyles = cn(badgeVariants({ variant: "outline" }), "bg-indigo-500 hover:bg-indigo-600 text-white no-underline focus:ring-1 focus:ring-indigo-500");
32+
33+
export function ExamplesCarousel({ examples = LandingExamples }: ExamplesCarouselProps) {
34+
return (
35+
<Tabs items={
36+
examples.map((example) => {
37+
const Icon = example.icon;
38+
return {
39+
value: example.title,
40+
icon: <Icon className="w-4 h-4" />
41+
}
42+
})
43+
}>
44+
{examples.map((example, index) => {
45+
const Icon = example.icon;
46+
return (
47+
<Tab key={index} value={example.title}>
48+
<Card className="border-none shadow-none">
49+
<CardHeader>
50+
<CardTitle className="flex items-center text-xl">
51+
<Icon className="mr-2" />
52+
{example.title}
53+
</CardTitle>
54+
<div className="flex flex-wrap gap-2 my-2 pt-2">
55+
{example.links.source && (
56+
<Link
57+
href={example.links.source}
58+
target="_blank"
59+
rel="noopener noreferrer"
60+
className={badgeStyles}
61+
>
62+
<LuCode className="mr-2 h-3.5 w-3.5" />
63+
Source
64+
</Link>
65+
)}
66+
{example.links.demo && (
67+
<Link
68+
href={example.links.demo}
69+
target="_blank"
70+
rel="noopener noreferrer"
71+
className={badgeStyles}
72+
>
73+
<LuExternalLink className="mr-2 h-3.5 w-3.5" />
74+
Demo
75+
</Link>
76+
)}
77+
{example.links.tutorial && (
78+
<Link
79+
href={example.links.tutorial}
80+
target="_blank"
81+
rel="noopener noreferrer"
82+
className={badgeStyles}
83+
>
84+
<LuBookOpen className="mr-2 h-3.5 w-3.5" />
85+
Tutorial
86+
</Link>
87+
)}
88+
</div>
89+
<CardDescription className="text-base pt-6 text-primary">
90+
{example.description}
91+
</CardDescription>
92+
<div className="w-full">
93+
{example.media.type === 'video' && (
94+
<video
95+
autoPlay
96+
loop
97+
muted
98+
controls
99+
playsInline
100+
src={example.media.src}
101+
className="rounded-2xl shadow-xl border w-full h-auto"
102+
/>
103+
)}
104+
{example.media.type === 'image' && (
105+
<Frame className="rounded-2xl shadow-xl">
106+
<img src={example.media.src} className="w-full h-auto" />
107+
</Frame>
108+
)}
109+
{example.media.type === 'youtube' && (
110+
<div className="flex justify-center mt-6">
111+
<YouTubeVideo videoId={example.media.src} />
112+
</div>
113+
)}
114+
</div>
115+
</CardHeader>
116+
</Card>
117+
</Tab>
118+
);
119+
})}
120+
</Tabs>
121+
);
122+
}
123+
124+
export const LandingExamples: CarouselExample[] = [
125+
{
126+
icon: LuFileSpreadsheet,
127+
title: "Spreadsheet Copilot",
128+
description: "A powerful spreadsheet assistant that helps users analyze data, create formulas, and generate insights through natural language interaction.",
129+
media: {
130+
type: "video",
131+
src: "/images/examples/spreadsheets.mp4"
132+
},
133+
links: {
134+
source: "https://github.com/CopilotKit/demo-spreadsheet",
135+
demo: "https://spreadsheet-demo-tau.vercel.app/",
136+
}
137+
},
138+
{
139+
icon: LuBanknote,
140+
title: "Banking Assistant (SaaS Copilot)",
141+
description: "An AI-powered banking interface that helps users manage transactions, analyze spending patterns, and get personalized financial advice.",
142+
media: {
143+
type: "video",
144+
src: "/images/examples/banking.mp4"
145+
},
146+
links: {
147+
source: "https://github.com/CopilotKit/demo-banking",
148+
demo: "https://brex-demo-temp.vercel.app/",
149+
}
150+
},
151+
{
152+
icon: LuPlane,
153+
title: "Agent-Native Travel Planner (ANA)",
154+
description: "Interactive travel planning assistant that helps users discover destinations, create itineraries, and manage trip details with natural language.",
155+
media: {
156+
type: "video",
157+
src: "/images/coagents/tutorials/ai-travel-app/demo.mp4"
158+
},
159+
links: {
160+
source: "https://github.com/CopilotKit/CopilotKit/tree/main/examples/coagents-travel?ref=travel-tutorial",
161+
demo: "https://examples-coagents-ai-travel-app.vercel.app/",
162+
tutorial: "/coagents/tutorials/ai-travel-app"
163+
}
164+
},
165+
{
166+
icon: LuBookOpen,
167+
title: "Agent-Native Research Canvas (ANA)",
168+
description: "An intelligent research assistant that helps users analyze academic papers, synthesize information across multiple sources, and generate comprehensive research summaries.",
169+
media: {
170+
type: "video",
171+
src: "/images/examples/research.mp4"
172+
},
173+
links: {
174+
source: "https://github.com/CopilotKit/CopilotKit/blob/main/examples/coagents-research-canvas/readme.md",
175+
demo: "https://examples-coagents-research-canvas-ui.vercel.app/",
176+
tutorial: "/coagents/videos/research-canvas"
177+
}
178+
}
179+
];
180+
181+
export const CoAgentsExamples: CarouselExample[] = [
182+
{
183+
icon: LuLightbulb,
184+
title: "Introduction",
185+
description: "Hear from the CEO of CopilotKit, Atai Barkai, and learn how CoAgents are paving the way for the next generation of AI-native apps.",
186+
media: {
187+
type: "youtube",
188+
src: "tVjVYJE-Nic"
189+
},
190+
links: {
191+
demo: "https://examples-coagents-research-canvas-ui.vercel.app/",
192+
}
193+
},
194+
{
195+
icon: LuPlane,
196+
title: "Agent-Native Travel Planner (ANA)",
197+
description: "Interactive travel planning assistant that helps users discover destinations, create itineraries, and manage trip details with natural language.",
198+
media: {
199+
type: "video",
200+
src: "/images/coagents/tutorials/ai-travel-app/demo.mp4"
201+
},
202+
links: {
203+
source: "https://github.com/CopilotKit/CopilotKit/tree/main/examples/coagents-travel?ref=travel-tutorial",
204+
demo: "https://examples-coagents-ai-travel-app.vercel.app/",
205+
tutorial: "/coagents/tutorials/ai-travel-app"
206+
}
207+
},
208+
{
209+
icon: LuBookOpen,
210+
title: "Agent-Native Research Canvas (ANA)",
211+
description: "An intelligent research assistant that helps users analyze academic papers, synthesize information across multiple sources, and generate comprehensive research summaries.",
212+
media: {
213+
type: "video",
214+
src: "/images/examples/research.mp4"
215+
},
216+
links: {
217+
source: "https://github.com/CopilotKit/CopilotKit/blob/main/examples/coagents-research-canvas/readme.md",
218+
demo: "https://examples-coagents-research-canvas-ui.vercel.app/",
219+
tutorial: "/coagents/videos/research-canvas"
220+
}
221+
}
222+
]

‎docs/components/react/frame.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ export function Frame({
66
description,
77
}: {
88
children: React.ReactNode;
9-
className: string;
9+
className?: string;
1010
description?: string;
1111
}) {
1212
return (

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ export function LinkToCopilotCloud({
2727
if (!isClient) {
2828
return null;
2929
}
30-
const url = new URL(`https://cloud.copilotkit.ai`);
30+
const url = new URL(`https://go.copilotkit.ai/copilot-cloud-button-docs`);
3131
url.searchParams.set("ref", "docs");
3232

3333
const sessionId = posthog.get_session_id();
@@ -43,8 +43,8 @@ export function LinkToCopilotCloud({
4343
let cn = `${className}`;
4444

4545
if (asButton) {
46-
cn = "text-indigo-800 dark:text-indigo-300 ring-1 ring-indigo-200 dark:ring-indigo-900 text-sm 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-2 px-4 rounded-md ";
47-
cn += "transition-all duration-100 hover:ring-2 hover:ring-indigo-400 hover:dark:text-indigo-200";
46+
cn = "text-indigo-800 dark:text-indigo-300 ring-1 ring-indigo-200 dark:ring-indigo-900 text-sm 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-2 px-4";
47+
cn += "transition-all duration-100 hover:ring-2 hover:ring-indigo-400 hover:dark:text-indigo-200 shadow-2xl rounded-lg";
4848
} else {
4949
cn = "_text-primary-600 decoration-from-font underline [text-underline-position:from-font]";
5050
}

‎docs/components/react/socials.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ export function Socials({ className }: SocialProps) {
2929
<Button
3030
variant="outline"
3131
asChild
32-
className="h-10 text-muted-foreground hover:bg-indigo-500 hover:text-white"
32+
className="h-10 text-muted-foreground hover:bg-indigo-500 hover:text-white rounded-md shadow"
3333
>
3434
<Link href="https://github.com/CopilotKit/CopilotKit/issues/new/choose" target="_blank" rel="noopener noreferrer">
3535
<FaEdit className="w-4 h-4 mr-2" />

‎docs/components/react/tabs.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -75,8 +75,8 @@ export function Tabs({ items, children, defaultValue, groupId, persist, ...props
7575

7676
return (
7777
<TabsPrimitive.Root className="border rounded-md" value={value} onValueChange={handleValueChange} {...props}>
78-
<ScrollArea className="w-full bg-secondary rounded-md rounded-b-none relative">
79-
<TabsPrimitive.List className="px-4 py-2.5 flex">
78+
<ScrollArea className="w-full rounded-md rounded-b-none relative bg-secondary dark:bg-secondary/40 border-b">
79+
<TabsPrimitive.List className="px-4 py-3 flex">
8080
{normalizedItems.map((item) => (
8181
<TabsPrimitive.Trigger
8282
key={item.value}
@@ -92,7 +92,7 @@ export function Tabs({ items, children, defaultValue, groupId, persist, ...props
9292
{item.value}
9393
</TabsPrimitive.Trigger>
9494
))}
95-
<ScrollBar orientation="horizontal"/>
95+
<ScrollBar orientation="horizontal" className=""/>
9696
</TabsPrimitive.List>
9797
</ScrollArea>
9898
{children}

‎docs/components/react/youtube-video.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,8 @@ export function YouTubeVideo({
2424
return (
2525
<YouTube
2626
videoId={videoId}
27-
className="max-w-[600px] w-full rounded-lg"
27+
className="w-full h-[425px] rounded-lg"
28+
iframeClassName="rounded-2xl w-full h-full shadow-xl border"
2829
opts={opts}
2930
onReady={onPlayerReady}
3031
/>

0 commit comments

Comments
 (0)