> ## Documentation Index
> Fetch the complete documentation index at: https://puzzlet-9ba7bb98.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Editor integration

> Set up syntax highlighting, schema validation, and MCP integration for TemplateDX files in VS Code, Cursor, Zed, and Claude Code.

TemplateDX uses `.mdx` files, so any MDX-aware editor gives you syntax highlighting for free. AgentMark layers on top of that with a JSON Schema for frontmatter (enables `model_name` autocomplete) and MCP configs that let your editor's AI query AgentMark docs + traces.

## Syntax highlighting

Install an MDX extension. Editors then recognize TemplateDX files as MDX.

| Editor                          | Extension                                                                                                                                                                               |
| ------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **VS Code / Cursor / Windsurf** | Search for "MDX" in the extensions panel (`unifiedjs.vscode-mdx`). Also available via [Open VSX](https://open-vsx.org/extension/unifiedjs/vscode-mdx) for VSCodium, Cursor, and Gitpod. |
| **JetBrains IDEs**              | [MDX plugin](https://plugins.jetbrains.com/plugin/14944-mdx)                                                                                                                            |
| **Zed**                         | Install the community MDX extension from Zed's extensions panel.                                                                                                                        |

## Frontmatter autocomplete via JSON Schema

Run the AgentMark CLI to generate a JSON Schema for your prompt frontmatter:

```bash theme={null}
agentmark generate-schema
```

This writes `.agentmark/prompt.schema.json`, classifying your configured models into `text_config`, `object_config`, `image_config`, and `speech_config` blocks with model-name enum autocomplete.

The command writes the schema file and prints its path; it doesn't configure your editor. To get frontmatter autocomplete, point your editor's YAML or MDX tooling at the generated file: map `.agentmark/prompt.schema.json` to the frontmatter of your `.prompt.mdx` files in whatever schema-association mechanism your editor or its extensions provide. Editors and extensions differ in how (and whether) they support frontmatter schema validation, so check the docs for yours.

## Props autocomplete for standalone `.mdx` files

If you're editing `.mdx` files outside an AgentMark project and want props autocomplete from your editor, add JSDoc `@typedef` comments:

```mdx hello.mdx theme={null}
{/**
  * @typedef Props
  * @property {string} name - Who to greet.
  */
}

# Hello {props.name}
```

The vscode-mdx extension (and similar editor plugins) read these comments to populate autocomplete. These hints are editor-only: TemplateDX doesn't evaluate TypeScript types, and the bundler strips comments at bundle time.

## Custom filter and tag autocomplete

To get autocomplete for custom filters and tags you've registered, create a `types/global.d.ts`:

```typescript theme={null}
import type { BaseMDXProvidedComponents, FilterFunction } from '@agentmark-ai/templatedx';

interface MyCustomTagProps {
  label: string;
  max?: number;
}

declare global {
  const myCustomFilter: FilterFunction<string, string>;

  interface MDXProvidedComponents extends BaseMDXProvidedComponents {
    MyCustomTag: React.FC<MyCustomTagProps>;
  }
}

export {};
```

Again, these types only help the editor. At runtime TemplateDX looks up your filter/tag by name in the registry.

<Note>
  For **production type safety** (compile-time checking of prompt props and outputs in your application code), use `agentmark generate-types` and pass the result to `createAgentMark<AgentmarkTypes>()`. See [Type safety](/configure/type-safety) for the full flow.
</Note>

## MCP: let your editor AI query AgentMark

When you scaffold an AgentMark project with `npm create agentmark@latest`, the scaffolder writes MCP server configs tailored to your editor. Every scaffolded project gets three servers:

* `agentmark-docs`: lets the editor's AI query AgentMark documentation
* `agentmark`: the AgentMark Cloud surface (defaults to `https://api.agentmark.co`), for querying Cloud traces
* `agentmark-local`: the same MCP server pointed at your local `agentmark dev` server, for querying local trace data

Per-editor setup:

| Editor          | Config file          | Shape                                                                  |
| --------------- | -------------------- | ---------------------------------------------------------------------- |
| **VS Code**     | `.vscode/mcp.json`   | `{ "servers": { ... } }`                                               |
| **Cursor**      | `.cursor/mcp.json`   | `{ "mcpServers": { ... } }`                                            |
| **Zed**         | `.zed/settings.json` | `{ "context_servers": { ... } }`                                       |
| **Claude Code** | `.mcp.json`          | `{ "mcpServers": { ... } }` (requires `"type": "http"` on URL servers) |
| **Codex**       | `.codex/config.toml` | `[mcp_servers.*]` TOML tables                                          |

See the scaffolder source for the exact per-editor config, or rerun `agentmark init --client <claude-code,codex,cursor,vscode,zed>` to regenerate.

## Related

<CardGroup cols={2}>
  <Card title="MCP servers" icon="book" href="/coding-agents/overview">
    Per-IDE setup for `agentmark-docs` and the gateway MCP
  </Card>

  <Card title="Type safety" icon="shield-check" href="/configure/type-safety">
    Compile-time props and output checking for production
  </Card>
</CardGroup>