Publishing Folios via MCP
Create and update LiveFolio folios programmatically — HTML packaging, file management, binary assets, and best practices.
Creating a Folio
Use create_project. The minimum required fields are title and initial_html.
Basic Example
{
"name": "create_project",
"arguments": {
"title": "Hello World",
"initial_html": "<!DOCTYPE html><html><body><h1>Hello</h1></body></html>"
}
}
With Design Preferences
{
"title": "Branded Folio",
"initial_html": "...",
"project_mode": "deck",
"design_preferences": {
"theme": "Premium SaaS Deck",
"palette": "Cobalt Ocean",
"typography": "Outfit & Roboto Mono",
"customColors": { "primary": "#4F46E5" },
"libraries": ["Tailwind CSS Core"]
}
}
Updating a Folio
Use update_project. Files are merged — only send what changed.
File Merging
Previous version files:
index.html, style.css, script.js
Update with:
{ "style.css": "h1 { color: blue; }" }
New version files:
index.html (unchanged), style.css (updated), script.js (unchanged)
Adding Files
{
"project_id": "my-folio-1234",
"updated_files": {
"assets/logo.png": "data:image/png;base64,iVBORw0KGgo...",
"assets/chart.js": "new Chart(...)"
},
"change_message": "Added logo and interactive chart"
}
Binary Assets
Images are handled as base64-encoded Data URLs:
{
"updated_files": {
"assets/hero.png": "data:image/png;base64,iVBORw0KGgoAAAANS..."
}
}
LiveFolio automatically decodes Data URLs. Reference them in HTML normally:
<img src="assets/hero.png" alt="Hero">
Project ID Format
Project IDs are auto-generated UUIDs. Use list_projects to discover IDs — never hard-code them.
Reference Files
Reference files provide context for AI agents. They're stored with the folio:
{
"reference_files": [
{
"filename": "brand-guide.pdf",
"size": 245760,
"content": "..."
}
]
}
Best Practices
- Always include a meaningful
change_message— it becomes the version commit message - Send only changed files — the merge behavior means unchanged files persist
- Call
get_curated_briefbefore editing — understand what reviewers want - Verify with
get_projectafter publishing — confirm the folio looks correct - Use Tailwind CDN — include "Tailwind CSS Core" in libraries for automatic CDN access