uswds-mcp
Integrates with VS Code via GitHub Copilot MCP support to provide USWDS guidance, component retrieval, and validation within the editor.
Click on "Install Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@uswds-mcpgenerate a USWDS service page for a permit application"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
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.
Related MCP server: Components Build MCP
Use the Published Package
Most MCP clients can run the published package directly:
npx -y uswds-mcpFor a project dependency:
npm install uswds-mcpThe published package includes data/records.json, so documentation-backed tools work without running an ingest step.
Develop from Source
npm install
npm run buildTo refresh the bundled index from upstream USWDS repositories:
npm run ingestMCP 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-mcpAI 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 devTools
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.
This server cannot be installed
Maintenance
Resources
Unclaimed servers have limited discoverability.
Looking for Admin?
If you are the server author, to access and configure the admin panel.
Latest Blog Posts
- Your AI Chatbot Just Exposed Your CEO's Salary to an InternBy Om-Shree-0709 on .Agent IdentityMCP SecurityOAuth Delegation
- Why MCP Servers Need Execution Sandboxing (And Why Your Current Stack Isn't Enough)By Om-Shree-0709 on .Agentic AiPrompt InjectionWebAssembly
MCP directory API
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/bibekpdl/uswds-mcp'
If you have feedback or need assistance with the MCP directory API, please join our Discord server