Interrupts

    from copilotkit import CopilotKitState

    class AgentState(CopilotKitState):
        agent_name: NotRequired[str]
    ```
</Tab>
<Tab value="TypeScript">
    ```ts title="agent.ts"
    import { createMiddleware } from "langchain";
    import { zodState } from "@copilotkit/sdk-js/langgraph"; // [!code highlight]
    import { z } from "zod";

    export const agentNameMiddleware = createMiddleware({
        name: "AgentState",
        stateSchema: z.object({
            // zodState keeps this custom field in AG-UI state snapshots.
            agentName: zodState(z.string().optional()), // [!code highlight]
        }),
    });
    ```
</Tab>

<Callout type="info">
    Your agent will not be aware of the `interrupt` interaction by default in LangGraph.

    If you want this behavior, see the [section on it below](#make-your-agent-aware-of-interruptions).
</Callout>

<Tabs groupId="agent_language" items={['Python', 'TypeScript']} persist>
    <Tab value="Python">
        ```python title="agent.py"
        from typing import Any, NotRequired

        from copilotkit import CopilotKitMiddleware, CopilotKitState
        from deepagents import create_deep_agent # [!code highlight]
        from langchain.agents.middleware import AgentMiddleware # [!code highlight]
        from langgraph.runtime import Runtime
        from langgraph.types import interrupt # [!code highlight]

        class AgentState(CopilotKitState):
            agent_name: NotRequired[str]

        class AgentNameMiddleware(AgentMiddleware[AgentState, Any]):
            state_schema = AgentState

            def before_model(self, state: AgentState, runtime: Runtime[Any]) -> dict[str, Any] | None:
                if not state.get("agent_name"):
                    # Interrupt and wait for the user to respond with a name
                    name = interrupt("Before we start, what would you like to call me?") # [!code highlight]
                    return {"agent_name": name}
                return None

        agent = create_deep_agent(
            model="openai:gpt-4o",
            middleware=[
                AgentNameMiddleware(),
                CopilotKitMiddleware(expose_state=["agent_name"]), # [!code highlight]
            ],
            system_prompt=(
                "You are a helpful assistant. After the user chooses a name, "
                "Current agent state contains agent_name. Use that value as your own name."
            ),
        )
        ```
    </Tab>
    <Tab value="TypeScript">
        In Deep Agents TypeScript, wire the interrupt into a middleware hook rather than a custom node. The hook below runs before the model call and asks the user for a name the first time.

        ```ts title="agent.ts"
        import {
            createCopilotkitMiddleware,
            zodState,
        } from "@copilotkit/sdk-js/langgraph"; // [!code highlight]
        import { createMiddleware } from "langchain";
        import { createDeepAgent } from "deepagents"; // [!code highlight]
        import { interrupt } from "@langchain/langgraph"; // [!code highlight]
        import { z } from "zod";

        const agentNameMiddleware = createMiddleware({
            name: "AgentState",
            stateSchema: z.object({
                agentName: zodState(z.string().optional()), // [!code highlight]
            }),
            beforeModel: (state) => {
                if (!state.agentName) {
                    // Interrupt and wait for the user to respond with a name
                    const name: string = interrupt("Before we start, what would you like to call me?"); // [!code highlight]
                    return { agentName: name };
                }
            },
        });

        const stateAwareCopilotKitMiddleware = createCopilotkitMiddleware({
            exposeState: ["agentName"], // [!code highlight]
        });

        export const agent = createDeepAgent({
            model: "openai:gpt-4o",
            middleware: [
                agentNameMiddleware,
                stateAwareCopilotKitMiddleware,
            ],
            systemPrompt:
                "You are a helpful assistant. After the user chooses a name, " +
                "Current agent state contains agentName. Use that value as your own name.",
        });
        ```
    </Tab>
</Tabs>

To do this, we'll use the `useInterrupt` hook, give it a component to render, and then call `resolve` with the user's response.

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

const YourMainContent = () => {
// ...
// [!code highlight:15]
// styles omitted for brevity
useInterrupt({
    render: ({ event, resolve }) => (
        <div>
            <p>{event.value}</p>
            <form onSubmit={(e) => {
                e.preventDefault();
                resolve((e.target as HTMLFormElement).response.value);
            }}>
                <input type="text" name="response" placeholder="Enter your response" />
                <button type="submit">Submit</button>
            </form>
        </div>
    )
});
// ...

return <div></div>
}
```

When your app already selects an agent in its `CopilotKit` provider, `useInterrupt` uses that configured agent. Pass `agentId` only when this component must target a different agent in a multi-agent app.

            # ... your full state definition

            class ApprovalAndNameMiddleware(AgentMiddleware[AgentState, Any]):
                state_schema = AgentState

                def before_model(self, state: AgentState, runtime: Runtime[Any]) -> dict[str, Any] | None:
                    approval = interrupt({ "type": "approval", "content": "please approve" }) # [!code highlight]
                    updates: dict[str, Any] = {"approval": approval}

                    if not state.get("agent_name"):
                        # Interrupt and wait for the user to respond with a name
                        updates["agent_name"] = interrupt({ "type": "ask", "content": "Before we start, what would you like to call me?" }) # [!code highlight]

                    return updates
            ```
        </Tab>
        <Tab value="TypeScript">
            ```ts title="agent.ts"
            import { zodState } from "@copilotkit/sdk-js/langgraph";
            import { createMiddleware } from "langchain";
            import { interrupt } from "@langchain/langgraph"; // [!code highlight]
            import { z } from "zod";

            export const approvalAndNameMiddleware = createMiddleware({
                name: "AgentState",
                stateSchema: z.object({
                    agentName: zodState(z.string().optional()),
                    approval: zodState(z.unknown().optional()),
                }),
                beforeModel: (state) => {
                    const approval = interrupt({ type: "approval", content: "please approve" }); // [!code highlight]
                    const updates: Record<string, unknown> = { approval };

                    if (!state.agentName) {
                        updates.agentName = interrupt({ type: "ask", content: "Before we start, what would you like to call me?" }); // [!code highlight]
                    }

                    return updates;
                },
            });
            ```
        </Tab>
    </Tabs>
</Step>
<Step>
    ### Add multiple frontend handlers
    With the differentiator in mind, we will add a handler that takes care of any "ask" and any "approve" types.
    With two `useInterrupt` hooks in our page, we can leverage the `enabled` property to enable each in the right time:

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

    const ApproveComponent = ({ content, onAnswer }: { content: string; onAnswer: (approved: boolean) => void }) => (
        // styles omitted for brevity
        <div>
            <h1>Do you approve?</h1>
            <button onClick={() => onAnswer(true)}>Approve</button>
            <button onClick={() => onAnswer(false)}>Reject</button>
        </div>
    )

    const AskComponent = ({ question, onAnswer }: { question: string; onAnswer: (answer: string) => void }) => (
    // styles omitted for brevity
        <div>
            <p>{question}</p>
            <form onSubmit={(e) => {
                e.preventDefault();
                onAnswer((e.target as HTMLFormElement).response.value);
            }}>
                <input type="text" name="response" placeholder="Enter your response" />
                <button type="submit">Submit</button>
            </form>
        </div>
    )

    const YourMainContent = () => {
        // ...
        // [!code highlight:13]
        useInterrupt({
            enabled: ({ eventValue }) => eventValue.type === 'ask',
            render: ({ event, resolve }) => (
                <AskComponent question={event.value.content} onAnswer={answer => resolve(answer)} />
            )
        });

        useInterrupt({
            enabled: ({ eventValue }) => eventValue.type === 'approval',
            render: ({ event, resolve }) => (
                <ApproveComponent content={event.value.content} onAnswer={answer => resolve(answer)} />
            )
        });

        // ...
    }
```
</Step>

// We will assume an interrupt event in the following shape
type Department = 'finance' | 'engineering' | 'admin'
interface AuthorizationInterruptEvent {
    type: 'auth',
    accessDepartment: Department,
}

import { useInterrupt } from "@copilotkit/react-core/v2";

const YourMainContent = () => {
    const [userEmail, setUserEmail] = useState({ email: '[email protected]' })
    function getUserByEmail(email: string): { id: string; department: Department } {
        // ... an implementation of user fetching
    }

    // ...
    // styles omitted for brevity
    // [!code highlight:28]
    useInterrupt({
        handler: async ({ result, event, resolve }) => {
            const { department } = await getUserByEmail(userEmail)
            if (event.value.accessDepartment === department || department === 'admin') {
                // Following the resolution of the event, we will not proceed to the render method
                resolve({ code: 'AUTH_BY_DEPARTMENT' })
                return;
            }

            return { department, userId }
        },
        render: ({ result, event, resolve }) => (
            <div>
                <h1>Request for {event.value.type}</h1>
                <p>Members from {result.department} department cannot access this information</p>
                <p>You can request access from an administrator to continue.</p>
                <button
                    onClick={() => resolve({ code: 'REQUEST_AUTH', data: { department: result.department, userId: result.userId } })}
                >
                    Request Access
                </button>
                <button
                    onClick={() => resolve({ code: 'CANCEL' })}
                >
                    Cancel
                </button>
            </div>
        )
    });
    // ...

    return <div></div>
}