Grouping Sequential Tool Calls in CopilotKit for a Single User Request

[static dock]

In my current project, I've connected to an MCP server and am using useCopilotAction() to handle tool calls in CopilotKit in the frontend. However, I’ve run into a limitation—while useCopilotAction() works great for rendering individual tool calls, it doesn't provide a way to group multiple tool calls that belong to the same user request.

For instance, if a single user request triggers several tool calls sequentially, there's no built-in mechanism to identify or wrap them as a single unit or container in the response. I'm looking for a way to group these tool calls—perhaps in an accordion or a container—to better reflect that they were triggered by one logical user action.

Has anyone tackled a similar challenge or found a way to manage the queue or context of grouped tool calls?

[rose hemlock]

Hello Pallavi,

Are you using any agent frameworks for the backend or the CopilotKit standard agent itself? I would like to understand your architecture better.

[static dock]

I am using the Copilotkit standard agent itself

[rose hemlock]

Got it. By default, the CopilotKit standard agent will invoke multiple tools based on the user request. 
eg: In this todo example, https://example-todos-app.vercel.app/  , if we ask to create a new subtask and also to complete a task done, it will do both by invoking both useCopilotAction sequentially.

In your use case, is the agent determining the tools to call, or is it a separate logic? Can you provide more details on the use case, and if possible, please share some code snippets.

[static dock]

`export function ToolRenderer() {

const render = useCopilotAction({
name: '*',
render: ({ name, status, args, result }: CatchAllActionRenderProps) => {
if (name === 'copilot_getChatSuggestions') return <React.Fragment />;
return (
<Accordion>
//loop for tool calls
<MCPToolCall
status={status}
name={name}
args={Array.isArray(args) ? args : []}
result={result}
/>
</Accordion>
);
},
});
return <>{render}</>;
}`

The above is the code snippet. I haven't used any seperate logic to determine tool calls. All the tools will be handled by useCopilotAction. The <Accordion> should act as a wrapper and it should have all the tool calls

[rose hemlock]

@static dock Let me check this, but the demo link is working for me. Please try again.

[rose hemlock]

@static dock Let me pass this to our development team, they will check this and reply.

[static dock]

Yes, it worked

[rose hemlock]

@static dock Did this solve your actual problem, or did just the demo code work?

[static dock]

just the demo code worked, the problem is still there

[rose hemlock]

@static dock ok, team will check this and reply, thanks for your patience.

[static dock]

any updates on this?