Skip to content

docs: add MCP server architecture document for gen-1 Spectrum Web Com…#6079

Draft
blunteshwar wants to merge 13 commits intomainfrom
pvashish/mcp
Draft

docs: add MCP server architecture document for gen-1 Spectrum Web Com…#6079
blunteshwar wants to merge 13 commits intomainfrom
pvashish/mcp

Conversation

@blunteshwar
Copy link
Copy Markdown
Contributor

@blunteshwar blunteshwar commented Mar 12, 2026

Summary

Implements a fully functional MCP (Model Context Protocol) server for Spectrum Web Components, enabling AI tools like Claude to understand and work with SWC components natively.

  • 6 MCP tools: list_components, get_component_api, get_component_examples, search_components, validate_usage, get_migration_info
  • Monolithic CEM support: parses the single custom-elements.json generated by docs:analyze, loading 95 components automatically
  • Migration awareness: tracks gen-1 → gen-2 migration status and surfaces @adobe/spectrum-wc/{component} equivalents
  • HTML validation: checks SWC component usage in HTML snippets, warns on unknown/deprecated attributes, and suggests typo corrections
  • 44 tests across 6 test files (Vitest)

How to test

# Build
cd tools/mcp-server && yarn build

# Run MCP Inspector (visual UI) from root dir of SWC
npx @modelcontextprotocol/inspector node tools/mcp-server/dist/index.js

Related

…ponents

Defines the architecture for an MCP server exposing gen-1 component APIs
(properties, events, slots, CSS custom properties) with a forward-compatible
design for gen-2 migration.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented Mar 12, 2026

⚠️ No Changeset found

Latest commit: f6b098c

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

@github-actions
Copy link
Copy Markdown
Contributor

📚 Branch Preview Links

🔍 First Generation Visual Regression Test Results

When a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:

Deployed to Azure Blob Storage: pr-6079

If the changes are expected, update the current_golden_images_cache hash in the circleci config to accept the new images. Instructions are included in that file.
If the changes are unexpected, you can investigate the cause of the differences and update the code accordingly.

blunteshwar and others added 12 commits March 26, 2026 14:43
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Parse the migration status markdown table to extract structured
migration entries with component name, status, and completed steps.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Implement parseCEM() that extracts ComponentAPI objects from Custom
Elements Manifest JSON. Handles property filtering (private/protected),
inherited member annotations, deprecated normalization, and all CEM
sections (attributes, events, slots, CSS properties, CSS parts, methods).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Implements ComponentRegistry class that stores ComponentAPI objects and
supports querying by tag name, filtering by generation, full-text search
across properties/events/slots/descriptions/css-properties with relevance
scoring, and example management. Adds SearchSection type to types.ts.

All 9 tests passing.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Implement parseReadmeExamples() that extracts ```html demo code blocks
from component README files, using the nearest preceding heading as title.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Validates HTML snippets against the component registry, flagging unknown
attributes with typo suggestions (Levenshtein distance) and warning on
deprecated attributes.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Register all 6 tools (list_components, get_component_api,
get_component_examples, search_components, validate_usage,
get_migration_info) and wire up the stdio transport with
component/migration data loading at startup.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Tests list_components, get_component_api, get_component_examples,
search_components, validate_usage, and get_migration_info flows
using real test fixtures and the full module stack.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
The repo generates a single monolithic custom-elements.json at
1st-gen/projects/documentation/ rather than per-package files.
Add parseMonolithicCEM() that derives package names from module
paths, and update index.ts to try monolithic CEM first with
per-package fallback.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
…RATION_STEPS

Address code review findings:
- Use z.enum() instead of z.string() for sections/searchIn params
  in get_component_api and search_components tools to validate
  input at the MCP boundary
- Export MIGRATION_STEPS from migration-parser and reuse in index.ts
  instead of duplicating the array

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant