Creative Component SDK · Developers Hub

The Creative Component SDK is an advanced current authoring guide for building MyronCMS-compatible creative components. It describes how to re-implement a visual idea as native MyronCMS artifacts: component definition JSON, PHP-rendered markup, token-based CSS, and optional JavaScript behavior registered with the creative runtime.

The SDK is also exposed to MCP clients as:

mcp://creative-component-sdk

That MCP resource is a reading and authoring reference. It does not let an installed MCP client write PHP files, edit component definitions, or register new code inside a running install.

Human Path

A human creative author reads the SDK, then edits local source files in the repository. The current four-artifact model is:

Artifact	Local target	Purpose
Component definition	`app/data/runtime-definitions/components/components-atoms-v0.2.0.json`	Declare id, label, slots, token dependencies, editable tokens, and creative layer support.
PHP render method	`app/modules/content/public/DefinitionTemplateRenderer.php` or the relevant content public render file	Render readable content from `$section['content']` with escaped output.
CSS additions	`app/assets/runtime/css/components.css`	Style the component with `--myron-*` tokens and BEM-style selectors.
Optional JavaScript	Creative runtime behavior registration	Add component-specific behavior through `window.mcRuntime.registerBehavior()`.

The PHP render path is the content authority. Creative runtime effects are additive attributes and injected decorative layers.

AI Path

An installed MCP client can call resources/list and then resources/read for mcp://creative-component-sdk. The resource body includes the static SDK guide plus live install context composed by app/system/mcp/Server.php, including available motion profiles, scene backgrounds, declared external dependencies, and performance budget.

An AI coding agent working in the repository can use that resource and this page to author the local artifacts. That is local authoring, not an MCP code-generation side effect.

The safe sequence is:

Read mcp://creative-component-sdk.
Read the existing local component and renderer files.
Edit only the contracted files for the component.
Verify static fallback, token use, reduced-motion behavior, and source-grounded catalog assumptions.

Scopes

Reading mcp://creative-component-sdk requires no MyronCMS action scope in the current MCP resource list.

Local file authoring does not use runtime scopes. Any later runtime action that applies design state or imports JSONM must use that action's own scope.

Artifacts

Source and runtime artifacts involved:

docs/creative-component-sdk.md
app/system/mcp/Server.php
app/modules/design/catalog/MyronCreativeLibraryCatalog.php
app/modules/content/public/DefinitionTemplateRenderer.php
app/assets/runtime/js/creative-runtime.js
app/modules/content/public/PublishedPageHtmlAssembler.php
app/data/runtime-definitions/components/components-atoms-v0.2.0.json
app/assets/runtime/css/components.css

Runtime attributes emitted by the renderer include:

Attribute	Meaning
`data-myron-component-id`	Component id used by the editor and behavior dispatch.
`data-mc-motion`	Creative motion profile id.
`data-mc-scene`	Scene background id.
`data-mc-hero`	Hero behavior id when present.
`data-mc-params`	JSON-encoded creative params.

Safety Boundary

Readable content must not live only in canvas, injected scene markup, animation frames, or external library state. If JavaScript is disabled, blocked, or reduced by user preference, the section must remain readable and usable.

Do not import runtime frameworks or CSS frameworks into component artifacts. The current contract is PHP rendering, token-based CSS, and vanilla JavaScript where needed.

Do not treat the MCP resource as permission to mutate a running install. It is a documentation resource. Code changes still happen through local files under an approved MCD contract.

Verification

For MCP resource availability, verify:

MCP resources/list includes mcp://creative-component-sdk
MCP resources/read returns text/markdown for mcp://creative-component-sdk

For local component authoring, verify:

the component definition declares all used tokenDependencies,
editable token declarations match the tokens operators may override,
PHP renders content from $section['content'],
all interpolated content is escaped,
CSS uses --myron-* tokens where tokens exist,
custom behavior is registered through window.mcRuntime.registerBehavior(),
the section remains readable with JavaScript disabled,
reduced motion does not hide content or require animation to reveal it.

Failure Modes

Failure	Likely cause	Safe response
`mcp://creative-component-sdk` is missing from `resources/list`	MCP server resource registration changed or the caller is not using the expected MCP surface.	Check `app/system/mcp/Server.php` before documenting the resource as current.
Generated component has JS-only text	Creative layer was treated as content authority.	Move readable content into the PHP render method.
CSS uses raw design values instead of tokens	Component bypasses the design-token substrate.	Replace values with existing `--myron-*` tokens or document a separate token evaluation need.
Behavior uses standalone global listeners or loops	Code bypasses the creative runtime registration model.	Register behavior with `window.mcRuntime.registerBehavior()` and reuse runtime patterns.
External dependency is assumed to exist	Dependency was not declared through the current creative dependency setting path.	Prefer vanilla CSS/SVG/Canvas or document the dependency declaration requirement.