Mantine with LLMs

Mantine provides three ways to give AI coding tools accurate knowledge of the library: llms.txt documentation, an MCP server and skills. All of them are updated with every Mantine release.

Documentation

• llms.txt – compact index that links to per-page .md files
• llms-full.txt – all documentation in a single file (~4.6MB)

The files follow the llms.txt standard and are generated from the documentation source. They include components with props and Styles API, hooks, form, dates, charts, schedule, theming, styles, guides and FAQ pages.

To use them, give the tool the https://mantine.dev/llms.txt URL and mention that you are using Mantine v9. In chat applications such as ChatGPT and Claude, paste the URL into the prompt. In Cursor, add it with the @Docs feature.

MCP server

@mantine/mcp-server package lets AI agents search and read Mantine documentation on their own. The server reads static data published on mantine.dev – 406 documents covering components, hooks, @mantine/form, styling, theming, framework and migration guides, and FAQ pages (changelogs are not indexed) – and exposes the following tools:

MCP server configuration

Most MCP clients accept a JSON configuration. Use this server definition:

{
  "mcpServers": {
    "mantine": {
      "command": "npx",
      "args": ["-y", "@mantine/mcp-server"]
    }
  }
}

The server can be configured with environment variables:

• MANTINE_MCP_DATA_URL – data source, https://mantine.dev/mcp by default. Change it to use alpha docs or local static files.
• MANTINE_MCP_TIMEOUT_MS – request timeout in milliseconds, 10000 by default

{
  "mcpServers": {
    "mantine": {
      "command": "npx",
      "args": ["-y", "@mantine/mcp-server"],
      "env": {
        "MANTINE_MCP_DATA_URL": "https://alpha.mantine.dev/mcp"
      }
    }
  }
}

Claude Code

claude mcp add mantine -- npx -y @mantine/mcp-server

Codex

codex mcp add mantine -- npx -y @mantine/mcp-server

Cursor

Add the configuration above to .cursor/mcp.json in your project, or to ~/.cursor/mcp.json to use the server in all projects.

GitHub Copilot in VS Code

Add the server to .vscode/mcp.json in your project. Note that VS Code uses the servers key instead of mcpServers:

{
  "servers": {
    "mantine": {
      "command": "npx",
      "args": ["-y", "@mantine/mcp-server"]
    }
  }
}

Claude Desktop

Open Settings → Developer → Edit Config and add the configuration above to claude_desktop_config.json, then restart the application.

Other MCP clients

If the client supports custom MCP servers, use npx as the command and ["-y", "@mantine/mcp-server"] as the arguments.

Skills

Mantine provides skills for AI coding agents in the mantinedev/skills repository:

• mantine-combobox – build custom select, autocomplete and multiselect components with Combobox
• mantine-form – build forms with @mantine/form: validation, nested fields and form context
• mantine-custom-components – create custom components with Mantine factory APIs and Styles API

Install skills

npx skills add https://github.com/mantinedev/skills --skill mantine-combobox
npx skills add https://github.com/mantinedev/skills --skill mantine-form
npx skills add https://github.com/mantinedev/skills --skill mantine-custom-components

Use skills

Agents pick up installed skills on their own when the task matches. To be explicit, name the skill in your prompt, for example "Use mantine-form skill and build a profile form with validation and nested fields".

Example prompts

• "Using Mantine v9, how do I create a dark mode toggle?"
• "Show me how to use the AppShell component with a collapsible navbar"
• "Create a form with validation using Mantine's form hooks"
• "Find Button props and give me a usage example"
• "Search Mantine docs for color scheme and dark mode"

Contributing

If you find any issues with the LLM documentation or have suggestions for improvement, please open an issue on our GitHub repository.