MCP Server

The mdx-ui MCP server plugs directly into Claude Code (or any MCP-compatible AI client). Once connected, Claude can browse your component registry, look up math symbols, convert LaTeX expressions, and generate rich MDX content that renders correctly the first time — no post-editing.

What the MCP server does#

Without MCP, you paste a system prompt into every conversation and hope Claude remembers the rules. With MCP, Claude reads live data from your registry on every request:

• Knows every component by name, with examples and when-to-use guidance
• Calls the LaTeX transpiler before writing any formula — no guessing primitives
• Validates MDX it generates against the output standard before giving it to you
• Searches 200+ math symbols by concept, not by memorised component name

Setup#

1. Add the MCP server to your project#

Create .claude/settings.json in your project root:

{
  "mcpServers": {
    "mdx-ui": {
      "command": "pnpm",
      "args": ["dlx", "@ravikumarsurya/mdx-ui@latest", "mcp"]
    }
  }
}

2. Open the project in VS Code with Claude Code#

The server starts automatically when you open a chat in Claude Code. You should see mdx-ui listed under active MCP servers in the sidebar.

3. Verify it is connected#

In the Claude Code chat, type:

What components does mdx-ui have?

Claude will call list_components and return the full registry — if it does, the server is live.

Resources#

Resources are loaded once at session start and stay in Claude's context.

Claude reads these automatically. You do not need to paste system prompts.

Tools#

Claude calls these during content generation. You can also ask Claude to call any of them directly.

Component tools#

Math tools#

Meta#

Prompts#

Two built-in prompts scaffold common content types:

Invoke them from the Claude Code slash command or by asking Claude directly.

How Claude generates math#

The primitive system means there is no LaTeX engine at runtime. Every formula is a tree of React components. Claude uses three tools to get this right:

search_symbols("integral fourier transform")

convert_latex("\\int_{-\\infty}^{\\infty} f(x)\\,e^{-2\\pi i x t}\\,dx")

<Integral
  low={
    <>
      <InfSym />;
    </>
  }
  high={<InfSym />}
>
  f(x)
  <Thin />
  <Pow
    exp={
      <>
        <Neg />2<Pi />
        ixt
      </>
    }
  >
    e
  </Pow>
  <Thin />
  dx
</Integral>

parse_solution("8x − 3 = 3x + 2 ⇒ 5x = 5 (collect x terms) ⇒ x = 1")

<Solution>
  <SolutionStep reason="collect x terms">
    <Sub sub="">
      <Neg />3
    </Sub>
    8x <Neg /> 3 = 3x + 2
  </SolutionStep>
  <SolutionAnswer>x = 1</SolutionAnswer>
</Solution>

Example: asking Claude to write a lesson#

Once MCP is connected, you can ask in plain English:

"Write a lesson on the chain rule with two worked examples."

Claude will:

1. Read registry://output-standard for structure rules
2. Call search_symbols("chain rule derivative") for the right components
3. Call convert_latex for each formula
4. Call parse_solution for each worked example
5. Return a complete .mdx file ready to drop into your content directory

No system prompt. No post-editing. No LaTeX strings in the output.

Validation#

After generating content, ask Claude to validate it:

"Validate the MDX you just wrote."

Claude calls validate_mdx which checks for:

• Unknown component names not in the registry
• Dollar-sign math ($...$) that should be primitives
• KaTeX component usage (<InlineMath>, <BlockMath>)
• Malformed JSX structure

Any violation is returned with the line and a fix suggestion.

Supported clients#