@cisco_open/mcptoolkit-viewer

Interactive card view for MCP Description documents — analogous to what Swagger UI is to the Swagger Editor.

Quick Start — Script Tag

<link rel="stylesheet" href="dist/mcptoolkit-viewer.css">
<div id="mcpdesc"></div>
<script src="dist/mcptoolkit-viewer.js"></script>
<script>
  McpToolkitViewer({
    dom_id: '#mcpdesc',
    url: '/api/mcpdesc.yaml'
  });
</script>

Quick Start — React Component

import { McpDescCardView } from '@cisco_open/mcptoolkit-viewer/react';
import '@cisco_open/mcptoolkit-viewer/dist/mcptoolkit-viewer.css';

function MyPage({ doc, validation }) {
  return (
    <div className="mcptoolkit-viewer-root">
      <McpDescCardView doc={doc} validation={validation} />
    </div>
  );
}

Protocol-version projection controls are disabled by default. Hosts that own the projection state can opt in with protocolVersionProjectionMode="enabled", and provide the source versions, current selection, and selection callback:

<McpDescCardView
  doc={effectiveDoc}
  protocolVersionProjectionMode="enabled"
  protocolVersionOptions={sourceDoc.protocolVersions}
  selectedProtocolVersion={selectedProtocolVersion}
  onProtocolVersionSelect={setSelectedProtocolVersion}
/>

API

McpToolkitViewer(options)

| Option | Type | Default | Description | |--------|------|---------|-------------| | dom_id | string | — | Required. CSS selector for the container element. | | spec | McpDescDocument | — | Pre-parsed MCP Description document object. | | url | string | — | URL to fetch a YAML or JSON mcpdesc file from. | | theme | 'light' \| 'dark' | 'light' | Color theme. | | defaultOpen | boolean | true | Whether <details> sections start expanded. | | showValidation | boolean | true | Show validation panel at the bottom. | | exampleDisplay | 'hidden' \| 'names' \| 'details' | 'hidden' | Hide examples, show their names, or show expandable JSON details. | | onExampleSelect | (selection) => void | — | Called with an example's name, kind, and exact JSON pointer when selected in names mode. |

Returns a McpToolkitViewerInstance with:

• updateSpec(spec) — Update the displayed document
• reload() — Re-fetch from the configured URL
• destroy() — Unmount and clean up

Build

npm run build

License

See root repository LICENSE.