diff --git a/docs/app/(home)/[[...slug]]/page.tsx b/docs/app/(home)/[[...slug]]/page.tsx index b5ac1a0def..9db7c39356 100644 --- a/docs/app/(home)/[[...slug]]/page.tsx +++ b/docs/app/(home)/[[...slug]]/page.tsx @@ -21,11 +21,14 @@ 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"; +import { Accordions, Accordion} from "fumadocs-ui/components/accordion"; const mdxComponents = { ...defaultMdxComponents, InsecurePasswordProtected: InsecurePasswordProtected, LinkToCopilotCloud: LinkToCopilotCloud, + Accordions: Accordions, + Accordion: Accordion, Tabs: Tabs, Tab: Tab, Steps: Steps, diff --git a/docs/app/coagents-0.3-banner.tsx b/docs/app/coagents-0.3-banner.tsx index 02df376544..f88910287e 100644 --- a/docs/app/coagents-0.3-banner.tsx +++ b/docs/app/coagents-0.3-banner.tsx @@ -9,7 +9,7 @@ export function CoagentsV0_3Banner() { if (isCoagentsPath) { return ( -
+

CoAgents v0.3 Big quality of life improvements coming soon! diff --git a/docs/components/layout/top-bar.tsx b/docs/components/layout/top-bar.tsx index 9f3aa4cc0d..e81f31f00a 100644 --- a/docs/components/layout/top-bar.tsx +++ b/docs/components/layout/top-bar.tsx @@ -24,7 +24,7 @@ export function TopBar() { export function SearchToggle() { return ( -

+
Search
diff --git a/docs/components/react/cta-cards.tsx b/docs/components/react/cta-cards.tsx new file mode 100644 index 0000000000..5eb605666c --- /dev/null +++ b/docs/components/react/cta-cards.tsx @@ -0,0 +1,51 @@ +import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"; +import Link from "next/link"; +import { IconType } from "react-icons"; + +interface CTACardProps { + icon: IconType; + title: string; + description: string; + href: string; + iconBgColor?: string; +} + +interface CTACardsProps { + cards: CTACardProps[]; + columns?: 1 | 2 | 3 | 4; +} + +export function CTACard({ icon: Icon, title, description, href, iconBgColor = "bg-indigo-500" }: CTACardProps) { + return ( + + + +
+
+ +
+ {title} +
+ {description} + + + + ); +} + +export function CTACards({ cards, columns = 3 }: CTACardsProps) { + const lastItemClass = cards.length % columns !== 0 ? `xl:col-span-${columns - (cards.length % columns) + 1}` : ''; + + return ( +
+ {cards.map((card, index) => ( +
+ +
+ ))} +
+ ); +} \ No newline at end of file diff --git a/docs/components/react/examples-carousel.tsx b/docs/components/react/examples-carousel.tsx new file mode 100644 index 0000000000..156c9e1579 --- /dev/null +++ b/docs/components/react/examples-carousel.tsx @@ -0,0 +1,222 @@ +"use client" + +import { Card, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"; +import { Frame } from "@/components/react/frame"; +import { LuBookOpen, LuBanknote, LuPlane, LuFileSpreadsheet, LuCode, LuExternalLink, LuLightbulb } from "react-icons/lu"; +import { badgeVariants } from "@/components/ui/badge"; +import Link from "next/link"; +import { cn } from "@/lib/utils"; +import { Tabs, Tab } from "@/components/react/tabs"; +import { YouTubeVideo } from "./youtube-video"; + +interface CarouselExample { + icon: React.ElementType; + title: string; + description: string; + media: { + type: 'video' | 'image' | 'youtube'; + src: string; + }; + links: { + source?: string; + demo?: string; + tutorial?: string; + }; +} + +interface ExamplesCarouselProps { + examples?: CarouselExample[]; +} + +const badgeStyles = cn(badgeVariants({ variant: "outline" }), "bg-indigo-500 hover:bg-indigo-600 text-white no-underline focus:ring-1 focus:ring-indigo-500"); + +export function ExamplesCarousel({ examples = LandingExamples }: ExamplesCarouselProps) { + return ( + { + const Icon = example.icon; + return { + value: example.title, + icon: + } + }) + }> + {examples.map((example, index) => { + const Icon = example.icon; + return ( + + + + + + {example.title} + +
+ {example.links.source && ( + + + Source + + )} + {example.links.demo && ( + + + Demo + + )} + {example.links.tutorial && ( + + + Tutorial + + )} +
+ + {example.description} + +
+ {example.media.type === 'video' && ( +
+ + + + ); + })} + + ); +} + +export const LandingExamples: CarouselExample[] = [ + { + icon: LuFileSpreadsheet, + title: "Spreadsheet Copilot", + description: "A powerful spreadsheet assistant that helps users analyze data, create formulas, and generate insights through natural language interaction.", + media: { + type: "video", + src: "/images/examples/spreadsheets.mp4" + }, + links: { + source: "https://github.com/CopilotKit/demo-spreadsheet", + demo: "https://spreadsheet-demo-tau.vercel.app/", + } + }, + { + icon: LuBanknote, + title: "Banking Assistant (SaaS Copilot)", + description: "An AI-powered banking interface that helps users manage transactions, analyze spending patterns, and get personalized financial advice.", + media: { + type: "video", + src: "/images/examples/banking.mp4" + }, + links: { + source: "https://github.com/CopilotKit/demo-banking", + demo: "https://brex-demo-temp.vercel.app/", + } + }, + { + icon: LuPlane, + title: "Agent-Native Travel Planner (ANA)", + description: "Interactive travel planning assistant that helps users discover destinations, create itineraries, and manage trip details with natural language.", + media: { + type: "video", + src: "/images/coagents/tutorials/ai-travel-app/demo.mp4" + }, + links: { + source: "https://github.com/CopilotKit/CopilotKit/tree/main/examples/coagents-travel?ref=travel-tutorial", + demo: "https://examples-coagents-ai-travel-app.vercel.app/", + tutorial: "/coagents/tutorials/ai-travel-app" + } + }, + { + icon: LuBookOpen, + title: "Agent-Native Research Canvas (ANA)", + description: "An intelligent research assistant that helps users analyze academic papers, synthesize information across multiple sources, and generate comprehensive research summaries.", + media: { + type: "video", + src: "/images/examples/research.mp4" + }, + links: { + source: "https://github.com/CopilotKit/CopilotKit/blob/main/examples/coagents-research-canvas/readme.md", + demo: "https://examples-coagents-research-canvas-ui.vercel.app/", + tutorial: "/coagents/videos/research-canvas" + } + } +]; + +export const CoAgentsExamples: CarouselExample[] = [ + { + icon: LuLightbulb, + title: "Introduction", + 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.", + media: { + type: "youtube", + src: "tVjVYJE-Nic" + }, + links: { + demo: "https://examples-coagents-research-canvas-ui.vercel.app/", + } + }, + { + icon: LuPlane, + title: "Agent-Native Travel Planner (ANA)", + description: "Interactive travel planning assistant that helps users discover destinations, create itineraries, and manage trip details with natural language.", + media: { + type: "video", + src: "/images/coagents/tutorials/ai-travel-app/demo.mp4" + }, + links: { + source: "https://github.com/CopilotKit/CopilotKit/tree/main/examples/coagents-travel?ref=travel-tutorial", + demo: "https://examples-coagents-ai-travel-app.vercel.app/", + tutorial: "/coagents/tutorials/ai-travel-app" + } + }, + { + icon: LuBookOpen, + title: "Agent-Native Research Canvas (ANA)", + description: "An intelligent research assistant that helps users analyze academic papers, synthesize information across multiple sources, and generate comprehensive research summaries.", + media: { + type: "video", + src: "/images/examples/research.mp4" + }, + links: { + source: "https://github.com/CopilotKit/CopilotKit/blob/main/examples/coagents-research-canvas/readme.md", + demo: "https://examples-coagents-research-canvas-ui.vercel.app/", + tutorial: "/coagents/videos/research-canvas" + } + } +] \ No newline at end of file diff --git a/docs/components/react/frame.tsx b/docs/components/react/frame.tsx index 42fcfa58af..fb82686c2e 100644 --- a/docs/components/react/frame.tsx +++ b/docs/components/react/frame.tsx @@ -6,7 +6,7 @@ export function Frame({ description, }: { children: React.ReactNode; - className: string; + className?: string; description?: string; }) { return ( diff --git a/docs/components/react/link-to-copilot-cloud.tsx b/docs/components/react/link-to-copilot-cloud.tsx index ac00fce164..fc2c477463 100644 --- a/docs/components/react/link-to-copilot-cloud.tsx +++ b/docs/components/react/link-to-copilot-cloud.tsx @@ -27,7 +27,7 @@ export function LinkToCopilotCloud({ if (!isClient) { return null; } - const url = new URL(`https://cloud.copilotkit.ai`); + const url = new URL(`https://go.copilotkit.ai/copilot-cloud-button-docs`); url.searchParams.set("ref", "docs"); const sessionId = posthog.get_session_id(); @@ -43,8 +43,8 @@ export function LinkToCopilotCloud({ let cn = `${className}`; if (asButton) { - 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 "; - cn += "transition-all duration-100 hover:ring-2 hover:ring-indigo-400 hover:dark:text-indigo-200"; + 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"; + cn += "transition-all duration-100 hover:ring-2 hover:ring-indigo-400 hover:dark:text-indigo-200 shadow-2xl rounded-lg"; } else { cn = "_text-primary-600 decoration-from-font underline [text-underline-position:from-font]"; } diff --git a/docs/components/react/socials.tsx b/docs/components/react/socials.tsx index 831c72c759..945170e16b 100644 --- a/docs/components/react/socials.tsx +++ b/docs/components/react/socials.tsx @@ -29,7 +29,7 @@ export function Socials({ className }: SocialProps) {