feat(mcp): improve mcp with McpExecution, make UX like terminal execute #3485

samhvw8 · 2025-05-12T03:47:44Z

Implements a new UI component and status tracking system for MCP tool executions, providing users with feedback on tool execution progress and results.

Add McpExecutionStatus schema with started/output/completed/error states
Enhance useMcpToolTool to send status updates at different execution stages
Create new McpExecution component with status indicators and expandable sections
Refactor ChatRow to use the new component for better visualization
Update CodeAccordian to support custom headers for arguments/response sections

This change improves the user experience by providing clear visual feedback during MCP tool execution, similar to the existing command execution experience.

Related GitHub Issue

Closes: #2145

Description

Test Procedure

Type of Change

🐛 Bug Fix: Non-breaking change that fixes an issue.
✨ New Feature: Non-breaking change that adds functionality.
💥 Breaking Change: Fix or feature that would cause existing functionality to not work as expected.
♻️ Refactor: Code change that neither fixes a bug nor adds a feature.
💅 Style: Changes that do not affect the meaning of the code (white-space, formatting, etc.).
📚 Documentation: Updates to documentation files.
⚙️ Build/CI: Changes to the build process or CI configuration.
🧹 Chore: Other changes that don't modify src or test files.

Pre-Submission Checklist

Screenshots / Videos

MCP Execution Viewer - Watch Video

Documentation Updates

Additional Notes

Important

Enhance MCP tool execution feedback with new UI components, status tracking, and improved message handling.

UI Components:
- Add McpExecution component in McpExecution.tsx for displaying MCP tool execution status and results.
- Refactor ChatRow in ChatRow.tsx to use McpExecution for better visualization.
Functionality:
- Implement McpExecutionStatus schema in mcp.ts with states: started, output, completed, error.
- Enhance useMcpToolTool in useMcpToolTool.ts to send execution status updates.
- Update combineCommandSequences in combineCommandSequences.ts to combine use_mcp_server and mcp_server_response messages.
Testing:
- Add tests for useMcpToolTool in useMcpToolTool.test.ts to cover parameter validation, partial requests, successful execution, and error handling.
- Add tests for combineCommandSequences in combineCommandSequences.test.ts to handle MCP server responses.
Misc:
- Update CodeAccordian in CodeAccordian.tsx to support custom headers.

^{This description was created by}^{for a98d119c7f4ec99671109b0d9caab741e684afab. You can customize this summary. It will automatically update as commits are pushed.}

changeset-bot · 2025-05-12T03:47:48Z

⚠️ No Changeset found

Latest commit: 98b091b

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

ellipsis-dev · 2025-05-12T03:50:21Z

webview-ui/src/components/chat/McpExecution.tsx

Typo: The component name CodeAccordian is likely a misspelling. The standard spelling is CodeAccordion. Consider renaming it for consistency and clarity.

samhvw8 · 2025-05-12T03:55:09Z

@LousyBook94 just push my pr, can you check this ?

LousyBook94 · 2025-05-12T04:06:22Z

@samhvw8 woah that looks better than i imagined :]

LousyBook94 · 2025-05-12T04:11:56Z

@samhvw8 you should probably link this pr to the issue too

samhvw8 · 2025-05-12T04:16:08Z

@LousyBook94 already linked you can check above pr description

@samhvw8 woah that looks better than i imagined :]

thanks for your review, can you try it local ?

@cte @sachasayan if you have time can you review it for me ?

* protos report bug * changeset

daniel-lxs · 2025-06-04T14:57:07Z

src/shared/combineCommandSequences.ts

I noticed there are 4 separate for loops here. Should we consider combining these to optimize performance?

The MCP processing loops could potentially be merged, and we might be able to build the result array directly instead of creating intermediate arrays.

What do you think about refactoring this to use fewer loops?

daniel-lxs · 2025-06-04T15:07:07Z

Hey @samhvw8 this is pretty cool, I am curious about the UI, do you think we should keep these new styles or make the styles match our current ones for consistency?

samhvw8 · 2025-06-04T16:26:41Z

Hey @samhvw8 this is pretty cool, I am curious about the UI, do you think we should keep these new styles or make the styles match our current ones for consistency?

Ok let me do that

samhvw8 · 2025-06-06T15:47:28Z

This looks awesome!

yeah, thanks for help me to complete this PR <3

webview-ui/src/components/chat/ChatRow.tsx

webview-ui/src/components/chat/McpExecution.tsx

src/core/tools/useMcpToolTool.ts

daniel-lxs

Hey @samhvw8, Thank you for fixing the test due to the new translations keys I added.

LGTM

- Add McpExecutionStatus type with discriminated union for execution states - Implement McpExecution component with live status updates and collapsible output - Replace inline MCP UI in ChatRow with dedicated McpExecution component - Add comprehensive test coverage for useMcpToolTool - Enhance CodeAccordian to support custom headers - Improve combineCommandSequences to handle MCP execution flows

- Reduced from 3 separate loops to 1 main processing loop - Improved time complexity from O(n²) to O(n) - Reduced total passes through array from 4 to 2 - Better memory access patterns and cache utilization

…lid JSON arguments

…_name

samhvw8 · 2025-06-12T03:09:49Z

@daniel-lxs i just sync with latest change, can you check it again
@mrubens is that this look good ?

mrubens · 2025-06-12T03:42:41Z

This one might be a particularly tough example because of the repeated long name, but it does seem like a lot of duplicated information in the new MCP execution toolbar (and it pushes the status and the caret out of the bounding box)

…name in approval section

daniel-lxs

This looks much better, made a tweak to remove some repeated text.

And the text should wrap properly now.

samhvw8 requested review from cte and mrubens as code owners May 12, 2025 03:47

github-project-automation bot added this to Roo Code Roadmap May 12, 2025

github-project-automation bot moved this to New in Roo Code Roadmap May 12, 2025

dosubot bot added size:XL This PR changes 500-999 lines, ignoring generated files. enhancement New feature or request labels May 12, 2025

ellipsis-dev bot reviewed May 12, 2025

View reviewed changes

LousyBook94 approved these changes May 12, 2025

View reviewed changes

samhvw8 force-pushed the feat/mcp-viewer branch 2 times, most recently from 6a1191e to f28846d Compare May 12, 2025 23:00

hannesrudolph moved this from New to PR [Pre Approval Review] in Roo Code Roadmap May 14, 2025

bgilbert6 pushed a commit to bgilbert6/Roo-Code that referenced this pull request May 14, 2025

PROTO refactor reportbug (RooCodeInc#3485)

f8a7b56

* protos report bug * changeset

samhvw8 force-pushed the feat/mcp-viewer branch 2 times, most recently from 78d4ee9 to 98b091b Compare May 15, 2025 16:24

mrubens added this to Roo Code Roadmap May 20, 2025

github-project-automation bot moved this to New in Roo Code Roadmap May 20, 2025

hannesrudolph moved this from New to PR [Pre Approval Review] in Roo Code Roadmap May 20, 2025

hannesrudolph moved this from PR [Needs Review] to TEMP in Roo Code Roadmap May 26, 2025

daniel-lxs moved this from TEMP to PR [Needs Review] in Roo Code Roadmap May 27, 2025

daniel-lxs added the PR - Needs Preliminary Review label May 27, 2025

daniel-lxs reviewed Jun 4, 2025

View reviewed changes

daniel-lxs moved this from PR [Needs Prelim Review] to PR [Changes Requested] in Roo Code Roadmap Jun 4, 2025

daniel-lxs removed the PR - Needs Preliminary Review label Jun 4, 2025

dosubot bot added the lgtm This PR has been approved by a maintainer label Jun 6, 2025

daniel-lxs moved this from PR [Changes Requested] to PR [Needs Review] in Roo Code Roadmap Jun 6, 2025

daniel-lxs added PR - Needs Review and removed PR - Changes Requested labels Jun 6, 2025

mrubens reviewed Jun 8, 2025

View reviewed changes

webview-ui/src/components/chat/ChatRow.tsx Outdated Show resolved Hide resolved

mrubens reviewed Jun 8, 2025

View reviewed changes

webview-ui/src/components/chat/McpExecution.tsx Outdated Show resolved Hide resolved

mrubens reviewed Jun 8, 2025

View reviewed changes

src/core/tools/useMcpToolTool.ts Outdated Show resolved Hide resolved

daniel-lxs moved this from PR [Needs Review] to PR [Changes Requested] in Roo Code Roadmap Jun 8, 2025

daniel-lxs force-pushed the feat/mcp-viewer branch from bfce0df to 86a95f0 Compare June 8, 2025 19:27

daniel-lxs moved this from PR [Changes Requested] to PR [Needs Review] in Roo Code Roadmap Jun 8, 2025

samhvw8 force-pushed the feat/mcp-viewer branch 2 times, most recently from 9df793d to 53a90aa Compare June 9, 2025 15:46

daniel-lxs approved these changes Jun 9, 2025

View reviewed changes

samhvw8 and others added 7 commits June 12, 2025 10:05

refactor: merge loops in combineCommandSequences for better efficiency

3992301

- Reduced from 3 separate loops to 1 main processing loop - Improved time complexity from O(n²) to O(n) - Reduced total passes through array from 4 to 2 - Better memory access patterns and cache utilization

feat: enhance JSON parsing and rendering in McpExecution component

c54244e

feat: add mock implementations for react-markdown and remark-gfm

a62f37e

fix: remove unreachable return statement in ChatRowContent component

a48595e

feat(i18n): add execution status messages and error handling for inva…

961aa9e

…lid JSON arguments

test: add parameter validation tests for missing server_name and tool…

3a434be

…_name

samhvw8 force-pushed the feat/mcp-viewer branch from 53a90aa to 3a434be Compare June 12, 2025 03:09

Update McpExecution component to show server name in header and tool …

e10b684

…name in approval section

daniel-lxs approved these changes Jun 12, 2025

View reviewed changes

mrubens approved these changes Jun 12, 2025

View reviewed changes

mrubens merged commit a9c1dad into RooCodeInc:main Jun 12, 2025
9 checks passed

github-project-automation bot moved this from PR [Pre Approval Review] to Done in Roo Code Roadmap Jun 12, 2025

github-project-automation bot moved this from PR [Needs Review] to Done in Roo Code Roadmap Jun 12, 2025

feat(mcp): improve mcp with McpExecution, make UX like terminal execute #3485

feat(mcp): improve mcp with McpExecution, make UX like terminal execute #3485

Uh oh!

Conversation

samhvw8 commented May 12, 2025 • edited by ellipsis-dev bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Related GitHub Issue

Description

Test Procedure

Type of Change

Pre-Submission Checklist

Screenshots / Videos

Documentation Updates

Additional Notes

Uh oh!

changeset-bot bot commented May 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

ellipsis-dev bot May 12, 2025

Choose a reason for hiding this comment

Uh oh!

samhvw8 commented May 12, 2025

Uh oh!

LousyBook94 commented May 12, 2025

Uh oh!

LousyBook94 commented May 12, 2025

Uh oh!

samhvw8 commented May 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

daniel-lxs Jun 4, 2025

Choose a reason for hiding this comment

Uh oh!

daniel-lxs commented Jun 4, 2025

Uh oh!

samhvw8 commented Jun 4, 2025

Uh oh!

samhvw8 commented Jun 6, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

daniel-lxs left a comment

Choose a reason for hiding this comment

Uh oh!

samhvw8 commented Jun 12, 2025

Uh oh!

mrubens commented Jun 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

daniel-lxs left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

samhvw8 commented May 12, 2025 •

edited by ellipsis-dev bot

Loading

changeset-bot bot commented May 12, 2025 •

edited

Loading

samhvw8 commented May 12, 2025 •

edited

Loading

mrubens commented Jun 12, 2025 •

edited

Loading