fix(mcp-preview): server and tool name fetch to use tanstack

[icecrasher321]

Summary

Make mcp preview not display ids. Correctly display human readable names using react queries similar to other display names.

Type of Change

• Bug fix

Testing

Checklist

• Code follows project style guidelines
• Self-reviewed my changes
• Tests added/updated and passing
• No new warnings introduced
• I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Preview	Comments	Updated (UTC)
docs	Skipped			Nov 20, 2025 0:17am

[greptile-apps]

Greptile Summary

• Migrated MCP preview from displaying IDs to showing human-readable names by integrating TanStack Query hooks for server and tool data hydration
• Refactored useMcpTools hook from manual useState/useEffect polling to TanStack Query with automatic cache invalidation

Confidence Score: 3/5

• This PR is mostly safe but has a type mismatch issue that needs attention before merging
• The refactoring correctly implements TanStack Query patterns and removes manual polling logic. However, the McpTool interface in hooks/queries/mcp.ts includes an id field that doesn't match the API response structure from lib/mcp/client.ts. While the code compensates by generating IDs on-the-fly, this interface mismatch is misleading and could cause confusion or bugs in future usage
• Pay close attention to apps/sim/hooks/queries/mcp.ts for the interface type mismatch

Important Files Changed

Filename	Overview
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/workflow-block.tsx	Added MCP server and tool name hydration using TanStack Query hooks, correctly generating composite tool IDs for lookups
apps/sim/hooks/queries/mcp.ts	Added id, serverName, and inputSchema fields to McpTool interface, but id field doesn't match API response structure

Sequence Diagram

sequenceDiagram
    participant User
    participant WorkflowBlock
    participant TanStackQuery
    participant API
    participant McpService
    participant McpClient

    User->>WorkflowBlock: "View workflow block with MCP selector"
    WorkflowBlock->>TanStackQuery: "useMcpServers(workspaceId)"
    TanStackQuery->>API: "GET /api/mcp/servers?workspaceId={id}"
    API->>McpService: "getWorkspaceServers(workspaceId)"
    McpService-->>API: "Return server list"
    API-->>TanStackQuery: "Return servers"
    TanStackQuery-->>WorkflowBlock: "Return cached/fresh servers"
    
    WorkflowBlock->>TanStackQuery: "useMcpToolsQuery(workspaceId)"
    TanStackQuery->>API: "GET /api/mcp/tools/discover?workspaceId={id}"
    API->>McpService: "discoverTools(userId, workspaceId)"
    McpService->>McpClient: "listTools() for each server"
    McpClient-->>McpService: "Return tools with serverId, name"
    McpService-->>API: "Return all tools"
    API-->>TanStackQuery: "Return tools"
    TanStackQuery-->>WorkflowBlock: "Return cached/fresh tools"
    
    WorkflowBlock->>WorkflowBlock: "createMcpToolId(serverId, name)"
    WorkflowBlock->>WorkflowBlock: "Find tool by composite ID"
    WorkflowBlock->>User: "Display human-readable names"

Loading

[greptile-apps]

_{5 files reviewed, 2 comments}

_{Edit Code Review Agent Settings | Greptile
React with 👍 or 👎 to share your feedback on this new summary format}