Skip to content

Commit cff13e6

Browse files
tylerslatontylerslaton
authored
docs: add new video for flows and integrate CLI into crews docs (CopilotKit#1580)
Signed-off-by: Tyler Slaton <tyler@copilotkit.ai>
1 parent 9ae4975 commit cff13e6

3 files changed

Lines changed: 99 additions & 60 deletions

File tree

‎docs/content/docs/crewai-crews/quickstart/crewai.mdx‎

Lines changed: 93 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import {
88
TailoredContent,
99
TailoredContentOption,
1010
} from "@/components/react/tailored-content.tsx";
11+
import { SquareTerminal, SquareChartGantt } from "lucide-react";
1112
import { CoAgentsEnterpriseCTA } from "@/components/react/coagents/coagents-enterprise-cta.tsx";
1213
import { CoAgentsDiagram } from "@/components/react/coagents/coagents-diagram.tsx";
1314
import { FaPython, FaJs, FaCloud } from "react-icons/fa";
@@ -42,14 +43,6 @@ Before you begin, you'll need the following:
4243
## Getting started
4344

4445
<Steps>
45-
<Step>
46-
### Install CopilotKit
47-
First, install the latest packages for CopilotKit into your frontend.
48-
```package-install
49-
npm install @copilotkit/react-ui @copilotkit/react-core @copilotkit/runtime-client-gql
50-
```
51-
</Step>
52-
5346
{/* The initial choice that determines the flow */}
5447
<TailoredContent
5548
className="step"
@@ -61,7 +54,7 @@ Before you begin, you'll need the following:
6154
You will need a CrewAI Crew agent to get started!
6255
</p>
6356
<p className="text-base">
64-
Either bring your own or feel free to use our starter repo.
57+
You can either bring your own from <a target="_blank" href="https://app.crewai.com/">Crew AI Enterprise</a> or use our starter repo.
6558
</p>
6659
</div>
6760
}
@@ -78,62 +71,104 @@ Before you begin, you'll need the following:
7871
Login to [CrewAI](https://www.crewai.com/) and grab your Crew's URL and Bearer token.
7972

8073
Don't have a deployed Crew? Check out the [templates](https://app.crewai.com/crewai_plus/templates) to get started quickly.
81-
82-
Make a note of your Crew API URL and Bearer token, then head over to https://cloud.copilotkit.ai/ to register your crew with Copilot Cloud.
8374
</Step>
8475

85-
<Step>
86-
### Connect to Copilot Cloud
87-
1. Go to [Copilot Cloud](https://cloud.copilotkit.ai), sign in and click Get Started
88-
2. Add your OpenAI API key to the "Provide OpenAI API Key" section
89-
3. Click "Add Remote Endpoint" and fill in the details of your Crew. Note: If your Agent Name contains multiple words, use underscores (`_`) as separators.
90-
4. Click "Save Endpoint"
91-
5. Copy the Copilot Cloud Public API Key
92-
93-
<img src="/images/copilot-cloud/crew-cpk-setup.gif" alt="CrewAI Copilot Setup" className="rounded-lg shadow-xl mt-4" />
94-
</Step>
76+
<TailoredContent
77+
className="step"
78+
id="cli"
79+
header={
80+
<div>
81+
<p className="text-xl font-semibold">Use the CopilotKit CLI</p>
82+
</div>
83+
}
84+
>
85+
<TailoredContentOption
86+
id="use-cli"
87+
title="Use the CopilotKit CLI"
88+
description="I have a Next.js application and want to get started quickly."
89+
icon={<SquareTerminal />}
90+
>
91+
<Step>
92+
### Run the CLI
93+
Just run this following command in your Next.js application to get started!
94+
95+
<Accordions>
96+
<Accordion title="Don't have a Next.js application?">
97+
No problem! Just use `create-next-app` to make one quickly.
98+
```bash
99+
npx create-next-app@latest
100+
```
101+
</Accordion>
102+
</Accordions>
95103

96-
<Step>
97-
## Setup the CopilotKit Provider
98-
The [`<CopilotKit>`](/reference/components/CopilotKit) component must wrap the Copilot-aware parts of your application. For most use-cases,
99-
it's appropriate to wrap the CopilotKit provider around the entire app, e.g. in your layout.tsx.
100-
<CloudCopilotKitProvider components={props.components} />
101-
</Step>
102-
<Step>
103-
## Choose a Copilot UI
104-
You are almost there! Now it's time to setup your Copilot UI.
105-
<CopilotUI components={props.components} />
106-
</Step>
107-
<Step>
108-
## Create a Crew-Quickstart component
109-
Place the following snippet in your **main page** (e.g. `page.tsx` in Next.js) or wherever you want to use CopilotKit. It simply imports the `QuickstartCrew` component from our **crew-quickstart.tsx** file and renders it.
104+
```bash
105+
npx copilotkit@latest init
106+
```
107+
</Step>
108+
109+
</TailoredContentOption>
110+
<TailoredContentOption
111+
id="do-it-manually"
112+
title="Code along"
113+
description="I want to deeply understand what's happening under the hood or don't have a Next.js application."
114+
icon={<SquareChartGantt />}
115+
>
116+
<Step>
117+
### Connect to Copilot Cloud
118+
1. Go to [Copilot Cloud](https://cloud.copilotkit.ai), sign in and click Get Started
119+
2. Add your OpenAI API key to the "Provide OpenAI API Key" section
120+
3. Click "Add Remote Endpoint" and fill in the details of your Crew. Note: If your Agent Name contains multiple words, use underscores (`_`) as separators.
121+
4. Click "Save Endpoint"
122+
5. Copy the Copilot Cloud Public API Key
110123

111-
```tsx title="page.tsx"
112-
"use client";
113-
import React from "react";
114-
import useCrewQuickstart from "./use-crew-quickstart";
115-
116-
export default function YourApp() {
117-
useCrewQuickstart({
118-
crewName: "<REPLACE_WITH_YOUR_CREW_NAME>",
119-
/**
120-
* List of input required to start your crew (location e.g)
121-
*/
122-
inputs: ["location"]
123-
})
124-
return (
125-
<>
126-
{/* Existing markup */}
127-
</>
128-
);
129-
}
130-
```
131-
<CrewQuickStart components={props.components} />
132-
</Step>
124+
<img src="/images/copilot-cloud/crew-cpk-setup.gif" alt="CrewAI Copilot Setup" className="rounded-lg shadow-xl mt-4" />
125+
</Step>
126+
127+
<Step>
128+
## Setup the CopilotKit Provider
129+
The [`<CopilotKit>`](/reference/components/CopilotKit) component must wrap the Copilot-aware parts of your application. For most use-cases,
130+
it's appropriate to wrap the CopilotKit provider around the entire app, e.g. in your layout.tsx.
131+
<CloudCopilotKitProvider components={props.components} />
132+
</Step>
133+
<Step>
134+
## Choose a Copilot UI
135+
You are almost there! Now it's time to setup your Copilot UI.
136+
<CopilotUI components={props.components} />
137+
</Step>
138+
<Step>
139+
## Create a Crew-Quickstart component
140+
Place the following snippet in your **main page** (e.g. `page.tsx` in Next.js) or wherever you want to use CopilotKit. It simply imports the `QuickstartCrew` component from our **crew-quickstart.tsx** file and renders it.
141+
142+
```tsx title="page.tsx"
143+
"use client";
144+
import React from "react";
145+
import useCrewQuickstart from "./use-crew-quickstart";
146+
147+
export default function YourApp() {
148+
useCrewQuickstart({
149+
crewName: "<REPLACE_WITH_YOUR_CREW_NAME>",
150+
/**
151+
* List of input required to start your crew (location e.g)
152+
*/
153+
inputs: ["location"]
154+
})
155+
return (
156+
<>
157+
{/* Existing markup */}
158+
</>
159+
);
160+
}
161+
```
162+
<CrewQuickStart components={props.components} />
163+
</Step>
164+
</TailoredContentOption>
165+
</TailoredContent>
133166
<Step>
134167
### 🎉 Talk to your agent!
135168
Congrats! You've successfully integrated your CrewAI Enterprise agent with CopilotKit.
136-
Try talking to your Copilot. Chat with it to provide the information needed to run your Crew from your app. You can also check out our [Restaurant Finder Crew demo](https://crew-ai-enterprise-demo.vercel.app) to see implementation in action.
169+
Try talking to your Copilot. Chat with it to provide the information needed to run your Crew from your app.
170+
171+
You can also check out our [Restaurant Finder Crew demo](https://crew-ai-enterprise-demo.vercel.app) to see implementation in action.
137172
</Step>
138173
</TailoredContentOption>
139174

‎docs/content/docs/crewai-flows/index.mdx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,10 +40,14 @@ Full user-interaction infrastructure for your agents, to turn your agents into C
4040
{/* TODO-DOCS-CREWAI-FLOWS: Add a GIF of this animation for CrewAI Flows */}
4141

4242
<Frame className="mt-0 mb-6">
43-
<img
44-
src="/images/CoAgents.gif"
43+
<video
44+
src="/images/coagents/crew-ai/flows/crews-interaction-layer.mp4"
4545
alt="CoAgents demonstration"
4646
className="rounded-lg shadow-xl"
47+
playsInline
48+
autoPlay
49+
muted
50+
loop
4751
/>
4852
</Frame>
4953

‎docs/public/images/coagents/crew-ai/flows/crews-interaction-layer.mp4‎

13.9 MB
Binary file not shown.

0 commit comments

Comments
 (0)