Skip to content
Back

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_brief before editing — understand what reviewers want
  • Verify with get_project after publishing — confirm the folio looks correct
  • Use Tailwind CDN — include "Tailwind CSS Core" in libraries for automatic CDN access