Skip to content

🐛 Bug: useCoAgentStateRender does not consistently render state updates in Copilot Chat UI #2931

@ayoussef-insight

Description

@ayoussef-insight

♻️ Reproduction Steps

Describe the bug

useCoAgentStateRender does not consistently render updates in the CopilotChat UI, even though state updates are successfully emitted from the backend and received by the client.

Screenshots / Recording

Image

Environment

  • "@ag-ui/client": "^0.0.42"
  • "@copilotkit/react-core": "1.50.1"
  • "@copilotkit/react-ui": "1.50.1"
  • "@copilotkit/runtime": "1.50.1"
  • React version: 19.1.1
  • Framework: NextJs, Langgraph Python (fastapi) backend
  • Browser: Chrome (Comet)
  • OS: macOS

Backend

class AgentNodes:

    def __init__(self):
        self.llm = get_model()

    async def chat_node(self, state: AgentState, config: RunnableConfig) -> Command:

        system = SystemMessage(content="You are a helpful assistant responding concisely to user messages.\n")

        # Use the full conversation as context
        messages = [system] + state["messages"]

        # Use async invoke for proper streaming support
        response = await self.llm.ainvoke(messages)

        return Command(update={"messages": [response], "message": response.content if response else ""})
        # return Command(update={"messages": [response]})

def build_graph():
    workflow = StateGraph(AgentState)
    agents = AgentNodes()

    # Register nodes
    workflow.add_node("chat", agents.chat_node)

    # Define edges
    workflow.add_edge(START, "chat")
    workflow.add_edge("chat", END)

    is_fast_api = os.getenv("LANGGRAPH_FAST_API", "false").lower() == "true"
    if is_fast_api:
        memory = MemorySaver()
        return workflow.compile(checkpointer=memory)
    else:
        return workflow.compile()

graph = build_graph()

UI

useCoAgentStateRender({
    name: "chat_agent",
    render: ({ nodeName, state, status }) => {
      console.log("RENDERING STATE:", {
        nodeName,
        state,
        status,
      });

      return (
        <div className="p-2 my-4 bg-slate-900 text-white">
          <div className="flex items-center gap-2">
            <span>
              Processing: <strong>{nodeName || "agent"}</strong>
            </span>
          </div>
          {state && (
            <pre className="mt-2 text-xs text-slate-400 overflow-scroll max-h-40">
              useCoAgentStateRender has been rendered.
            </pre>
          )}
        </div>
      );
    },
  });

✅ Expected Behavior

When the co-agent state changes, the UI should re-render the corresponding component provided to useCoAgentStateRender every time.

❌ Actual Behavior

  • No UI updates occur after the first two initial render
  • The render function is invoked and logs is being recorded however the UI does not get rendered.
  • The UI gets rendered after the assistant message and not before.
  • The UI gets rendered every time if a state property other than messages gets updated, however, this is also inconsistent.

Example:

The following laggraph node return values cause the UI to render only twice:
return Command(update={"messages": [response], "message": response.content if response else ""})

The following laggraph node return values cause the UI to render every time but still not consistent:
return Command(update={"messages": [response]})

𝌚 CopilotKit Version

├── @copilotkit/[email protected] -> ./node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected]_@types+react@1_4903a5dbaf8d40ff38f499c8af4c336d/node_modules/@copilotkit/react-core
├── @copilotkit/[email protected] -> ./node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected]_@types+react@19._e9efbd85680ca5c03bf848196328aa14/node_modules/@copilotkit/react-ui
├── @copilotkit/[email protected] -> ./node_modules/.pnpm/@[email protected]_7371b12165058c6fa8454903def58330/node_modules/@copilotkit/runtime

📄 Logs (Optional)

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions