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. TemplateDX files are recognized 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
ZedBuilt-in MDX support.

​
Frontmatter autocomplete via JSON Schema

Run the AgentMark CLI to generate a JSON Schema for your prompt frontmatter: 
npx 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. Most editors (VS Code, Cursor, JetBrains) will pick up the schema automatically when it’s referenced from your .prompt.mdx frontmatter.

​
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 does not evaluate TypeScript types, and comments are stripped 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 your filter/tag is looked up by name in the registry.
For production type safety (compile-time checking of prompt props and outputs in your application code), use npx agentmark generate-types and pass the result to createAgentMarkClient<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:
  • agentmark-docs: lets the editor’s AI query AgentMark documentation
  • agentmark-local: lets the editor’s AI query your 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)
See the scaffolder source for the exact per-editor config, or rerun npm create agentmark@latest -- --client <vscode|cursor|zed|claude-code> to regenerate.

​
Related

MCP servers

Per-IDE setup for agentmark-docs and the trace server

Type safety

Compile-time props and output checking for production