Interactive

<Step>
    ### Create a frontend human-in-the-loop tool

    Frontend tools can be leveraged in a variety of ways. One of those ways is to have a human-in-the-loop flow where the response
    of the tool is gated by a user's decision.

    In this example we will simulate a "approval" flow for executing a command. First, use the `useHumanInTheLoop` hook to create a tool that
    prompts the user for approval.

    ```tsx title="page.tsx"
    import { useHumanInTheLoop } from "@copilotkit/react-core/v2" // [!code highlight]
    import { z } from "zod";

    export function Page() {
      // ...

      // [!code highlight:20]
      useHumanInTheLoop({
        name: "humanApprovedCommand",
        description: "Ask human for approval to run a command.",
        parameters: z.object({
          command: z.string().describe("The command to run"),
        }),
        render: ({ args, respond, status }) => {
          if (status !== "executing") return <></>;
          return (
            <div>
              <pre>{args.command}</pre>
              <button onClick={() => respond?.(`Command is APPROVED`)}>Approve</button>
              <button onClick={() => respond?.(`Command is DENIED`)}>Deny</button>
            </div>
          );
        },
      });

      // ...
    }
    ```
</Step>
<Step>
    ### Install the CopilotKit SDK

    Now, we'll need to modify the agent to access these frontend tools. In your terminal, navigate to your agent's folder and continue from there!

    <InstallSDKSnippet components={props.components}/>
</Step>
<Step>
    ### Inheriting from CopilotKitState

    To access the frontend tools provided by CopilotKit, you can inherit from CopilotKitState in your agent's state definition:

    <Tabs groupId="language_langgraph_agent" items={['Python', 'TypeScript']} default="Python" persist>
        <Tab value="Python">
            ```python title="agent.py"
            from copilotkit import CopilotKitState # [!code highlight]

            class YourAgentState(CopilotKitState): # [!code highlight]
                your_additional_properties: str
            ```
        </Tab>
        <Tab value="TypeScript">
            ```typescript title="agent-js/src/agent.ts"
            import { StateSchema } from "@langchain/langgraph";
            import { CopilotKitStateSchema } from "@copilotkit/sdk-js/langgraph"; // [!code highlight]
            import { z } from "zod";

            export const YourAgentStateSchema = new StateSchema({
                yourAdditionalProperty: z.string(),
                ...CopilotKitStateSchema.fields, // [!code highlight]
            });
            export type YourAgentState = typeof YourAgentStateSchema.State;
            ```
        </Tab>
    </Tabs>

    By doing this, your agent's state will include the `copilotkit` property, which contains the frontend tools that can be accessed and invoked.
</Step>
<Step>
    ### Accessing Frontend Tools

    Once your agent's state includes the `copilotkit` property, you can access the frontend tools and utilize them within your agent's logic.

    Here's how you can call a frontend tool from your agent:

    <FrontEndToolsImpl components={props.components} />

    These tools are automatically populated by CopilotKit and are compatible with LangChain's tool call definitions, making it straightforward to integrate them into your agent's workflow.
</Step>
<Step>
    ### Give it a try!
    You've now given your agent the ability to directly call any frontend tools you've defined. These tools will be available to the agent where they can be used as needed.
</Step>