developer-toolsdesign

Tyler Forge

by tyler-technologies-oss

Access Tyler Forge’s design system, React UI library, component APIs, and framework guides for seamless app development

Provides access to Tyler Technologies' design system documentation, component APIs, design tokens, and framework integration guides with intelligent search, icon discovery, and templated documentation generation for building applications with Tyler Forge components.

github stars

4

Auto-detects installed Tyler Forge version10+ specialized documentation toolsFramework-agnostic with specific integration guides

best for

  • / Developers building applications with Tyler Forge components
  • / Teams implementing Tyler Technologies design system
  • / Frontend developers needing component documentation and examples

capabilities

  • / Browse Tyler Forge component library and documentation
  • / Generate framework-specific code examples (Angular, React, Vue, Svelte)
  • / Search components and icons with natural language queries
  • / Validate component API usage and properties
  • / Access design tokens for colors, spacing, and typography
  • / Get setup instructions for framework integration

what it does

Provides AI-powered access to Tyler Technologies' design system documentation, components, and design tokens. Generates framework-specific code examples and validates component API usage.

about

Tyler Forge is an official MCP server published by tyler-technologies-oss that provides AI assistants with tools and capabilities via the Model Context Protocol. Access Tyler Forge’s design system, React UI library, component APIs, and framework guides for seamless app development It is categorized under developer tools, design. This server exposes 11 tools that AI clients can invoke during conversations and coding sessions.

how to install

You can install Tyler Forge in your AI client of choice. Use the install panel on this page to get one-click setup for Cursor, Claude Desktop, VS Code, and other MCP-compatible clients. This server runs locally on your machine via the stdio transport.

license

Apache-2.0

Tyler Forge is released under the Apache-2.0 license. This is a permissive open-source license, meaning you can freely use, modify, and distribute the software.

readme

Tyler Forge™ MCP Server

Get instant access to Tyler Forge™ web component documentation directly in AI clients. Ask questions, generate code examples, and explore design system details.

What You Get

Tyler Forge™ is Tyler Technologies' comprehensive web component library and design system. This tool brings that documentation into your AI tools so you can:

  • Discover components - Find the right component for your needs
  • Generate code - Get framework-specific examples (Angular, React, Vue, Svelte)
  • Validate APIs - Verify that component properties, attributes, events, and other APIs are correctly used
  • Access design tokens - Use colors, spacing, typography consistently
  • Learn best practices - Get implementation guidance and accessibility tips

How does it work?

This MCP server provides a set of declarative resources and tools for accessing Tyler Forge documentation. It uses a progressive disclosure model to minimize complexity while maximizing accuracy.

Context-Aware

When you start the MCP server in your AI client, it automatically detects the currently installed version of Tyler Forge (if any) in your project. This allows it to provide version-specific documentation. If no version is detected, it defaults to the latest stable release that is bundled within this MCP server.

Progressive Disclosure

The MCP server is designed to minimize cognitive load by exposing only the most essential resources and tools upfront. More detailed information can be accessed through specific tools or follow-up queries. This keeps control of the token usage while still providing comprehensive access to the documentation when needed.

Documentation Source

All documentation is either pulled from the Custom Elements Manifest (CEM) files included with each Tyler Forge package, as well as information that was sourced from the documentation site at https://forge.tylerdev.io.

Setup

Claude Code

claude mcp add -t stdio -s [scope] forge -- npx -y @tylertech/forge-mcp@latest

The [scope] must be user, project or local. See the Claude Code MCP documentation for more information.

Codex CLI

Add the following to your config.toml (which defaults to ~/.codex/config.toml, but refer to the configuration documentation for more advanced setups):

[mcp_servers.forge]
command = "npx"
args = ["-y", "@tylertech/forge-mcp@latest"]

Gemini CLI

gemini mcp add -t stdio -s [scope] forge npx -y @tylertech/forge-mcp@latest

The [scope] must be user, project or local.

VS Code

  • Open the Command Palette (Cmd+Shift+P or Ctrl+Shift+P)
  • Choose MCP: Add Server...
  • Choose Command (stdio)
  • Enter npx -y @tylertech/forge-mcp@latest
  • Name the server forge
  • Choose if you want to use it as a Global or Workspace MCP server

See the VS Code MCP docs for more info.

Manual Configuration

Add the Forge MCP server to the .vscode/mcp.json configuration file in your project, or use the Command Palette to add it via "MCP: Add Server...".

{
  "servers": {
    "forge": {
      "command": "npx",
      "args": ["-y", "@tylertech/forge-mcp@latest"],
      "type": "stdio"
    }
  }
}

Note: You may need to start the server manually after adding it to the config file. Use the MCP: List Servers command from the Command Palette.

Claude Desktop

  • Open Settings
  • Choose Developer
  • Click on Edit Config

This will open your file explorer to the directory where the claude_desktop_config.json file lives. Edit the file to include the following configuration:

{
  "mcpServers": {
    "forge": {
      "command": "npx",
      "args": ["-y", "@tylertech/forge-mcp@latest"]
    }
  }
}

Best Practices

When using any AI-powered tool, it's important to follow best practices to ensure effective usage and accurate results:

  • Be Specific: Clearly define your questions or requests to get the most relevant information. Using vague prompts can lead to inaccurate or incorrect responses.
  • Plan Ahead: Spend time outlining and planning your prompts, and break things down into smaller tasks. This can significantly improve the quality of the responses.
  • Validate: Always cross-check critical information with official documentation or trusted sources. AI output may not always be accurate.
  • Provide Context: When writing prompts, provide relevant context to help the AI understand your needs better.
  • Use Examples: When possible, provide examples or screenshots of what you're looking for to guide the AI's responses.
  • Limit Scope: Break down complex queries into smaller, manageable parts for better clarity and responses. For lengthy conversations, periodically compact or clear context to maintain relevance.

If there's one thing to take away, it's to be specific and spend time up front planning and structuring your prompts. This will lead to more accurate and useful results. In the end, these tools are here to assist you, and they can get things wrong even with the best prompts and context. Always verify and review the output for accuracy.

Important Note

ALWAYS validate the output from any AI tool for accuracy. While this MCP server is designed to provide accurate information, it may not always be perfect and LLMs are known to hallucinate at times. Always cross-check critical information with the official Tyler Forge™ documentation or trusted sources.

Capabilities

Prompts

forge_mode

Sets some baseline rules when running Forge-specific tasks/queries.

You can trigger this prompt in your AI client by specifying the prompt name (if supported), typically via a slash command or prompt selection. The forge_mode prompt accepts a task parameter where you can describe your specific task/query. This helps guide the LLM to use the correct MCP server tools, as well as includes some rules and best practices when outputting Tyler Forge-related code.

Tools

The following tools are available for interacting with Tyler Forge documentation. Each tool uses declarative parameters to provide comprehensive functionality while minimizing the cognitive load for AI clients:

ToolDescription
Component Tools
get_component_docsGet comprehensive documentation for Tyler Forge components in various formats: full API reference, summary overview, or structural usage examples. Returns component list when no component specified.
list_componentsBrowse all available Tyler Forge components with descriptions. Returns a comprehensive table of all components with their purpose and capabilities.
find_componentsSearch Tyler Forge components by name, description, or functionality with enhanced fuzzy matching. Supports multi-term queries like "app bar drawer". Returns all components when no query provided.
validate_component_apiValidate Tyler Forge component API usage after code generation. Checks that properties, attributes, events, methods, slots, CSS properties, parts, and classes are valid.
Design System Tools
get_design_tokensGet Tyler Forge design tokens for consistent styling. Access color palettes, spacing scales, typography, animation, and other design system values.
setup_typographyAccess Tyler Forge typography setup instructions including font families, type scales, weights, and practical usage guidelines for consistent text styling.
setup_iconsAccess Tyler Forge icons system including installation, registration, and usage patterns for the forge-icon component.
find_iconsSearch Tyler Icons using semantic/fuzzy search with natural language queries. Finds the closest matching icons by name and keywords.
Framework Tools
setup_frameworkGet complete framework-specific setup instructions for Tyler Forge components including installation, configuration, and best practices for Angular, React, Vue, Svelte, or Lit.
Migration Tools
get_version_migration_guideGet comprehensive migration guides for upgrading between Tyler Forge versions, including breaking changes, API mappings, and upgrade instructions. Defaults to upgrading from v2 to v3.
General Tools
get_usage_guideGet comprehensive Tyler Forge guides including installation instructions, framework-specific integration, and general usage patterns

Resources

The following streamlined resources are available for reference via a progressive disclosure model:

Resource URIDescription
Component Resources
forge://componentsOverview of all Tyler Forge components with names and summaries
forge://component/{tagName}Complete documentation for specific Tyler Forge component
General Resources
forge://installationComplete installation guide for Tyler Forge web components
forge://usageComprehensive usage guide for Tyler Forge web components
Framework Resources
forge://framework/angularTyler Forge Angular integration guide
forge://framework/reactTyler Forge React integration guide
forge://framework/vueTyler Forge Vue integration guide
forge://framework/svelteTyler Forge Svelte integration guide
forge://framework/litTyler Forge Lit integration guide
Design Token Resources
forge://design-tokensComplete Tyler Forge design tokens including colors, spacing, typography, animation, borders, elevation, layering, and shapes
forge://design-tokens/typographyTyler Forge typography system including font families, type scales, weights, and usage guidelines
forge://design-tokens/colorTyler Forge color system including palettes, semantic colors, and usage guide