fix qs for crew flow (#1523)

docs/content/docs/crewai-flows/quickstart/crewai.mdx

@@ -22,16 +22,32 @@ import SelfHostingCopilotRuntimeConfigureCopilotKitProvider from "@/snippets/coa
 import SelfHostingCopilotRuntimeLangGraphEndpoint from "@/snippets/self-hosting-copilot-runtime-langgraph-endpoint.mdx";
 import SelfHostingCopilotRuntimeStarter from "@/snippets/self-hosting-copilot-runtime-starter.mdx";
 import SelfHostingRemoteEndpoints from "@/snippets/self-hosting-remote-endpoints.mdx";
-import { UserIcon, PaintbrushIcon, WrenchIcon, RepeatIcon, ServerIcon } from "lucide-react";
+import {
+  UserIcon,
+  PaintbrushIcon,
+  WrenchIcon,
+  RepeatIcon,
+  ServerIcon,
+} from "lucide-react";
 import { SiCrewai } from "@icons-pack/react-simple-icons";
 import CopilotUI from "@/snippets/copilot-ui.mdx";
 
 <InsecurePasswordProtected>
 
-<video src="/images/coagents/chat-example.mp4" className="rounded-lg shadow-xl" loop playsInline controls autoPlay muted />
+<video
+  src="/images/coagents/chat-example.mp4"
+  className="rounded-lg shadow-xl"
+  loop
+  playsInline
+  controls
+  autoPlay
+  muted
+/>
 
 ## Prerequisites
+
 Before you begin, you'll need the following:
+
 - [**OpenAI API key**](https://platform.openai.com/api-keys)
 
 ## Getting started
@@ -102,59 +118,23 @@ Before you begin, you'll need the following:
         </TailoredContentOption>
     </TailoredContent>
     <Step>
-        ### Start your CrewAI Flow
+        ### Launch your local agent
 
-        1. Next, use CopilotKit's FastAPI integration to serve your CrewAI flow agent.
-
-        ```python title="server.py"
-        import os
-        from fastapi import FastAPI
-        import uvicorn
-        from copilotkit.integrations.fastapi import add_fastapi_endpoint # [!code highlight]
-        from copilotkit import CopilotKitRemoteEndpoint # [!code highlight]
-        from copilotkit.crewai import CrewAIAgent # [!code highlight]
-        from path.to.your.flow import YourFlow # [!code highlight]
-        
-        from dotenv import load_dotenv
-        load_dotenv()
-
-        app = FastAPI()
-        # [!code highlight:10]
-        sdk = CopilotKitRemoteEndpoint(
-            agents=[
-                CrewAIAgent(
-                    name="sample_agent", # The name of your agent
-                    description="Describe your agent here, will be used for multi-agent orchestration",
-                    flow=YourFlow(), # The flow object from your CrewAI import
-                )
-            ],
-        )
-
-        # Use CopilotKit's FastAPI integration to add a new endpoint for your CrewAI Flows # [!code highlight:2]
-        add_fastapi_endpoint(app, sdk, "/copilotkit", use_thread_pool=False)
-
-        # add new route for health check
-        @app.get("/health")
-        def health():
-            """Health check."""
-            return {"status": "ok"}
-
-        def main():
-            """Run the uvicorn server."""
-            port = int(os.getenv("PORT", "8000"))
-            uvicorn.run(
-                "path.to.this.file:app",
-                host="0.0.0.0",
-                port=port,
-                reload=True,
-            )
+        Start your local CrewAI Flow agent:
 
+        ```bash
+        # Install dependencies
+        poetry lock
+        poetry install
+        # Start the server
+        poetry run demo
         ```
+        This will start a local agent server that you can connect to.
     </Step>
 
-    <TailoredContent 
-        className="step" 
-        id="copilot-hosting" 
+    <TailoredContent
+        className="step"
+        id="copilot-hosting"
         header={
             <div>
                 <p className="text-xl font-semibold">Choose your connection method</p>
@@ -196,11 +176,11 @@ Before you begin, you'll need the following:
             </Step>
             <Step>
                 ### Setup your CopilotKit provider
-                The [`<CopilotKit>`](/reference/components/CopilotKit) component must wrap the Copilot-aware parts of your application. For most use-cases, 
+                The [`<CopilotKit>`](/reference/components/CopilotKit) component must wrap the Copilot-aware parts of your application. For most use-cases,
                 it's appropriate to wrap the CopilotKit provider around the entire app, e.g. in your layout.tsx.
 
                 <CloudCopilotKitProvider components={props.components} />
-                
+
                 <Callout type="info">
                     Looking for a way to run multiple CrewAI Flows? Check out our [Multi-Agent](/crewai-flows/multi-agent-flows) guide.
                 </Callout>
@@ -230,7 +210,7 @@ Before you begin, you'll need the following:
                 Now we need to add your CrewAI Flow deployment to Copilot Runtime. This will make it
                 so your frontend can find your CrewAI Flows correctly.
                 ```ts
-                import { 
+                import {
                 CopilotRuntime,
                 // ...
                 } from "@copilotkit/runtime";
@@ -247,7 +227,7 @@ Before you begin, you'll need the following:
             </Step>
             <Step>
                 ### Configure the CopilotKit Provider
-                The [`<CopilotKit>`](/reference/components/CopilotKit) component must wrap the Copilot-aware parts of your application. For most use-cases, 
+                The [`<CopilotKit>`](/reference/components/CopilotKit) component must wrap the Copilot-aware parts of your application. For most use-cases,
                 it's appropriate to wrap the CopilotKit provider around the entire app, e.g. in your layout.tsx.
                 <SelfHostingCopilotRuntimeConfigureCopilotKitProvider components={props.components}/>
                 <Callout type="info">
@@ -265,7 +245,7 @@ Before you begin, you'll need the following:
         // [!code highlight:3]
         import "@copilotkit/react-ui/styles.css";
         import { CopilotPopup } from "@copilotkit/react-ui";
- 
+
         export function YourApp() {
           return (
             <main>
@@ -311,39 +291,41 @@ Before you begin, you'll need the following:
             </Accordion>
         </Accordions>
     </Step>
+
 </Steps>
 
 ---
 
 ## What's next?
+
 You've now got a CrewAI Flow running in CopilotKit! Now you can start exploring the various ways that CopilotKit
 can help you build power agent native applications.
 
 <Cards>
-  <Card 
-    title="Implement Human in the Loop" 
+  <Card
+    title="Implement Human in the Loop"
     description="Allow your users and agents to collaborate together on tasks."
     href="/crewai-flows/human-in-the-loop"
     icon={<UserIcon />}
   />
-  <Card 
-    title="Utilize the Shared State" 
-    description="Learn how to synchronize your agent's state with your UI's state, and vice versa." 
+  <Card
+    title="Utilize the Shared State"
+    description="Learn how to synchronize your agent's state with your UI's state, and vice versa."
     href="/crewai-flows/shared-state"
     icon={<RepeatIcon />}
   />
-  <Card 
-    title="Add some generative UI" 
-    description="Render your agent's progress and output in the UI." 
+  <Card
+    title="Add some generative UI"
+    description="Render your agent's progress and output in the UI."
     href="/crewai-flows/generative-ui"
     icon={<PaintbrushIcon />}
   />
-  <Card 
-    title="Setup frontend actions" 
-    description="Give your agent the ability to call frontend tools, directly updating your application." 
+  <Card
+    title="Setup frontend actions"
+    description="Give your agent the ability to call frontend tools, directly updating your application."
     href="/crewai-flows/frontend-actions"
     icon={<WrenchIcon />}
   />
 </Cards>
 
-</InsecurePasswordProtected>
+</InsecurePasswordProtected>

examples/coagents-starter-crewai-flows/agent-py/pyproject.toml

@@ -18,7 +18,8 @@ dependencies = [
     "uvicorn",
     "python-dotenv",
     "langchain-core",
-    "langgraph-cli"
+    "langgraph-cli",
+    "crewai (==0.102.0)"
 ]
 
 [build-system]