uswds-mcp
Provides AI coding tools with structured access to U.S. Web Design System components, patterns, templates, and accessibility guidance for building government websites.
README
uswds-mcp
Unofficial MCP server for the U.S. Web Design System (USWDS).
uswds-mcp is an independent local stdio Model Context Protocol server that helps AI coding tools and IDEs use USWDS components, design patterns, page templates, packages, design tokens, and accessibility guidance.
This project is not affiliated with, endorsed by, sponsored by, or maintained by the U.S. General Services Administration (GSA), Technology Transformation Services (TTS), or the official USWDS team.
The package includes a prebuilt index generated from public USWDS sources:
USWDS is an official project of GSA/TTS. This package is an independent developer tool for working with public USWDS materials.
Features
- Search USWDS documentation and implementation records.
- Retrieve structured component, pattern, template, token, and package records.
- Recommend USWDS page and service structures.
- Generate framework-neutral USWDS HTML with framework adaptation notes.
- Provide framework-specific integration recipes for Next.js, React/Vite, static HTML, Rails, and Drupal.
- Validate common USWDS markup, accessibility, and token-usage issues.
- Validate project setup risks such as wrong package import paths, missing scripts, CDN usage, copied assets, and global CSS impact.
- Include a Codex Skill at
.agents/skills/uswds/SKILL.mdfor agent workflow guidance.
Use the Published Package
Most MCP clients can run the published package directly:
npx -y uswds-mcp
For a project dependency:
npm install uswds-mcp
The published package includes data/records.json, so documentation-backed tools work without running an ingest step.
Develop from Source
npm install
npm run build
To refresh the bundled index from upstream USWDS repositories:
npm run ingest
MCP Configuration
Use the package with an MCP client that supports stdio servers:
{
"mcpServers": {
"uswds": {
"command": "npx",
"args": ["-y", "uswds-mcp"]
}
}
}
Registry name:
io.github.bibekpdl/uswds-mcp
AI Tool and IDE Setup
USWDS MCP uses the standard stdio MCP transport and can be used by MCP-compatible AI tools and IDEs. See docs/CLIENTS.md for examples covering:
- Claude Desktop
- Claude Code
- Cursor
- VS Code with GitHub Copilot MCP support
- Windsurf Cascade
- Generic MCP clients
Example configs are also available in examples/.
For framework-specific setup guidance, see docs/INTEGRATION.md.
For a tool-by-tool usage guide, see docs/TOOLS.md.
Development
npm run typecheck
npm test
npm run build
npm run dev
Tools
search_uswdsget_componentget_patternget_templaterecommend_uswds_structuregenerate_uswds_pagevalidate_uswds_markupget_uswds_integration_recipevalidate_uswds_project_setup
Resources
uswds://component/{slug}uswds://pattern/{slug}uswds://template/{slug}uswds://token/{category}uswds://package/{name}
Prompts
build_agency_websitebuild_service_pageaudit_uswds_pageconvert_page_to_uswdsintegrate_uswds_in_project
License
MIT
See NOTICE.md for USWDS attribution, upstream source links, and licensing notes for indexed USWDS material.
Recommended Servers
playwright-mcp
A Model Context Protocol server that enables LLMs to interact with web pages through structured accessibility snapshots without requiring vision models or screenshots.
Magic Component Platform (MCP)
An AI-powered tool that generates modern UI components from natural language descriptions, integrating with popular IDEs to streamline UI development workflow.
Audiense Insights MCP Server
Enables interaction with Audiense Insights accounts via the Model Context Protocol, facilitating the extraction and analysis of marketing insights and audience data including demographics, behavior, and influencer engagement.
VeyraX MCP
Single MCP tool to connect all your favorite tools: Gmail, Calendar and 40 more.
graphlit-mcp-server
The Model Context Protocol (MCP) Server enables integration between MCP clients and the Graphlit service. Ingest anything from Slack to Gmail to podcast feeds, in addition to web crawling, into a Graphlit project - and then retrieve relevant contents from the MCP client.
Kagi MCP Server
An MCP server that integrates Kagi search capabilities with Claude AI, enabling Claude to perform real-time web searches when answering questions that require up-to-date information.
E2B
Using MCP to run code via e2b.
Neon Database
MCP server for interacting with Neon Management API and databases
Exa Search
A Model Context Protocol (MCP) server lets AI assistants like Claude use the Exa AI Search API for web searches. This setup allows AI models to get real-time web information in a safe and controlled way.
Qdrant Server
This repository is an example of how to create a MCP server for Qdrant, a vector search engine.