mirror of
https://github.com/CopilotKit/CopilotKit.git
synced 2026-09-14 16:26:20 +08:00
Alem Tuzlak
99 lines
3.1 KiB
Markdown
99 lines
3.1 KiB
Markdown
# Framework Overview Component
|
|
|
|
The `FrameworkOverview` component is a reusable landing page component that allows you to create consistent framework-specific landing pages with customizable content.
|
|
|
|
## Usage
|
|
|
|
```tsx
|
|
import { FrameworkOverview } from "./framework-overview";
|
|
|
|
export function MyFrameworkOverview() {
|
|
return (
|
|
<FrameworkOverview
|
|
frameworkName="MyFramework"
|
|
frameworkIcon={<MyIcon className="h-16 w-16" />}
|
|
header="Your main headline"
|
|
subheader="Your subheader description"
|
|
bannerVideo="https://example.com/video.mp4"
|
|
guideLink="/guides/myframework"
|
|
initCommand="npx myframework@latest init"
|
|
featuresLink="https://features.example.com"
|
|
supportedFeatures={[...]}
|
|
architectureImage="https://example.com/architecture.png"
|
|
liveDemos={[...]}
|
|
tutorialLink="/tutorials/myframework" // Optional
|
|
/>
|
|
);
|
|
}
|
|
```
|
|
|
|
## Props
|
|
|
|
### Required Props
|
|
|
|
- **`frameworkName`** (string): The name of the framework (e.g., "LangGraph", "CrewAI")
|
|
- **`frameworkIcon`** (ReactNode): The icon component for the framework
|
|
- **`header`** (string): The main headline text
|
|
- **`subheader`** (string): The descriptive text below the header
|
|
- **`bannerVideo`** (string): URL to the overview video
|
|
- **`guideLink`** (string): Link to the framework's guide/quickstart
|
|
- **`initCommand`** (string): The initialization command to copy
|
|
- **`featuresLink`** (string): Link to view framework features
|
|
- **`architectureImage`** (string): URL to the architecture diagram
|
|
- **`liveDemos`** (LiveDemo[]): Array of live demo configurations
|
|
|
|
### Optional Props
|
|
|
|
- **`supportedFeatures`** (FrameworkFeature[]): Array of features to display (if empty, features section is hidden)
|
|
- **`tutorialLink`** (string): Link to tutorial (if empty, tutorial card is hidden)
|
|
|
|
## Data Types
|
|
|
|
### FrameworkFeature
|
|
|
|
```tsx
|
|
interface FrameworkFeature {
|
|
title: string;
|
|
description: string;
|
|
documentationLink: string;
|
|
demoLink: string;
|
|
videoUrl: string;
|
|
}
|
|
```
|
|
|
|
### LiveDemo
|
|
|
|
```tsx
|
|
interface LiveDemo {
|
|
type: "saas" | "canvas";
|
|
title: string;
|
|
description: string;
|
|
iframeUrl: string;
|
|
}
|
|
```
|
|
|
|
## Features
|
|
|
|
- **Conditional Rendering**: Features section only shows if `supportedFeatures` array has items
|
|
- **Dynamic Demo Tabs**: Demo toggle buttons only appear if multiple demos are provided
|
|
- **Flexible Layout**: Next steps section automatically adjusts grid layout based on whether tutorial link is provided
|
|
- **Copy to Clipboard**: Init command button includes copy functionality with visual feedback
|
|
- **Responsive Design**: Built with responsive design principles
|
|
- **Consistent Styling**: Maintains consistent visual hierarchy and spacing
|
|
|
|
## Examples
|
|
|
|
See the following files for complete examples:
|
|
|
|
- `langgraph.tsx` - LangGraph framework implementation
|
|
- `crewai-example.tsx` - CrewAI framework implementation example
|
|
|
|
## Customization
|
|
|
|
The component uses Tailwind CSS classes and follows the existing design system. You can customize:
|
|
|
|
- Colors by modifying the CSS variables
|
|
- Spacing by adjusting the margin/padding classes
|
|
- Layout by modifying the grid classes
|
|
- Typography by changing the text size and weight classes
|