MCP/skill or something else to enable AI in the editor

[j-ro]

I'm not entirely sure how this would work structurally, how the communication between the javascript editor, the backend hosting the editor, and the LLM provider would work. However, I do see user need here. I'm thinking less around writing the actual email copy (though perhaps that's interesting to some) and more around designing nice looking layouts. So you'd be able to ask in natural language for a certain kind of layout ("give me an email announcing a sale of one product, targeted towards outdoors-y types, using kelly green and dirt brown as the main colors") and AI could make a layout for you, which you could then tweak in the editor. The idea being a user of the embed could prompt, the backend would communicate with the LLM and return something for the editor to display, etc... But it would require context for the LLM so they know how to write the internal JSON representation of the editor. I guess you could just ask the LLM to make HTML and use the HTML importer feature, but that seems not optimal?

[orkhanahmadov]

Another great idea, @j-ro! 👍

This is genuinely useful feature that I'm fully onboard. But it has two separable problems with very different answers:

1. Teaching the model Templatical format: this is about giving the AI model enough knowledge of Templatical JSON to emit something valid. This can be done with no backend, AI agent just needs to be trained on Templatical's data structure.
2. Running the inference: AI agent connection and running agentic email building. This requires server-side authentication, AI connection, MCP auth server, etc.

Templatical's hosted Cloud version (which is in development, soon to go live 🤞) will offer both:

• In the editor: describe the email in the AI chat — "a sale on one product, outdoorsy audience, kelly green + dirt brown" — and it generates the full layout as native, editable blocks. Then you refine it like anything else. That's exactly your use case.
• Over MCP: Templatical runs a hosted MCP server. Generate an MCP key, point Claude Desktop / Cursor / any MCP client at it, and you get a guided design-template prompt, a generate-template tool, and a full set of block-editing tools — backed by a block-schema resource so the model always knows the JSON contract. Open the same template in browser, as agent creates your template you see each update live.

Can be done without Templatical Cloud? truly agentic approach will always require some kind of backend, some kind of infrastructure, MCP server wiht secret somewhere, so "fully static, zero server" not really an option (you'd expose a provider key in the browser). My idea with Templatical Cloud is to manage all of this AI layer, MCP server, etc so it is super simple to setup and run things "agenticly".

That being said, I don't want the open editor locked to Cloud for this, whatever can be offered as open-source/BYO and doesn't require infrastructure, I'm ready to offer it. So here's what I think can be done:

• A machine-readable schema of the block model + a drop-in system prompt, published from @templatical/types. That's the piece that lets any model emit valid templates. This would solve the 1st problem I mentioned above.
• A single generation hook (same shape as the existing media hook) so you can point at your own provider/proxy; the editor validates the result and loads it.

With those, you wire your own key/backend and get the same flow, no Cloud required.

One note on the HTML-importer idea: reasonable hack, Tempatical offers first-party open-source @templatical/import-html package. But thing with HTML-email is that it is table-based and lossy. Anything it can't map cleanly needs to fall back to html blocks, which aren't structurally editable. That kills the "refine it afterwards" payoff. Generating Templatical JSON directly gives you native blocks you can actually edit.

Interested to hear what you think. Do you like this approach or maybe can think of better one?
Also, would you be interested to try Templatical Cloud once it goes live? If you want more info about what it will offer on top of OSS version check https://cloud.templatical.com

[j-ro]

Thanks for the thoughts here!

I guess I'd maybe like to see the MCP server shipped to the open source repo (or as a related package), that way people can run their own MCP servers, tweak them, and connect them up to their own inference backend if they want.

Or, potentially, a lighter weight version of this is a Claude skill, backed by some tools an agent can use to generate and validate valid editor JSON that work javascript only, runnable by agents in their agentic context, whatever that is, if they have access to the git repo and/or packages. Which means no server to host, skills being ways to call tooling and markdown as I understand them.

I think the key for me as to why these AI tools should be part of the OSS side is that an implementer naturally will want to combine this MCP or skill with other tools that are more implementation specific, such as something that tells the agent the builder's brand guidelines (logos, assets, colors, fonts, etc...), custom preferences and system prompts, and the like.

Cloud looks pretty interesting! Generally we're attracted to this project due to the OSS nature of it -- we're on proprietary tools right now and are feeling the lack of flexibility and lock in. My sense is I'd almost rather pay you for support of the OSS project or something like that than pay for a Cloud version, but I'm not ruling it out! Multiplayer is particularly compelling.

[orkhanahmadov]

@j-ro Really appreciate this, I like your approach and fair challenge. So here's what can be done cleanly:

An Agent Skill. A proper skill (SKILL.md + scripts) that teaches any agent, Claude Code, Codex, Cursor, etc: the block schema plus a solid baseline system prompt, with a validation step built on @templatical/types (the type guards) and @templatical/quality (lintTemplate for structure/accessibility/link checks). The nice part for your "no server hosting" ask: the agent is the inference. It generates the JSON, the skill validates it — no API key, no proxy, nothing to run. Just JS + the packages, exactly as you described.

A first-party MCP server. A real one, TypeScript, in the repo, built directly on the same MIT packages (types, renderer, quality). You run it locally, customize it, point it at your own inference backend. It exposes the schema as a resource, the block-operation tools (add/update/move/set-content), validation, quality linting, and MJML export. Generation is agent-delegated by default (keyless, like the skill); a bring-your-own-provider adapter is there for headless/automated use.

Both can be designed to compose with your own context: brand guidelines, tone, a custom system prompt layer on top of the baseline. First-class input, not an afterthought, since I agree that's where the real output quality lives.

But one thing to mention: the MCP server's job is to produce and manipulate the template JSON. You take the result and load it into the editor. Live-driving a running editor session in real time (agent edits appearing instantly in someone's open browser) needs a realtime transport/server/infrastructure, which is out of SDK's scope and what this library can do.
This is where Cloud comes in. It takes care of this, since it provide all the necessary infrastructure. But I also have plans to open SDK to connect and use a different live interaction/websockets infrastructure if consumer of the SDK wants to use their own. It is on my roadmap already, but as of now, not possible.

Also, I built this project with exact reason that you are having. I overspent on competitive SaaS alternatives and fed up with them gatekeeping even basic features for "enterprise" plans. With Templatical, my commitment from beginning was that whatever can live in a library, it will. Whatever can be fairly opened up to be usable with 3rd party servers/infrastructure, it will too. My idea with Cloud is to provide things on top which requires more than library and consumer does not want to deal with it themselves and happy to pay to have it.

And noted on preferring to back the OSS side directly, genuinely appreciated, that's the kind of support that keeps this maintainable. If you'd want to be early eyes on the skill + server as they take shape, I'd welcome it.

WDYT about my idea about skill + MCP server?

I will work on skill, which is quite straightforward. I will probably ship it this week.

[j-ro]

I like this approach! Understood on the way MCP would have to interact with a live session, and that would be Cloud's job. I do like the idea of multiplayer (a player being an agent potentially) in the open source version, or at least primitives for that (websockets, etc...) but I don't consider it completely necessary. Agent based construction could be turn based and still be pretty good for a lot of use cases.

And happy to give advice as we get deeper into this too!

[orkhanahmadov]

Hey @j-ro,

I finalized and shipped the AI skill — I think you'll like it. What it can do:

• Full understanding of Templatical's block schema: it builds emails straight from a prompt. It'll also pick up your branding and design language if you describe it in the prompt, or point it at relevant files in your working directory.
• Validates the generated template against the schema and checks for errors, and if it finds any, offers to fix them.
• (when installed) runs a quality check via @templatical/quality: accessibility/WCAG, structure, and link checks. Everything @templatical/quality offers, but with the agent driving it.

And most importantly, it launches a live server and lets you preview the built template. Prompt the agent, "build me a live Templatical email with X, Y, Z" and it generates the template, then offers to show it live. On confirm it spins up a local Node server with live updates, feeds it the generated JSON, and you watch the real editor render it. You can copy the JSON from the browser, or export straight to MJML or HTML right there. You can keep prompting too (tweak blocks, add/remove them), every change is pushed live to the preview. There's even a "multiplayer" flow: ask the agent to build something, view it live, then make some edits by hand, and when you next ask the agent to change something, it recognizes your manual edits and either pushes its updates on top of them or checks with you before overwriting.

Each template is saved as its own JSON file in a .templatical/ folder in your working directory, each with a unique three-word name.

I think this opens up a lot more than the original "developers who want JSON out" use case: someone non-technical, with just a coding agent installed, can build a template from scratch, launch it live, make the changes they need, then export the HTML and paste it into their ESP of choice to send the email — all with zero integration or friction.

More on the skill in the docs: https://docs.templatical.com/guide/agent-skill
I also updated the homepage to promote it: https://templatical.com

Give the new AI skill a spin and let me know how it works for you.

[j-ro]

very cool! I'll pull it down and try it out! And do let me know when cloud launches too!