Display components

npm install @copilotkit/sdk-js

import type { RunnableConfig } from "@langchain/core/runnables";
import { SystemMessage } from "@langchain/core/messages";
import { MemorySaver, START, StateGraph } from "@langchain/langgraph";
import { ChatOpenAI } from "@langchain/openai";
import {
  convertActionsToDynamicStructuredTools,
  CopilotKitStateAnnotation,
} from "@copilotkit/sdk-js/langgraph";

// CopilotKit forwards frontend tools to the agent via
// `state.copilotkit.actions`. `CopilotKitStateAnnotation` adds that
// channel to your graph's state; `convertActionsToDynamicStructuredTools`
// turns the forwarded action schemas into LangChain tools you can bind
// at model-invocation time.
const AgentStateAnnotation = CopilotKitStateAnnotation;
export type AgentState = typeof AgentStateAnnotation.State;

const SYSTEM_PROMPT = "You are a helpful, concise assistant.";

async function runChatNode(
  state: AgentState,
  config: RunnableConfig,
  model: ChatOpenAI,
) {
  const modelWithTools = model.bindTools!([
    ...convertActionsToDynamicStructuredTools(state.copilotkit?.actions ?? []),
  ]);

  const response = await modelWithTools.invoke(
    [new SystemMessage({ content: SYSTEM_PROMPT }), ...state.messages],
    config,
  );

  return { messages: response };
}

async function chatNode(state: AgentState, config: RunnableConfig) {
  return runChatNode(
    state,
    config,
    new ChatOpenAI({ temperature: 0, model: "gpt-5-mini" }),
  );
}

function compileGraph(node: typeof chatNode) {
  return new StateGraph(AgentStateAnnotation)
    .addNode("chat_node", node)
    .addEdge(START, "chat_node")
    .addEdge("chat_node", "__end__")
    .compile({ checkpointer: new MemorySaver() });
}

export const graph = compileGraph(chatNode);

import { randomUUID } from "node:crypto";
import { AIMessage, ToolMessage } from "@langchain/core/messages";
import { END, START, StateGraph } from "@langchain/langgraph";
import { CopilotKitStateAnnotation } from "@copilotkit/sdk-js/langgraph";

type AgentState = typeof CopilotKitStateAnnotation.State;

// Ask the frontend to run `change_background`. No model call.
async function requestBackground(state: AgentState) {
  return {
    messages: [
      new AIMessage({
        content: "",
        tool_calls: [
          {
            id: randomUUID(),
            name: "change_background",
            args: { background: "linear-gradient(135deg, #1e3a8a, #9333ea)" },
            type: "tool_call",
          },
        ],
      }),
    ],
  };
}

// Runs on the follow-up run, after the frontend returns the tool result.
async function confirm(state: AgentState) {
  const result = state.messages.at(-1);
  return {
    messages: [new AIMessage(`The frontend returned: ${result?.content}`)],
  };
}

export const graph = new StateGraph(CopilotKitStateAnnotation)
  .addNode("request_background", requestBackground)
  .addNode("confirm", confirm)
  .addConditionalEdges(START, (state: AgentState) => {
    const last = state.messages.at(-1);
    return last && ToolMessage.isInstance(last)
      ? "confirm"
      : "request_background";
  })
  .addEdge("request_background", END)
  .addEdge("confirm", END)
  .compile();