Install
openclaw skills install bcmsBCMS headless CMS for coding agents. Build with the @thebcms/client SDK (templates, entries, groups, widgets, media, functions, webhooks, API keys, permissions) and operate content through the BCMS Model Context Protocol (MCP) server—scoped keys, Streamable HTTP, entry/media tools. Use for content modeling, framework integrations (Next.js, Nuxt, Astro, Svelte, Gatsby, Vite), and agent-driven content operations.
openclaw skills install bcmsCanonical copy: edit this file at ai/skills/bcms/SKILL.md. The Claude Code and Cursor plugins package the same file via symlinks under ai/providers/*/plugin/skills/bcms/ (see ai/README.md and ai/AGENTS.md). On Windows, if symlinks are unavailable, copy this file into those paths when publishing.
This skill gives the AI coding agent concise, BCMS‑specific guidance and defers longer explanations to the files in references/.
The agent should keep this file under roughly 500 lines and load deeper guides only when needed.
Setup guide: thebcms.com/agents — MCP connection, skill install, and the content CLI.
It covers two modes: building with the @thebcms/client SDK (application code, CI, scripts) and operating content through BCMS MCP tools (when the agent has them configured). Use the SDK for app code and builds; use MCP tools for content operations when available—see BCMS MCP (agents and IDEs) and references/mcp.md.
Key topics:
references/bcms-api-basics.md)references/templates.md)references/entries.md)references/groups.md)references/widgets.md)references/media.md)references/properties.md)references/functions-webhooks.md)references/permissions.md)references/frameworks.md)references/mcp.md)@thebcms/* packages unless the user explicitly targets an older version. Generated types usually live under bcms/types/ts after bcms --pull types (see framework guides); some setups import from @thebcms/types or an alias—match the project you are editing.@thebcms/cli starters before hand‑rolling integration; see references/frameworks.md.BCMSContentManager and BCMSImage (or their framework equivalents) to render rich text, widgets and media instead of building your own renderers.keyId.secret.instanceId) in environment variables (e.g. BCMS_API_KEY, plus a public key var where the framework docs require it), use separate keys per environment (dev/stage/prod), and prefer scoped keys, especially for media delivery; see references/bcms-api-basics.md and references/permissions.md.meta/content per locale; see references/entries.md and references/properties.md.references/templates.md and references/groups.md.@thebcms/client for application code, builds, and anything outside MCP (see references/mcp.md).references/bcms-api-basics.md and references/permissions.md.references/mcp.md and references/permissions.md.group.whereIsItUsed, widget.whereIsItUsed, template.whereIsItUsed) and plan a migration path; see references/templates.md, references/groups.md, references/widgets.md, and references/media.md.meta or content when a property, group or widget fits.
Prefer explicit properties (string, rich text, enum, pointers, media) and reusable groups/widgets for structure; see references/properties.md, references/groups.md, and references/widgets.md.BCMSContentManager is available.
Use the official components (@thebcms/components-*) with BCMSContentManager and BCMSImage, and only drop down to custom parsing when you have a clear requirement; see references/entries.md and references/frameworks.md.references/permissions.md.references/functions-webhooks.md.Marketing, blog, or documentation sites
Use templates like page, blog, doc with structured properties, groups for SEO/author blocks, widgets for reusable sections, and the media library for images; render with BCMSContentManager and BCMSImage.
See references/templates.md, references/entries.md, references/groups.md, references/widgets.md, and references/media.md.
Multi‑locale content
Model meta and content per locale, use BCMS locales, and ensure frontends handle missing translations gracefully using generated types (e.g. from bcms/types/ts or your project’s type package).
See references/entries.md and references/properties.md.
Asset‑heavy or image‑driven experiences
Rely on the media library, folder structure, and auto‑generated sizes; use a dedicated media API key for public delivery and BCMSImage (or equivalent) to serve optimised variants.
See references/media.md and references/bcms-api-basics.md.
Framework‑based frontends (Next.js, Nuxt, Astro, Gatsby, Svelte, Vite)
Prefer the official BCMS starters; otherwise, follow the framework‑specific guides, using the standard Client constructor, generated types, and the appropriate @thebcms/components-* package.
See references/frameworks.md.
AI assistants and IDE workflows (Cursor, Claude Code, etc.)
Enable MCP on a dedicated API key, configure the MCP URL with least‑privilege template and media scopes, and use the exposed tools for content operations. Do not embed those keys in shipped apps.
See references/mcp.md and BCMS MCP documentation.
BCMS hosts an MCP server so assistants can work with BCMS content and schema using a key that has MCP enabled. Official overview: thebcms.com/docs/mcp.
https://app.thebcms.com/api/v3/mcp?mcpKey=<keyId.secret.instanceId> (the query param is mcpKey; adjust host if your org uses a custom app URL).403.initialize, send mcp-session-id on follow‑up requests.paragraph, heading, bulletList/orderedList, listItem, text, codeBlock, hardBreak, horizontalRule, widget, media — there is no image node); use get-entry-pointer-link and get-media-pointer-link for internal BCMS links in link marks.Full tool names, resources, troubleshooting, and MCP vs SDK guidance: references/mcp.md.
Preferred for app starters (matches Next.js / Nuxt docs): one three‑part API key string in env (keyId.secret.instanceId) and a single‑argument client:
import { Client } from '@thebcms/client';
// Private: reads BCMS_API_KEY from the environment by default
export const bcmsPrivate = new Client({ injectSvg: true });
// Public / browser-safe key (example for Next.js)
export const bcmsPublic = new Client({
apiKey: process.env.NEXT_PUBLIC_BCMS_API_KEY,
injectSvg: true,
});
Scripts and servers: set BCMS_API_KEY to the same three‑part string and use new Client({ injectSvg: true, useMemCache: true, enableSocket: false }) (see ai/scripts/init-client.ts). Details match thebcms.com/docs integration guides.
For env variable patterns and security, see references/bcms-api-basics.md.
blog, page, author).Common operations:
await bcms.template.getAll()See references/templates.md for naming conventions, creation guidelines and code examples.
meta fields (title, slug, SEO, etc.)content fields, often localized by language codeExample: get all entries for a blog template:
const blogPosts = await bcms.entry.getAll('blog');
Agents should be able to:
See references/entries.md for full CRUD examples and multilingual details.
Typical operations:
bcms.group.getAll()bcms.group.whereIsItUsed(groupId)bcms.widget.getAll()bcms.widget.whereIsItUsed(widgetId)bcms.media.getAll(), bcms.media.getById(id)Widgets cannot currently be deleted via the SDK and must be removed via the BCMS dashboard.
See references/groups.md, references/widgets.md and references/media.md for concrete examples and media best‑practices.
BCMS supports various property types used in templates, groups and widgets, including:
Agents should choose appropriate field types based on content modelling goals and reusability.
See references/properties.md, references/groups.md, references/widgets.md and references/templates.md for details.
get/create/update/delete scopesAPI keys:
See references/permissions.md for a deeper explanation and configuration examples.
Agents should:
X-Bcms-Webhook-Signature headerSee references/functions-webhooks.md for full examples and security notes.
ai/scripts/)Human developers (and agents with repo access) can run the TypeScript examples under ai/scripts/:
init-client.ts — construct Client with BCMS_API_KEY (three‑part key).call-function.ts — call a BCMS function by ID with a JSON body (BCMS_API_KEY, BCMS_BASE_URL, BCMS_FUNCTION_ID).These are not MCP; they illustrate SDK usage. See each file’s header for how to run them (e.g. npx tsx with env set).
Repo-level notes for automation: ai/AGENTS.md. Change history for this skill pack: ai/CHANGELOG.md.
bcms/types/ts after CLI pull, or your framework’s documented import path) where available.For in‑depth guidance, always cross‑reference the official BCMS documentation from the references/ files.