[data-reveal]{opacity:1!important;transform:none!important}
In the dms-ai assistant
AI & coding agents

In the dms-ai assistant

The dms-ai module runs a coding agent next to your dashboard that loads the skills of every loaded module and previews DMS blocks in the chat.

@antelopejs/dms-ai adds an owner-only AI workspace to the dashboard: a chat panel docked next to the page, and a coding agent running in a local sidecar that can inspect the loaded modules, edit the project, and show its work as you go. It is a development tool: it refuses to run with NODE_ENV=production.

Skills load themselves

The assistant needs no plugin. When it starts, it collects the skills declared in antelopeJs.skills by every module the project loads, by their dependencies, and by the project's own dependencies and devDependencies (the framework skills of @antelopejs/core among them), and hands them to the agent, each named <module>:<skill> — dms:dms-pages, dms:dms-best-practices. Install a module, and its skill is there on the next start.

The Skills page of the Assistant module lists every loaded skill as a card, with its source, and warns when two skills share a name. Settings → Local skills also loads your machine's ~/.claude/skills, if you want your personal skills in the dashboard too.

See the Skills walkthrough for the loaded cards, search and instruction drawer.

Block previews in the chat

When a choice is visual — how a block will look, a DMS block versus a custom one — the agent shows it before asking. It calls the PreviewBlocks tool with a tree of DMS blocks, optionally with your mockup as a reference and several variants:

PreviewBlocks({
  title: "KPI row",
  description: "Your mockup's three figures as DMS KPI cards.",
  tree: {
    type: "Grid",
    children: [{
      type: "GridRow",
      children: [
        { type: "KpiCard", options: { title: "Revenue", staticValue: 48200, valueFormat: "currency", currencyCode: "EUR" } },
        { type: "KpiCard", options: { title: "Orders", staticValue: 1284 } },
      ],
    }],
  },
  reference: { attachmentId: "mockup.png", caption: "Your design" },
});

The conversation shows an attachment card — an icon, the title and a thumbnail. Clicking it opens a modal that renders the real blocks with your dashboard's theme, side by side with the reference image, with a tab per variant. A variant can also hold a sketch — static HTML and CSS of the custom block the agent proposes, labelled as not a DMS block — so you compare both before any code is written. The agent then asks its question with AskUser, and you answer with a button.

The modal renders the blocks with the same DmsBlockPreview component as the block preview page. On a DMS too old to have it, the attachment shows the tree as JSON.

The illustrated chat walkthrough shows the attachment and both preview variants in the running module. It uses a clearly labelled demonstration conversation, not a model-generated response.

Next steps

Design fidelity

How the agent maps your mockup, component by component.

dms-ai module

Install and configure the assistant.