HomeGetting StartedColor SystemTypographySpacingIconographyLayoutInstallationUsageAngularBlazorReactSvelteVueThemingTypographyCustomizationCSS-Only ComponentsFormsIconsIllustrationsAccessibilityGlobal ConfigurationTailwind CSSSass LibraryForge MCP ServerDropdown OptionsFocus Indicator ClippingAll componentsButtonButton AreaChipFloating Action ButtonIcon ButtonSplit ButtonAutocompleteButton ToggleCalendarCheckboxChip FieldColor PickerDate PickerDate Range PickerFile PickerLabelRadioSelectSliderSwitchText FieldTime PickerApp BarApp LauncherDrawerMenuPaginatorSkip LinkStepperTabsView SwitcherAccordionApp LayoutCardDividerExpansion PanelScaffoldSplit ViewStackStructured CardToolbarBadgeBannerBusy IndicatorCircular ProgressDialogInline MessageLinear ProgressPage StateSkeletonToastTooltipAvatarIconKeyLabel ValueListMeterSecretTableTimelineTimestampTreeKeyboard ShortcutPopoverIntroductionColorTypographySpacingShapeBorderElevationLayeringAnimationUsageIcon LibraryBlocksRoadmapChangelogBlog

Forge MCP Server

Give AI clients direct access to Forge component documentation, design tokens, and code generation.

Important

Always validate AI-generated code and information for accuracy. LLMs can make assumptions and mistakes.

The Tyler Forge™ MCP Server provides AI clients with direct access to Forge component documentation, design tokens, and code generation capabilities. It helps developers discover components, generate framework-specific examples, and follow best practices while building with Forge.

Key Principle: While the MCP server significantly enhances AI assistance, always verify generated code, validate component usage, and test implementations thoroughly.

Quick Setup

Get started with the Tyler Forge™ MCP server in your AI client:

The Tyler Forge™ MCP server runs locally as a stdio server, which requires Node.js >=20.10 and npm to be installed on your system. A hosted remote server is also available in preview for clients that connect by URL.

For Claude Code, installing the Forge plugin is the recommended approach instead of adding the MCP server on its own. The plugin bundles the MCP server together with a /forge-design skill and enforcement hooks, so Forge UI is grounded in real component/block data end-to-end rather than relying on the model’s memory.

/plugin marketplace add tyler-technologies-oss/forge
/plugin install forge@tyler-forge

Verify it installed correctly:

/skills
You may need to restart Claude Code or run /reload-skills if the skill doesn’t appear.

Keep the plugin up to date

The plugin always runs the latest published MCP server, but the forge-design skill and hooks only update when a new plugin version is released. Claude Code doesn’t auto-update third-party marketplaces by default, so turn it on once:

  1. Run /plugin.
  2. Open the Marketplaces tab and select tyler-forge.
  3. Choose Enable auto-update.

With auto-update on, Claude Code checks for a new plugin version shortly after each session starts. When one is installed, run /reload-plugins to use it right away, or it loads the next time you start Claude Code.

To update manually instead:

claude plugin marketplace update tyler-forge
claude plugin update forge@tyler-forge
If Enable auto-update is missing

If the tyler-forge marketplace shows Update marketplace and Remove marketplace but no Enable auto-update, one of these is usually the cause:

  • Updates are turned off in your environment. When DISABLE_AUTOUPDATER, DISABLE_UPDATES, or CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFIC is set, Claude Code turns off plugin auto-update and hides the option. To turn it back on, set FORCE_AUTOUPDATE_PLUGINS=1, for example in the env block of ~/.claude/settings.json:

    {
      "env": {
        "FORCE_AUTOUPDATE_PLUGINS": "1"
      }
    }
  • Your organization manages Claude Code. Run /status. If Enterprise managed settings is listed under setting sources, your administrator may have turned updates off, and their settings take precedence.

  • Your Claude Code is out of date. Run claude update, then check again.

Until auto-update is available, choose Update marketplace in the same menu, or run the manual update commands above, to get the latest version.

Moving from the forge-mcp marketplace

The plugin used to be installed from the tyler-technologies-oss/forge-mcp repository, which is now archived. Run claude plugin marketplace list. If tyler-forge shows tyler-technologies-oss/forge-mcp as its source, switch to the current marketplace:

/plugin marketplace remove tyler-forge
/plugin marketplace add tyler-technologies-oss/forge
/plugin install forge@tyler-forge

Removing the marketplace also uninstalls the plugin, so the last command reinstalls it.

Why the plugin over the MCP server alone

The MCP server (@tylertech/forge-mcp) is fully standalone and works with any MCP client — it exposes tools like get_forge_blocks, generate_ui_plan, validate_ui_plan, and validate_component_api with no dependency on the skill or hooks. It’s the grounding data source for Forge components, blocks, and design tokens.

The Claude Code plugin adds two more pieces on top of that server:

  • The forge-design skill — a workflow/ruleset (not a standalone knowledge base) that tells the agent when to call get_forge_blocks, generate_ui_plan, validate_ui_plan, and validate_component_api, and enforces rules like “start from a block” and “never write Forge markup from memory.”
  • Enforcement hooks — a PreToolUse hook blocks any Edit/Write containing <forge-*> markup unless a get_forge_blocks call (and, for larger compositions, a passing validate_ui_plan call) already happened earlier in the same turn. A Stop hook blocks the turn from ending if any Forge tag was written but never checked with validate_component_api.

Because the hooks scan the transcript specifically for MCP tool-call names, they only work when the MCP server is present — installing the skill without the MCP server would make it actively harmful (it would deadlock every Forge markup write, since the required tool calls could never appear). The plugin installs all three pieces together so this can’t happen, which is why it’s the recommended path for Claude Code specifically.

If you’re using an AI client other than Claude Code, install the MCP server directly instead — see below.

Claude Code (MCP Server Only)

Use this if you want just the grounding data source without the skill/hook workflow (for example, wiring the server into a custom agent or client):

claude mcp add -t stdio -s [scope] forge -- npx -y @tylertech/forge-mcp@latest
The [scope] must be user, project or local.

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

Manual Configuration

Create .vscode/mcp.json:

{
  "servers": {
    "forge": {
      "command": "npx",
      "args": ["-y", "@tylertech/forge-mcp@latest"],
      "type": "stdio"
    }
  }
}
Note: You may need to manually start the MCP server after updating your configuration.

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"]
    }
  }
}

Remote Server (Experimental)

Experimental

The remote server is in preview. Its URL is temporary and will change, so expect to update your configuration. For day-to-day work, prefer the local stdio setup above.

A hosted instance of the Forge MCP server is available over Streamable HTTP, for clients that connect by URL instead of running npx locally, or for machines without Node.js:

https://forge-mcp-6ea25f585a82.herokuapp.com/mcp

No sign-in is required.

Like the local server, the remote server works on its own in any MCP client and gives the AI direct access to Forge components, blocks, and design tokens. In Claude Code, the Forge plugin is still recommended, because it also brings in the forge-design skill and hooks that guide the AI to use those tools correctly. Adding the server by itself gives you the tools without that workflow.

The remote server can’t read your project’s node_modules, so it can’t detect which version of @tylertech/forge you have installed. It always answers from the latest published version. If your project is on an older version, use the local stdio server so component APIs match what you have installed.

Claude Code

claude mcp add --transport http -s [scope] forge https://forge-mcp-6ea25f585a82.herokuapp.com/mcp
The [scope] must be user, project or local.

Claude.ai and Claude Desktop

  1. Go to Customize > Connectors.
  2. Click Add, then Add custom connector.
  3. Name it Forge, paste the URL above, and click Continue.
  4. Under Authentication, choose No sign in, then click Add.

On Team and Enterprise plans, an organization Owner adds the connector under Organization settings > Connectors, and members then connect to it from Customize > Connectors.

VS Code

Choose HTTP (HTTP or Server-Sent Events) in MCP: Add Server... and enter the URL, or add it to .vscode/mcp.json:

{
  "servers": {
    "forge": {
      "type": "http",
      "url": "https://forge-mcp-6ea25f585a82.herokuapp.com/mcp"
    }
  }
}

Other clients

Any client that supports Streamable HTTP can use the same URL. Most accept a configuration like this:

{
  "mcpServers": {
    "forge": {
      "type": "http",
      "url": "https://forge-mcp-6ea25f585a82.herokuapp.com/mcp"
    }
  }
}

Using the Forge MCP Server

Once the Forge MCP server is set up in your AI client, you can start interacting with it using natural language prompts.

If you installed the Claude Code plugin, the forge-design skill auto-activates whenever you mention Forge components or ask to build UI with them — you don’t need to manually select the forge_mode prompt below.

Prompts

Prompts are selected by the user and are sent as a message. They can be used to provide common instructions/rules to guide LLMs on how to properly use the MCP server.

You can activate prompts in your AI client (if supported) by specifying the prompt name, typically via a slash command, or via prompt selection UI.

  • forge_mode: Sets baseline rules when running Forge-specific task.

    This prompt accepts a [task] parameter where you can describe your specific request/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.

Learn more about MCP prompts here.

Essential Tools

The MCP server provides these key capabilities:

  • Blocks: get_forge_blocks — pre-built UI patterns showing components working together; call this before writing any Forge markup
  • Component Discovery: list_components, find_components, get_component_docs, find_icons
  • UI Planning: generate_ui_plan, validate_ui_plan — plan and validate larger compositions before generating markup
  • Design System Access: get_design_tokens, setup_typography, setup_icons
  • Framework Integration: setup_framework for Angular, React, Vue, etc.
  • Migration Guidance: get_version_migration_guide
  • Validation: validate_component_api
  • Usage Guidance: get_usage_guide

Best Practices

  1. Be Specific: Ask for specific components or use cases rather than general questions
  2. Validate Output: Always review and test AI-generated code before implementation
  3. Provide Context: Include your framework, version constraints, and specific requirements
  4. Break Down Complex Queries: Split large requests into smaller, focused questions
  5. Cross-Reference Documentation: Use the MCP server alongside official Forge documentation
  6. Manage Context: For lengthy conversations, periodically compact or clear context to maintain relevance.

Example Usage

To get started with the Forge MCP server, try these example prompts to explore its capabilities:

"What forge components should I use to create a navigation sidebar?"

"Find components for creating a responsive form in React."

"Help me add a forge data table with sorting, filtering, and pagination to this page."

"Help me upgrade this page from Forge v2 to v3."

Important: The above prompts are just basic examples to get started. Tailor your queries to your needs and context, and be specific. If you know what you need and can provide details to guide the LLM, do so. The more information you provide, the better the results.

Contributing

Found issues or have suggestions? The Tyler Forge™ MCP Server is open source and welcomes contributions:

  • Repository: tyler-technologies-oss/forge (packages/forge-mcp)
  • Issues: Report bugs and request features
  • Pull Requests: Submit code changes and enhancements
  • Discussions: Share best practices, usage patterns, and improvements

Documentation

The MCP server will only be as good as its documentation. If you find gaps or areas for improvement, please contribute to the docs via the MCP markdown templates, or directly in the Forge repository where the API docs are generated from.

Resources

Loading Forge chat…