Skip to main content
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.
EditorExtension
VS Code / Cursor / WindsurfSearch for “MDX” in the extensions panel (unifiedjs.vscode-mdx). Also available via Open VSX for VSCodium, Cursor, and Gitpod.
JetBrains IDEsMDX plugin
ZedInstall 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: 
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:
hello.mdx
{/**
  * @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: 
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.
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 for the full flow.

​
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:
EditorConfig fileShape
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

MCP servers

Per-IDE setup for agentmark-docs and the gateway MCP

Type safety

Compile-time props and output checking for production