Add Slides MCP - AI-powered presentation builder

[vibegui]

Browser-based presentation system with real JSX (via Babel Standalone), no build step.

Architecture:

• brands/ folder: Reusable design systems (source of truth)
• decks/ folder: Presentations that reference brands

Tools:

• DECK_INIT: Create brand or deck (with brand reference)
• DECK_BUNDLE: Bundle deck into standalone HTML
• SLIDE_CREATE/UPDATE/DELETE/REORDER: Manage slides

Prompts:

• SLIDES_SETUP_BRAND: Create new brand design system
• SLIDES_NEW_DECK: Create deck from existing brand
• SLIDES_ADD_CONTENT: Add slides to deck
• SLIDES_QUICK_START: Fast one-off presentations

Features:

• CDN-based: React 18, GSAP, Babel Standalone
• JSX components without build step
• Design system viewer at /design.html
• Keyboard navigation (arrows, F for fullscreen)
• Bundling for portable single-file presentations

---

Summary by cubic

Adds Slides MCP, a browser-based presentation builder with CDN React + GSAP and no build step, and introduces Brand MCP for brand research and design system generation. Slides integrates with Brand MCP via a binding for brand-aware decks and includes MCP Apps UIs for interactive previews.

• New Features

  • Slides workspace with brand/deck architecture (brands as design systems, decks referencing brands).
  • Tools: DECK_INIT, DECK_INFO, DECK_BUNDLE, SLIDES_PREVIEW, SLIDE_CREATE/UPDATE/DELETE/REORDER, STYLE_GET/UPDATE; Brand integration via BRAND_CREATE binding.
  • Prompts: SLIDES_SETUP_BRAND, SLIDES_NEW_DECK, SLIDES_ADD_CONTENT, SLIDES_QUICK_START.
  • MCP Apps resources: slides viewer, design system preview, single-slide preview; Brand preview and brand list; example deck in slides/test-presentation.

• Migration

  • Start servers: bun run --hot server/main.ts from slides/ and brand/.
  • Use Brand MCP (BRAND_CREATE) to create a brand, then init a deck with DECK_INIT; add content via SLIDES_* prompts; export with DECK_BUNDLE.
  • Optionally configure Perplexity and Firecrawl bindings in Brand MCP for research.
  • Root package.json and bun.lock updated to include slides and brand workspaces.

^{Written for commit 7a4ad92. Summary will update on new commits.}

[github-actions]

🚀 Preview Deployments Ready!

Your changes have been deployed to preview environments:

📦 slides

🔗 View Preview

These previews will be automatically updated with new commits to this PR.

---

_{Deployed from commit: 26d6874}

[cubic-dev-ai]

4 issues found across 27 files

Prompt for AI agents (all issues)

Check if these issues are valid — if so, understand the root cause of each and fix them.


<file name="slides/server/main.ts">

<violation number="1" location="slides/server/main.ts:63">
P2: Guard the `pbcopy` clipboard command so the server doesn't crash on non-macOS environments.</violation>
</file>

<file name="slides/test-presentation/engine.js">

<violation number="1" location="slides/test-presentation/engine.js:828">
P1: Rendering `slide.customHtml` with `dangerouslySetInnerHTML` allows XSS if slide JSON content is user-provided. Sanitize or restrict HTML before injecting into the DOM.</violation>
</file>

<file name="slides/server/prompts.ts">

<violation number="1" location="slides/server/prompts.ts:214">
P1: Sanitize `deckName` before building `deckPath`. Right now `deckName` is used verbatim, allowing path traversal or unsafe shell interpolation in the generated command snippets.</violation>
</file>

<file name="slides/server/tools/slides.ts">

<violation number="1" location="slides/server/tools/slides.ts:151">
P1: Generating the slide number from array length can reuse an existing filename after deletions or gaps, causing filename collisions in the manifest. Derive the next number from the max existing numeric prefix instead.</violation>
</file>

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}

[cubic-dev-ai]

P1: Rendering slide.customHtml with dangerouslySetInnerHTML allows XSS if slide JSON content is user-provided. Sanitize or restrict HTML before injecting into the DOM.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At slides/test-presentation/engine.js, line 828:

<comment>Rendering `slide.customHtml` with `dangerouslySetInnerHTML` allows XSS if slide JSON content is user-provided. Sanitize or restrict HTML before injecting into the DOM.</comment>

<file context>
@@ -0,0 +1,1154 @@
+  const renderCustomSlide = (slide, bgClass, textColorClass) =>
+    React.createElement("div", {
+      className: `w-full h-full ${bgClass} ${textColorClass}`,
+      dangerouslySetInnerHTML: { __html: slide.customHtml || "" },
+    });
+
</file context>

[cubic-dev-ai]

P1: Generating the slide number from array length can reuse an existing filename after deletions or gaps, causing filename collisions in the manifest. Derive the next number from the max existing numeric prefix instead.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At slides/server/tools/slides.ts, line 151:

<comment>Generating the slide number from array length can reuse an existing filename after deletions or gaps, causing filename collisions in the manifest. Derive the next number from the max existing numeric prefix instead.</comment>

<file context>
@@ -0,0 +1,540 @@
+
+      // Generate slide ID and filename
+      const slideIndex = manifest.slides?.length || 0;
+      const slideNum = String(slideIndex + 1).padStart(3, "0");
+      const slideId = `slide-${slideNum}-${Date.now()}`;
+      const slugTitle = slideData.title
</file context>

[cubic-dev-ai]

3 issues found across 19 files (changes from recent commits).

Prompt for AI agents (all issues)

Check if these issues are valid — if so, understand the root cause of each and fix them.


<file name="mcp-apps-testbed/README.md">

<violation number="1" location="mcp-apps-testbed/README.md:133">
P3: The README example references `ui://counter`, but the actual resource URI is `ui://counter-app`. This will mislead users and fail if they copy the sample.</violation>
</file>

<file name="slides/server/tools/deck.ts">

<violation number="1" location="slides/server/tools/deck.ts:140">
P2: Escape brand/asset values before embedding them into the generated JSX. As written, unescaped quotes or backslashes in brandName/tagline/logo URLs can break design-system.jsx and prevent decks from loading.</violation>
</file>

<file name="mcp-apps-testbed/server/lib/resources.ts">

<violation number="1" location="mcp-apps-testbed/server/lib/resources.ts:529">
P2: Progress widget’s demo interval keeps overwriting initialized values. Stop the demo timer once real input is received, or only run it when no `toolInput` is provided.</violation>
</file>

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}

[cubic-dev-ai]

P2: Escape brand/asset values before embedding them into the generated JSX. As written, unescaped quotes or backslashes in brandName/tagline/logo URLs can break design-system.jsx and prevent decks from loading.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At slides/server/tools/deck.ts, line 140:

<comment>Escape brand/asset values before embedding them into the generated JSX. As written, unescaped quotes or backslashes in brandName/tagline/logo URLs can break design-system.jsx and prevent decks from loading.</comment>

<file context>
@@ -92,25 +92,118 @@ Edit \`design-system.jsx\` to customize components. Key components:
 
-  function BrandLogo({ size = "normal", className = "" }) {
+  const BRAND = {
+    name: "${brandName}",
+    tagline: "${tagline}",
+    logos: {
</file context>

Suggested change

	name: "${brandName}",
	tagline: "${tagline}",
	logos: {
	primary: "${primaryLogo}",
	light: "${lightLogo}", // For dark backgrounds
	dark: "${darkLogo}", // For light backgrounds
	icon: "${icon}", // Square icon
	name: ${JSON.stringify(brandName)},
	tagline: ${JSON.stringify(tagline)},
	logos: {
	primary: ${JSON.stringify(primaryLogo)},
	light: ${JSON.stringify(lightLogo)}, // For dark backgrounds
	dark: ${JSON.stringify(darkLogo)}, // For light backgrounds
	icon: ${JSON.stringify(icon)}, // Square icon
	},

[cubic-dev-ai]

6 issues found across 23 files (changes from recent commits).

Prompt for AI agents (all issues)

Check if these issues are valid — if so, understand the root cause of each and fix them.


<file name="brand/server/types/env.ts">

<violation number="1" location="brand/server/types/env.ts:34">
P2: The SCRAPER binding is defined for @deco/content-scraper with an empty input schema, but brand tools call scrape_content with url/formats. The content-scraper implementation ignores input, so the requested URL won’t be used and scraping will fail or target the wrong data. Use a scraper binding that accepts url/formats (e.g., Firecrawl) or update the binding schema/tool to accept those inputs.</violation>
</file>

<file name="brand/server/tools/generator-utils.ts">

<violation number="1" location="brand/server/tools/generator-utils.ts:111">
P2: Escape or serialize brand identity strings before embedding them in the generated JSX. Unescaped quotes/backticks in name or tagline will break the generated design system output.</violation>
</file>

<file name="brand/server/main.ts">

<violation number="1" location="brand/server/main.ts:26">
P2: Default port doesn�t match the documented Brand MCP port (8001). This will make the quick start instructions incorrect unless PORT is set.</violation>
</file>

<file name="brand/server/tools/generator.ts">

<violation number="1" location="brand/server/tools/generator.ts:97">
P2: Unescaped brand fields in the generated JSX can break the output or allow injected content when names/taglines/logos contain quotes or newlines. Escape interpolated values (e.g., JSON.stringify) before embedding them in string literals.</violation>
</file>

<file name="brand/server/tools/research.ts">

<violation number="1" location="brand/server/tools/research.ts:434">
P2: createBrandDiscoverTool can return a BrandIdentity without required colors.primary, which violates the schema and can cause runtime validation or consumer failures when no colors are extracted. Initialize a default colors object to satisfy the schema.</violation>
</file>

<file name="slides/server/tools/index.ts">

<violation number="1" location="slides/server/tools/index.ts:21">
P2: BRAND_RESEARCH tools are removed from the tool registry but prompts still require them, so the SLIDES_SETUP_BRAND workflow will instruct calls to tools that no longer exist.</violation>
</file>

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}

[cubic-dev-ai]

P2: Escape or serialize brand identity strings before embedding them in the generated JSX. Unescaped quotes/backticks in name or tagline will break the generated design system output.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At brand/server/tools/generator-utils.ts, line 111:

<comment>Escape or serialize brand identity strings before embedding them in the generated JSX. Unescaped quotes/backticks in name or tagline will break the generated design system output.</comment>

<file context>
@@ -0,0 +1,266 @@
+ */
+
+const BRAND = {
+  name: "${identity.name}",
+  tagline: "${identity.tagline || ""}",
+  
</file context>

[cubic-dev-ai]

P2: Default port doesn�t match the documented Brand MCP port (8001). This will make the quick start instructions incorrect unless PORT is set.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At brand/server/main.ts, line 26:

<comment>Default port doesn�t match the documented Brand MCP port (8001). This will make the quick start instructions incorrect unless PORT is set.</comment>

<file context>
@@ -0,0 +1,119 @@
+
+export { StateSchema };
+
+const PORT = process.env.PORT || 8003;
+
+console.log("[brand-mcp] Starting server...");
</file context>

[cubic-dev-ai]

P2: Unescaped brand fields in the generated JSX can break the output or allow injected content when names/taglines/logos contain quotes or newlines. Escape interpolated values (e.g., JSON.stringify) before embedding them in string literals.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At brand/server/tools/generator.ts, line 97:

<comment>Unescaped brand fields in the generated JSX can break the output or allow injected content when names/taglines/logos contain quotes or newlines. Escape interpolated values (e.g., JSON.stringify) before embedding them in string literals.</comment>

<file context>
@@ -0,0 +1,816 @@
+
+// Brand configuration
+const BRAND = {
+  name: "${identity.name}",
+  tagline: "${identity.tagline || ""}",
+  
</file context>

[cubic-dev-ai]

P2: createBrandDiscoverTool can return a BrandIdentity without required colors.primary, which violates the schema and can cause runtime validation or consumer failures when no colors are extracted. Initialize a default colors object to satisfy the schema.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At brand/server/tools/research.ts, line 434:

<comment>createBrandDiscoverTool can return a BrandIdentity without required colors.primary, which violates the schema and can cause runtime validation or consumer failures when no colors are extracted. Initialize a default colors object to satisfy the schema.</comment>

<file context>
@@ -0,0 +1,663 @@
+        };
+      }
+
+      const identity: Partial<BrandIdentity> = {
+        name: brandName,
+        sources: [],
</file context>

[cubic-dev-ai]

P2: BRAND_RESEARCH tools are removed from the tool registry but prompts still require them, so the SLIDES_SETUP_BRAND workflow will instruct calls to tools that no longer exist.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At slides/server/tools/index.ts, line 21:

<comment>BRAND_RESEARCH tools are removed from the tool registry but prompts still require them, so the SLIDES_SETUP_BRAND workflow will instruct calls to tools that no longer exist.</comment>

<file context>
@@ -5,27 +5,22 @@
-  ...slideTools,
-  ...brandResearchTools,
-];
+export const tools = [...deckTools, ...styleTools, ...slideTools];
 
 // Re-export individual tool modules for direct access
</file context>