goa-design-system-mcp

twjeffery/goa-design-system-mcp

3.1

If you are the rightful owner of goa-design-system-mcp and would like to certify it and/or have it hosted online, please leave a comment on the right or send an email to henry@mcphub.com.

The GoA Design System AI Assistant is an experimental AI-powered prototyping tool designed to accelerate the development of Alberta Government service prototypes using the GoA Design System.

GoA Design System AI Assistant

v1 AI assistant for building Alberta Government digital services with the GoA Design System

A comprehensive AI knowledge base that helps service teams design, develop, and implement government digital services using GoA Design System components effectively.

What Can You Ask?

Quick Code Generation

  • "Generate a user registration form using GoA form patterns"
  • "Create code for testing this layout concept"
  • "Build a working prototype of this service flow"
  • "Convert this design into testable GoA components"

Form Design & Development

  • "Help me design a business application form using GoA patterns"
  • "Show me proper validation patterns for government forms"
  • "How should I structure a multi-section form?"
  • "What's the GoA pattern for collecting sensitive information?"

Contextual Design System Support

  • "I need to collect permit applications - what patterns exist?"
  • "Show me relevant examples for building a citizen dashboard"
  • "What GoA components work best for case management interfaces?"
  • "Help me understand which layout patterns fit my service context"

Design Feedback & Guidance

  • "Review this Figma design - what GoA components should I use?"
  • "I need to solve [specific service problem] - what patterns exist?"
  • "Suggest design system approaches for this user workflow"
  • "What accessibility considerations apply to this interface?"

Designer-to-Developer Handoff

  • "Generate a complete component spec for this design"
  • "Give my developer starting code and implementation guidance"
  • "Map this design to specific GoA components and examples"
  • "Create a technical brief for implementing this service flow"

Learning & Onboarding

  • "I'm new to GoA - show me the essential patterns for [role]"
  • "How do GoA components work together in government services?"
  • "What are the key differences between React and Angular implementation?"
  • "Help me understand government service design patterns"

Quality Assurance & Standards

  • "Review my implementation - am I using components correctly?"
  • "Check this design for accessibility compliance"
  • "Identify any anti-patterns in my component usage"
  • "Validate this against GoA standards and best practices"

Troubleshooting & Problem Solving

  • "Why isn't this component integration working?"
  • "Debug this layout issue with GoA components"
  • "Help me fix this accessibility problem"
  • "Suggest alternatives when standard patterns don't fit"

Team Collaboration

  • "Generate examples to explain this technical concept to stakeholders"
  • "Create a component usage guide for our service team"
  • "Help translate design decisions into developer language"
  • "Show working examples for user testing sessions"

Available MCP Tools

Core Knowledge & Search

  • project_knowledge_search - Primary search across all GoA Design System knowledge (components, workflows, patterns, setup guides)

    • Example: "Find all information about form validation patterns"
    • Example: "Search for citizen dashboard layout examples"

  • search_components - Search components by name or functionality with category filtering

    • Example: "Show me all form-related components"
    • Example: "Find components for data display"

  • get_component_details - Get complete details for a specific component by exact name

    • Example: "Get complete details for the Button component"
    • Example: "Show me everything about the Input component"

  • get_usage_patterns - Get usage patterns for specific implementation scenarios

    • Example: "Show me patterns for building data tables"
    • Example: "Get usage patterns for multi-step forms"

Design Expert Assistance

  • design_review - Comprehensive design review for GoA compliance, accessibility, and UX standards

    • Example: "Review this registration form design for accessibility compliance"
    • Example: "Evaluate this dashboard layout against GoA standards"

  • recommend_patterns - Get recommended component patterns and layouts for specific scenarios

    • Example: "Recommend components for a permit application workflow"
    • Example: "Suggest patterns for a citizen notification center"

  • accessibility_audit - WCAG 2.2 AA accessibility audit with government compliance checking

    • Example: "Audit this form interface for WCAG compliance"
    • Example: "Check this data table for accessibility issues"

  • governance_process - Guide teams through GoA Design System governance process and identify compliance risks

    • Example: "Review our project approach for design system compliance"
    • Example: "What's the proper process for requesting new components?"

  • team_onboarding - Get personalized onboarding guidance for teams new to the GoA Design System

    • Example: "I just joined as a new designer, help me get started using the design system"
    • Example: "Our development team is new to GoA components, what should we learn first?"

Feedback & Community

  • give_feedback - Submit feedback about component usage or missing information
    • Example: "Report that the Dropdown component documentation is unclear"
    • Example: "Suggest adding a file upload example for government forms"

Your AI tool will automatically choose the right tool based on your questions - just ask naturally and the MCP will handle the technical details.

Real-World Examples

Service Team Designer

Context: "I need to design a permit renewal flow that works for both first-time and returning users"

Get: Relevant examples from similar Alberta services, component recommendations, accessibility guidance, and implementation patterns specific to permit workflows.

Frontend Developer

Context: "Convert this dashboard design to React" + Figma design + service context

Get: Working React code using proper GoA components, implementation guidance, and patterns that match your specific service needs.

Product Manager

Context: "Prototype a citizen notification center for stakeholder review"

Get: Quick working prototype with real components for testing user flows and gathering authentic feedback from stakeholders.

QA Specialist

Context: "Review this form implementation for government compliance"

Get: Detailed analysis of accessibility, component usage, validation patterns, and alignment with government service standards.

Setup Guide

Prerequisites

  • Node.js 16+
  • MCP-compatible AI tool (Claude, Cursor, ChatGPT, GitHub Copilot, etc.)

MCP Server Setup

  1. Clone and Install

    git clone [repository-url]
cd goa-design-system-mcp
npm install
npm run build

  2. Start the MCP Server

    npm run start

  3. Configure Your AI Tool

    Add MCP server configuration to your AI tool's settings:

    {
  "mcpServers": {
    "goa-design-system": {
      "command": "node",
      "args": ["path/to/goa-design-system-mcp/dist/index.js"]
    }
  }
}

  4. Verify Setup Ask your AI: "What GoA components are available for building forms?"

Who This Helps

Service Team Developers

  • Learn GoA component implementation patterns through working examples
  • Get contextual guidance for your specific service requirements
  • Convert designs to proper GoA component usage quickly
  • Understand accessibility and government compliance requirements

Service Team Designers

  • Explore what's possible with existing GoA components
  • Get component recommendations for your service scenarios
  • Validate design decisions against government service patterns
  • Create designs that translate smoothly to development

Product Managers

  • Generate working prototypes for user testing and stakeholder demos
  • Understand technical feasibility within GoA Design System constraints
  • Communicate feature concepts using real component examples
  • Test service flows with interactive, accessible interfaces

QA Teams

  • Understand expected component behaviors for testing scenarios
  • Validate accessibility compliance in realistic contexts
  • Review implementations against government service standards
  • Test component interactions and edge cases

What's Included

Component Coverage

  • 35 Components: Complete GoA component library with implementation guidance
  • 72 Service Examples: Comprehensive patterns for government service scenarios
  • Framework Support: React, Angular, and Web Components
  • Complete API Documentation: Props, states, accessibility, implementation examples

Service Context

  • Government Service Patterns: Citizen-facing and worker-facing examples
  • Accessibility Guidance: WCAG compliance built into all recommendations
  • Implementation Best Practices: Anti-patterns, common mistakes, proper usage
  • Cross-Framework Support: Consistent guidance across React, Angular, Web Components

Additional Resources

Ready to build better government digital services? Set up the MCP server and start asking questions!

This AI assistant provides guidance and code generation for building with the GoA Design System. Generated code is intended for development, prototyping, and production use in Alberta Government digital services.