Set Agent State Properties | CopilotKit | Page 1

I want to click a button in our UI and have that invoke a specific agent on our Langgraph server with specific inputs (messages, claims_filter, vehicles_filter). I want the input message and the response to appear in our CopilotSidebar component.

I see how to use useCopilotChat() to call appendMessage() to submit the message to the Langgraph server. Both the input and response appear in the CopilotSidebar component. 🎆

But... I am having trouble figuring out how to send the claims_filter and vehicles_filter values to the agent. How can I send those values before the agent has even been invoked? Should I use the normal CopilotKit routing to select that agent?

Here is the problematic pseudocode:

type RemoteAgentState = {
  claims_filter: string;
  vehicles_filter: string;
};

const SummarizeClaimsButton = () => {
  const { appendMessage } = useCopilotChat();
  const { setState } = useCoAgent<RemoteAgentState>({
    name: "claims_agent",
  });

  const handleClick = () => {
      setState({
        claims_filter: "",
        vehicles_filter:
          "%5B%7B%22type%22%3A%22row%22%2C%22id%22%3A%22row-e428895f-c8b6-48e2-893e-795adbd4de86%22%2C%22attribute%22%3A%22vehicleModelYear%22%2C%22operator%22%3A%22in%22%2C%22values%22%3A%5B%222024%22%2C%222025%22%5D%7D%2C%7B%22type%22%3A%22row%22%2C%22id%22%3A%22row-ce26a8d0-6c82-497a-8d35-c093b07daf19%22%2C%22attribute%22%3A%22vehicleModel%22%2C%22operator%22%3A%22in%22%2C%22values%22%3A%5B%22F-250%22%2C%22F-350%22%2C%22F-450%22%2C%22F-550%22%5D%7D%5D",
      });
      appendMessage(
        new TextMessage({
          role: Role.User,
          content: SUMMARIZE_CLAIMS_UTTERANCE,
        })
      );
  };

  return (
    <Button onClick={handleClick} startIcon={<AiTwinkle />}>
      Summarize Claims
    </Button>
  );
};

#Set Agent State Properties