modelcontextprotocol/use-mcp
Watch
1
0
Fork
You've already forked use-mcp
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

wip

Browse source
This commit is contained in:
Glen Maddern 2025-06-10 19:11:38 +10:00
commit 0726f26927
1 changed files with 23 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

44
examples/inspector/src/components/McpServers.tsx
View file

@ -254,7 +254,7 @@ export function McpServers({
return (
<input
type="number"
className="w-1/4 p-2 pr-6 mr-3 border border-gray-200 rounded text-sm focus:outline-none focus:ring-1 focus:ring-blue-300 placeholder-gray-300"
className="w-32 p-2 pr-6 mr-3 border border-gray-200 rounded text-sm focus:outline-none focus:ring-1 focus:ring-blue-300 placeholder-gray-300"
value={value}
step={schema.type === 'integer' ? 1 : 'any'}
required={isRequired}
@ -364,7 +364,7 @@ export function McpServers({
No tools available. Connect to an MCP server to see available tools.
</div>
) : (
<div className="space-y-6">
<div className="border border-gray-200 rounded p-4 bg-gray-50 space-y-6">
{tools.map((tool: Tool, index: number) => (
<div key={index}>
{/* Tool title outside the card */}
@ -399,7 +399,7 @@ export function McpServers({
</div>
)}
</div>
<div className={schema.type === 'number' || schema.type === 'integer' ? 'flex flex-wrap items-center' : ''}>
<div className={schema.type === 'number' || schema.type === 'integer' ? 'inline-block' : ''}>
{renderFormField(tool.name, fieldName, schema, isRequired)}
</div>
</div>
@ -417,25 +417,27 @@ export function McpServers({
Run
</button>
{/* Per-tool execution log */}
<div className="border-t border-gray-100 pt-4">
<div className="flex items-center justify-between mb-2">
<h5 className="font-medium text-sm text-gray-700">Execution Log</h5>
<button
onClick={() => clearExecutionLog(tool.name)}
className="flex items-center gap-1 text-xs text-gray-500 hover:text-gray-700"
>
<X size={12} />
Clear
</button>
{/* Per-tool execution log - only show if there's content */}
{toolExecutionLogs[tool.name] && (
<div className="border-t border-gray-100 pt-4">
<div className="flex items-center justify-between mb-2">
<h5 className="font-medium text-sm text-gray-700">Execution Log</h5>
<button
onClick={() => clearExecutionLog(tool.name)}
className="flex items-center gap-1 text-xs text-gray-500 hover:text-gray-700"
>
<X size={12} />
Clear
</button>
</div>
<textarea
value={toolExecutionLogs[tool.name]}
readOnly
className="w-full h-32 p-2 border border-gray-200 rounded text-xs font-mono bg-gray-50 resize-none placeholder-gray-300"
placeholder="Tool execution results will appear here..."
/>
</div>
<textarea
value={toolExecutionLogs[tool.name] || ''}
readOnly
className="w-full h-32 p-2 border border-gray-200 rounded text-xs font-mono bg-gray-50 resize-none placeholder-gray-300"
placeholder="Tool execution results will appear here..."
/>
</div>
)}
</div>
</div>
))}