Quickstart

        <Accordions>
            <Accordion title="Don't have a Next.js application?">
                No problem! Just use `create-next-app` to make one quickly.
                ```bash
                npx create-next-app@latest
                ```
            </Accordion>
        </Accordions>

        ```bash
        npx copilotkit@latest init -m CrewAI --crew-type Flows
        ```
    </Step>
    <Step>
        ### 🎉 Talk to your agent!

        Congrats! You've successfully integrated a CrewAI Flow agent chatbot to your application. Depending on the
        template you chose, you may see some different UI elements. To start, try asking a few questions to your agent.

        ```
        Can you tell me a joke?
        ```

        ```
        Can you help me understand AI?
        ```

        ```
        What do you think about React?
        ```
    </Step>
</TailoredContentOption>
<TailoredContentOption
    id="code-along"
    title="Code along"
    description="I want to deeply understand what's happening under the hood or don't have a Next.js application."
    icon={<SquareChartGantt />}
>
    <Step>
        ### Connect to Copilot Cloud
        1. Go to [Copilot Cloud](https://cloud.copilotkit.ai), sign in and click Get Started
        2. Click "Add Remote Endpoint" and fill in the details of your CrewAI Flow. Note: If your Agent Name contains multiple words, use underscores (`_`) as separators.
        3. Click "Save Endpoint"
        4. Copy the Copilot Cloud Public API Key

        
    </Step>

    <Step>
        ### Install CopilotKit
        First, install the latest packages for CopilotKit into your frontend.
        ```npm
        npm install @copilotkit/react-ui @copilotkit/react-core
        ```
    </Step>

    <Step>
        ### Setup the CopilotKit Provider
        The [`<CopilotKit>`](/reference/v1/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 />
    </Step>
    <Step>
        ### Choose a Copilot UI
        You are almost there! Now it's time to setup your Copilot UI.
        <CopilotUI />
    </Step>
    <Step>
        ### Create a CrewAI Flow component
        Place the following snippet in your **main page** (e.g. `page.tsx` in Next.js) or wherever you want to use CopilotKit.

        ```tsx title="page.tsx"
        "use client";

        const publicApiKey = process.env.NEXT_PUBLIC_COPILOT_API_KEY || "";
        /**
         * AgentName refers to the Crew Flow Agent you have saved via CLI during setup.
         * It is used to identify the agent you want to use for the chat.
         */
        const agentName =
          process.env.NEXT_PUBLIC_COPILOTKIT_AGENT_NAME || "DefaultAgent";

        // Main Chat Component: Handles chat interface and background customization
        const Chat = () => {
          const [background, setBackground] = useState(
            "linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
          );

          // Action: Allow AI to change background color dynamically
          useFrontendTool({
            name: "change_background",
            description:
              "Change the background color of the chat. Can be anything that the CSS background attribute accepts. Regular colors, linear of radial gradients etc.",
            parameters: z.object({
              background: z.string().describe("The background. Prefer gradients."),
            }),
            handler: async ({ background }) => {
              setBackground(background);
              return `Background changed to ${background}`;
            },
            followUp: false,
          });

          return (
            <div
              className="h-screen w-full flex items-center justify-center"
              style={{ background }}
            >
              <div className="w-full max-w-3xl h-[80vh] px-4">
                <div className="h-full bg-white/10 backdrop-blur-lg rounded-2xl shadow-2xl overflow-hidden">
                  <CopilotChat
                    className="h-full"
                    labels={{
                      welcomeMessageText: "Hi, I'm an agent. Want to chat?",
                      placeholder: "Type a message...",
                    }}
                  />
                </div>
              </div>
            </div>
          );
        }

        // App Component: Main wrapper that provides CopilotKit context
        const CrewAIFlow: React.FC = () => (
          <CopilotKit publicApiKey={publicApiKey} agent={agentName}>
            <Chat />
          </CopilotKit>
        );

        export default CrewAIFlow;
        ```
    </Step>
    <Step>
        ### 🎉 Talk to your agent!

        Congrats! You've successfully integrated a CrewAI Flow chatbot to your application. To start, try asking a few questions to your agent.

        ```
        Can you tell me a joke?
        ```

        ```
        Can you help me understand AI?
        ```

        ```
        What do you think about React?
        ```

        <video src="https://cdn.copilotkit.ai/docs/copilotkit/images/coagents/chat-example.mp4" className="rounded-lg shadow-xl" loop playsInline controls autoPlay muted />

        <Accordions className="mb-4">
            <Accordion title="Having trouble?">
                - Try changing the host to `0.0.0.0` or `127.0.0.1` instead of `localhost`.
            </Accordion>
        </Accordions>
    </Step>
</TailoredContentOption>
</TailoredContent>