Skip to content

Add clickable server primitive inspection to show servers #1937

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
chelojimenez merged 4 commits into from
Apr 26, 2026
Merged

Add clickable server primitive inspection to show servers #1937

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
aea51a5
Add primitive inspection to show servers
chelojimenez Apr 26, 2026
f36a68f
Use host theme and MCPJam wordmark in show_servers
chelojimenez Apr 26, 2026
717be29
Share servers loading skeleton across inspector and MCP app
chelojimenez Apr 26, 2026
d3c3a2c
Fix theme propagation for MCP apps and show_servers
chelojimenez Apr 26, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 37 additions & 0 deletions design-system/src/components/servers-loading-skeleton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import { cn } from "../cn";
import { Skeleton } from "./skeleton";

interface ServersLoadingSkeletonProps extends React.ComponentProps<"div"> {
cardClassName?: string;
cardCount?: number;
gridClassName?: string;
}
Comment on lines +1 to +8
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot Apr 26, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Confirm whether React is globally typed in the design-system package or imported elsewhere in the file's neighbors.
fd -t f 'tsconfig*.json' design-system | xargs -I{} sh -c 'echo "=== {} ==="; cat "{}"'
echo "--- sibling component imports ---"
fd -t f -e tsx -e ts . design-system/src/components | head -20 | xargs -I{} sh -c 'echo "== {} =="; head -5 "{}"'

Repository: MCPJam/inspector

Length of output: 4712

🏁 Script executed:

# Check the full servers-loading-skeleton.tsx file
cat design-system/src/components/servers-loading-skeleton.tsx

# Check aspect-ratio and collapsible for their full import statements
echo "=== aspect-ratio.tsx imports ==="
head -15 design-system/src/components/aspect-ratio.tsx

echo "=== collapsible.tsx imports ==="
head -15 design-system/src/components/collapsible.tsx

Repository: MCPJam/inspector

Length of output: 1714

Add missing React import for type reference.

React.ComponentProps<"div"> requires React to be in scope. Add the import at the top to match the codebase convention:

♻️ Add namespace import 
+import * as React from "react";
 import { cn } from "../cn";
 import { Skeleton } from "./skeleton";
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@design-system/src/components/servers-loading-skeleton.tsx` around lines 1 -
8, The file is using React.ComponentProps<"div"> in the
ServersLoadingSkeletonProps interface but React is not imported; add the
namespace import "import * as React from 'react';" (or the project convention
equivalent) at the top of the file so React is in scope for the
React.ComponentProps type used in ServersLoadingSkeletonProps and any other type
references in this module.


function ServersLoadingSkeleton({
cardClassName,
cardCount = 2,
className,
gridClassName,
...props
}: ServersLoadingSkeletonProps) {
return (
<div
data-slot="servers-loading-skeleton"
className={cn("flex-1 p-6", className)}
{...props}
>
<div
className={cn("grid grid-cols-1 gap-6 xl:grid-cols-2", gridClassName)}
>
{Array.from({ length: cardCount }).map((_, index) => (
<Skeleton
key={index}
className={cn("h-48 w-full rounded-lg", cardClassName)}
/>
))}
</div>
</div>
);
}

export { ServersLoadingSkeleton };
2 changes: 1 addition & 1 deletion mcp/src/generated/McpAppsHtml.bundled.ts
View file
Open in desktop

Large diffs are not rendered by default.

42 changes: 42 additions & 0 deletions mcp/src/shared/show-servers.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,47 @@ export type ServerInfo = {
version?: string;
};

export type ServerPrimitiveListStatus = "loaded" | "skipped" | "error";

export type ServerPrimitiveCollection<TItem> = {
status: ServerPrimitiveListStatus;
items: TItem[];
statusDetail?: string;
};

export type ServerToolInfo = {
name: string;
title?: string;
description?: string;
};

export type ServerResourceInfo = {
uri: string;
name?: string;
title?: string;
description?: string;
mimeType?: string;
};

export type ServerPromptArgumentInfo = {
name: string;
description?: string;
required?: boolean;
};

export type ServerPromptInfo = {
name: string;
title?: string;
description?: string;
arguments?: ServerPromptArgumentInfo[];
};

export type ServerPrimitives = {
tools: ServerPrimitiveCollection<ServerToolInfo>;
resources: ServerPrimitiveCollection<ServerResourceInfo>;
prompts: ServerPrimitiveCollection<ServerPromptInfo>;
};

export type ServerEntry = {
id: string;
name: string;
Expand All @@ -15,6 +56,7 @@ export type ServerEntry = {
status: ServerStatus;
statusDetail?: string;
serverInfo?: ServerInfo;
primitives?: ServerPrimitives;
};

export type WorkspaceInfo = {
Expand Down
Loading
Loading