forked from molecule-ai/molecule-core
docs(marketing): add SVG visual assets for both campaign social copies
Chrome DevTools MCP: - mcp-bridge-diagram.svg: AI Agent → MCP → CDP → Chrome architecture - comparison-table-card.svg: 3-approach comparison with cost/cred isolation Fly.io Deploy Anywhere: - backend-comparison-card.svg: 3 backend comparison with env vars Social copy docs updated to reference generated assets. Social Media Brand can use SVGs directly or screenshot for PNG export. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Molecule AI Community Manager
parent
b68952d8eb
commit
128e5ade79
@ -0,0 +1,102 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 340">
|
||||
<defs>
|
||||
<style>
|
||||
.bg { fill: #0d1117; }
|
||||
.card { fill: #161b22; stroke: #30363d; stroke-width: 1.5; rx: 12; }
|
||||
.header-bg { fill: #1c2128; }
|
||||
.row-alt { fill: #1c2128; }
|
||||
.header-text { font-family: system-ui, sans-serif; fill: #f0f6fc; font-size: 12px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; }
|
||||
.cell-text { font-family: 'JetBrains Mono', 'Fira Code', monospace; fill: #c9d1d9; font-size: 12px; }
|
||||
.cell-label { font-family: system-ui, sans-serif; fill: #c9d1d9; font-size: 12px; }
|
||||
.cell-sm { font-family: system-ui, sans-serif; fill: #8b949e; font-size: 11px; }
|
||||
.badge { rx: 4; }
|
||||
.badge-green { fill: #238636; }
|
||||
.badge-yellow { fill: #9e6a03; }
|
||||
.badge-blue { fill: #1f6feb; }
|
||||
.badge-red { fill: #da3633; }
|
||||
.title { font-family: system-ui, sans-serif; fill: #f0f6fc; font-size: 18px; font-weight: 700; }
|
||||
.subtitle { font-family: system-ui, sans-serif; fill: #8b949e; font-size: 12px; }
|
||||
.highlight { font-family: system-ui, sans-serif; fill: #58a6ff; font-size: 12px; font-weight: 700; }
|
||||
.col-header { font-family: system-ui, sans-serif; fill: #8b949e; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; }
|
||||
</style>
|
||||
</defs>
|
||||
|
||||
<rect width="800" height="340" class="bg"/>
|
||||
|
||||
<!-- Title -->
|
||||
<text x="400" y="30" text-anchor="middle" class="title">Browser Automation for AI Agents — 3 Approaches</text>
|
||||
<text x="400" y="48" text-anchor="middle" class="subtitle">Setup effort, session management, and cost compared</text>
|
||||
|
||||
<!-- Table -->
|
||||
<rect x="40" y="65" width="720" height="250" class="card"/>
|
||||
|
||||
<!-- Header row -->
|
||||
<rect x="40" y="65" width="720" height="36" class="header-bg"/>
|
||||
<text x="60" y="86" class="header-text">Approach</text>
|
||||
<text x="280" y="86" class="col-header">Setup</text>
|
||||
<text x="420" y="86" class="col-header">Session Mgmt</text>
|
||||
<text x="560" y="86" class="col-header">Cost</text>
|
||||
<text x="700" y="86" class="col-header">For</text>
|
||||
|
||||
<!-- Divider -->
|
||||
<line x1="40" y1="101" x2="760" y2="101" stroke="#30363d" stroke-width="1"/>
|
||||
|
||||
<!-- Row 1: Custom Playwright -->
|
||||
<rect x="40" y="101" width="720" height="58" class="row-alt"/>
|
||||
<text x="60" y="125" class="cell-label" font-weight="600">Custom Puppeteer / Playwright</text>
|
||||
<text x="60" y="141" class="cell-sm">DIY Python wrapper</text>
|
||||
|
||||
<text x="280" y="128" class="highlight">High</text>
|
||||
<text x="280" y="143" class="cell-sm">Write + maintain wrapper</text>
|
||||
|
||||
<text x="420" y="128" class="highlight">DIY</text>
|
||||
<text x="420" y="143" class="cell-sm">You handle timeouts, retries</text>
|
||||
|
||||
<rect x="555" y="115" width="80" height="20" class="badge badge-green"/>
|
||||
<text x="595" y="129" text-anchor="middle" fill="white" font-family="system-ui" font-size="11" font-weight="600">Free</text>
|
||||
<text x="555" y="155" class="cell-sm">your infra</text>
|
||||
|
||||
<text x="700" y="128" class="cell-sm">Self-hosters</text>
|
||||
|
||||
<!-- Row 2: SaaS Browser API -->
|
||||
<rect x="40" y="159" width="720" height="58"/>
|
||||
<text x="60" y="183" class="cell-label" font-weight="600">SaaS Browser API</text>
|
||||
<text x="60" y="199" class="cell-sm">Browserbase, Steel, Scale</text>
|
||||
|
||||
<text x="280" y="186" class="highlight">Low</text>
|
||||
<text x="280" y="201" class="cell-sm">Managed by vendor</text>
|
||||
|
||||
<text x="420" y="186" class="highlight">Managed</text>
|
||||
<text x="420" y="201" class="cell-sm">Vendor handles sessions</text>
|
||||
|
||||
<rect x="555" y="173" width="80" height="20" class="badge badge-yellow"/>
|
||||
<text x="595" y="187" text-anchor="middle" fill="white" font-family="system-ui" font-size="11" font-weight="600">Per-session</text>
|
||||
<text x="555" y="213" class="cell-sm">varies by vendor</text>
|
||||
|
||||
<text x="700" y="186" class="cell-sm">Quick prototypes</text>
|
||||
|
||||
<!-- Row 3: Molecule AI + MCP — highlighted -->
|
||||
<rect x="40" y="217" width="720" height="58" fill="#1f2d3d" rx="0"/>
|
||||
<rect x="40" y="217" width="720" height="58" fill="#1c2a3a"/>
|
||||
<rect x="40" y="217" width="3" height="58" fill="#58a6ff"/>
|
||||
<text x="60" y="241" fill="#58a6ff" font-family="system-ui" font-size="13" font-weight="700">Molecule AI + MCP ✓</text>
|
||||
<text x="60" y="257" class="cell-sm">Built into Molecule AI workspace</text>
|
||||
|
||||
<text x="280" y="242" fill="#3fb950" font-family="system-ui" font-size="13" font-weight="700">Low</text>
|
||||
<text x="280" y="257" class="cell-sm">3-line YAML config</text>
|
||||
|
||||
<text x="420" y="242" fill="#3fb950" font-family="system-ui" font-size="13" font-weight="700">Agent-native</text>
|
||||
<text x="420" y="257" class="cell-sm">persistent session, no human wiring</text>
|
||||
|
||||
<rect x="555" y="229" width="80" height="20" class="badge badge-blue"/>
|
||||
<text x="595" y="243" text-anchor="middle" fill="white" font-family="system-ui" font-size="11" font-weight="600">Free*</text>
|
||||
<text x="555" y="269" class="cell-sm">self-hosted / standard tier</text>
|
||||
|
||||
<text x="700" y="242" class="cell-sm">Production AI agents</text>
|
||||
|
||||
<!-- Footer note -->
|
||||
<text x="400" y="298" text-anchor="middle" class="cell-sm">* Free when self-hosted. SaaS pricing varies by Molecule AI plan. MCP is open source.</text>
|
||||
|
||||
<!-- Molecule AI label -->
|
||||
<text x="760" y="82" text-anchor="end" fill="#58a6ff" font-family="system-ui" font-size="10" font-weight="600">RECOMMENDED</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.3 KiB |
@ -0,0 +1,100 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 420">
|
||||
<defs>
|
||||
<style>
|
||||
.bg { fill: #0d1117; }
|
||||
.box { fill: #161b22; stroke: #30363d; stroke-width: 1.5; rx: 8; }
|
||||
.label { font-family: 'JetBrains Mono', 'Fira Code', monospace; fill: #c9d1d9; font-size: 13px; }
|
||||
.label-sm { font-family: 'JetBrains Mono', 'Fira Code', monospace; fill: #8b949e; font-size: 11px; }
|
||||
.title { font-family: system-ui, sans-serif; fill: #f0f6fc; font-size: 15px; font-weight: 600; }
|
||||
.subtitle { font-family: system-ui, sans-serif; fill: #8b949e; font-size: 11px; }
|
||||
.arrow { stroke: #58a6ff; stroke-width: 2; fill: none; marker-end: url(#arrowhead); }
|
||||
.arrow-label { font-family: system-ui, sans-serif; fill: #58a6ff; font-size: 11px; }
|
||||
.tool-box { fill: #1c2128; stroke: #388bfd; stroke-width: 1.5; rx: 6; }
|
||||
.mcp-badge { fill: #1f6feb; rx: 4; }
|
||||
.cdp-badge { fill: #238636; rx: 4; }
|
||||
</style>
|
||||
<marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
|
||||
<polygon points="0 0, 10 3.5, 0 7" fill="#58a6ff"/>
|
||||
</marker>
|
||||
</defs>
|
||||
|
||||
<!-- Background -->
|
||||
<rect width="800" height="420" class="bg"/>
|
||||
|
||||
<!-- Title -->
|
||||
<text x="400" y="28" text-anchor="middle" class="title">AI Agent → MCP → CDP → Chrome</text>
|
||||
<text x="400" y="44" text-anchor="middle" class="subtitle">Browser automation via the Model Context Protocol</text>
|
||||
|
||||
<!-- AI Agent box -->
|
||||
<rect x="20" y="75" width="180" height="90" class="box"/>
|
||||
<text x="110" y="103" text-anchor="middle" class="title" style="font-size:13px">AI Agent</text>
|
||||
<text x="110" y="120" text-anchor="middle" class="label-sm">"Extract pricing</text>
|
||||
<text x="110" y="134" text-anchor="middle" class="label-sm">from competitor.com"</text>
|
||||
<text x="110" y="152" text-anchor="middle" class="subtitle">reasoning + planning</text>
|
||||
|
||||
<!-- Arrow 1: Agent → MCP Server -->
|
||||
<line x1="200" y1="120" x2="290" y2="120" class="arrow"/>
|
||||
<text x="245" y="112" text-anchor="middle" class="arrow-label">MCP invoke</text>
|
||||
<text x="245" y="128" text-anchor="middle" class="label-sm">browser_navigate</text>
|
||||
|
||||
<!-- MCP Server box -->
|
||||
<rect x="290" y="75" width="200" height="90" class="box"/>
|
||||
<rect x="300" y="82" width="44" height="18" class="mcp-badge"/>
|
||||
<text x="322" y="95" text-anchor="middle" fill="white" font-family="system-ui" font-size="10" font-weight="700">MCP</text>
|
||||
<text x="390" y="95" text-anchor="middle" class="title" style="font-size:13px">MCP Server</text>
|
||||
<text x="390" y="116" text-anchor="middle" class="label-sm">tool schema validation</text>
|
||||
<text x="390" y="130" text-anchor="middle" class="label-sm">session management</text>
|
||||
<text x="390" y="144" text-anchor="middle" class="label-sm">WebSocket lifecycle</text>
|
||||
<text x="390" y="158" text-anchor="middle" class="label-sm">CDP command dispatch</text>
|
||||
|
||||
<!-- Arrow 2: MCP Server → CDP -->
|
||||
<line x1="490" y1="120" x2="580" y2="120" class="arrow"/>
|
||||
<text x="535" y="112" text-anchor="middle" class="arrow-label">CDP command</text>
|
||||
<text x="535" y="128" text-anchor="middle" class="label-sm">Page.navigate</text>
|
||||
|
||||
<!-- CDP Engine box -->
|
||||
<rect x="580" y="75" width="200" height="90" class="box"/>
|
||||
<rect x="590" y="82" width="40" height="18" class="cdp-badge"/>
|
||||
<text x="610" y="95" text-anchor="middle" fill="white" font-family="system-ui" font-size="10" font-weight="700">CDP</text>
|
||||
<text x="680" y="95" text-anchor="middle" class="title" style="font-size:13px">Chrome DevTools</text>
|
||||
<text x="680" y="116" text-anchor="middle" class="label-sm">WebSocket JSON-RPC 2.0</text>
|
||||
<text x="680" y="130" text-anchor="middle" class="label-sm">Page / DOM / Runtime</text>
|
||||
<text x="680" y="144" text-anchor="middle" class="label-sm">Input / Network domains</text>
|
||||
|
||||
<!-- Chrome Browser box -->
|
||||
<rect x="240" y="220" width="320" height="80" class="tool-box"/>
|
||||
<text x="400" y="248" text-anchor="middle" class="title" style="font-size:14px">🐙 Headless Chrome</text>
|
||||
<text x="400" y="268" text-anchor="middle" class="label-sm">remote debugging port 9222</text>
|
||||
<text x="400" y="283" text-anchor="middle" class="label-sm">persistent session: cookies, localStorage</text>
|
||||
|
||||
<!-- Vertical arrows: CDP → Chrome -->
|
||||
<line x1="630" y1="165" x2="630" y2="210" class="arrow"/>
|
||||
<line x1="630" y1="210" x2="560" y2="220" class="arrow" style="stroke-dasharray:4,2"/>
|
||||
<line x1="400" y1="165" x2="400" y2="210" class="arrow"/>
|
||||
<line x1="400" y1="210" x2="470" y2="220" class="arrow" style="stroke-dasharray:4,2"/>
|
||||
|
||||
<!-- Tool definitions row -->
|
||||
<text x="400" y="335" text-anchor="middle" class="title" style="font-size:12px">MCP Tool Definitions → CDP Commands</text>
|
||||
|
||||
<rect x="60" y="350" width="140" height="50" rx="6" style="fill:#1c2128;stroke:#388bfd;stroke-width:1.5"/>
|
||||
<text x="130" y="368" text-anchor="middle" fill="#58a6ff" font-family="monospace" font-size="10">browser_navigate</text>
|
||||
<text x="130" y="382" text-anchor="middle" fill="#8b949e" font-family="monospace" font-size="9">→ Page.navigate</text>
|
||||
<text x="130" y="395" text-anchor="middle" fill="#8b949e" font-family="monospace" font-size="9">→ Page.navigate</text>
|
||||
|
||||
<rect x="220" y="350" width="140" height="50" rx="6" style="fill:#1c2128;stroke:#388bfd;stroke-width:1.5"/>
|
||||
<text x="290" y="368" text-anchor="middle" fill="#58a6ff" font-family="monospace" font-size="10">dom_query</text>
|
||||
<text x="290" y="382" text-anchor="middle" fill="#8b949e" font-family="monospace" font-size="9">→ DOM.getDocument</text>
|
||||
<text x="290" y="395" text-anchor="middle" fill="#8b949e" font-family="monospace" font-size="9">→ DOM.querySelector</text>
|
||||
|
||||
<rect x="380" y="350" width="140" height="50" rx="6" style="fill:#1c2128;stroke:#388bfd;stroke-width:1.5"/>
|
||||
<text x="450" y="368" text-anchor="middle" fill="#58a6ff" font-family="monospace" font-size="10">page_screenshot</text>
|
||||
<text x="450" y="382" text-anchor="middle" fill="#8b949e" font-family="monospace" font-size="9">→ Page.captureScreenshot</text>
|
||||
|
||||
<rect x="540" y="350" width="140" height="50" rx="6" style="fill:#1c2128;stroke:#388bfd;stroke-width:1.5"/>
|
||||
<text x="610" y="368" text-anchor="middle" fill="#58a6ff" font-family="monospace" font-size="10">input_dispatch</text>
|
||||
<text x="610" y="382" text-anchor="middle" fill="#8b949e" font-family="monospace" font-size="9">→ Input.dispatchKeyEvent</text>
|
||||
<text x="610" y="395" text-anchor="middle" fill="#8b949e" font-family="monospace" font-size="9">→ Input.dispatchMouseEvent</text>
|
||||
|
||||
<!-- Footer -->
|
||||
<text x="400" y="416" text-anchor="middle" class="subtitle">Molecule AI workspaces ship MCP browser tools built in — no custom server required</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.6 KiB |
@ -99,12 +99,16 @@ Code example, four real-world use cases, and the full MCP → CDP bridge breakdo
|
||||
|
||||
## Image / Visual Recommendations
|
||||
|
||||
| Platform | Asset | Description |
|
||||
| Platform | Asset | File |
|
||||
|---|---|---|
|
||||
| X/LinkedIn | Diagram: MCP bridge | Simple diagram: AI Agent → MCP → CDP → Chrome Browser. Tool call cycle visual. Label: "browser_navigate", "dom_query", "page_screenshot" |
|
||||
| X/LinkedIn | Code card | Clean code snippet showing `agent = Agent(mcp_tools=browser.tools())`. Dark background, syntax highlighted. |
|
||||
| X (thread) | Comparison card | 2x2 table: Approach / Setup / Session mgmt / Cost. "Custom Playwright" vs "SaaS browser API" vs "Molecule AI + MCP" |
|
||||
| X/LinkedIn | CTA graphic | "Your AI agent just got a browser." + GitHub link QR code or CTA button |
|
||||
| X/LinkedIn | Diagram: MCP bridge | `assets/mcp-bridge-diagram.svg` |
|
||||
| X (thread) | Comparison card | `assets/comparison-table-card.svg` |
|
||||
| X/LinkedIn | Code card | Create from blog post code snippet: `agent = Agent(mcp_tools=browser.tools())` |
|
||||
| X/LinkedIn | CTA graphic | "Your AI agent just got a browser." + GitHub link |
|
||||
|
||||
**Generated assets available in `docs/marketing/campaigns/chrome-devtools-mcp-seo/assets/`:**
|
||||
- `mcp-bridge-diagram.svg` — AI Agent → MCP → CDP → Chrome architecture diagram
|
||||
- `comparison-table-card.svg` — 3-approach comparison (Custom vs SaaS vs Molecule AI)
|
||||
|
||||
---
|
||||
|
||||
|
||||
@ -0,0 +1,102 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 360">
|
||||
<defs>
|
||||
<style>
|
||||
.bg { fill: #0d1117; }
|
||||
.card { fill: #161b22; stroke: #30363d; stroke-width: 1.5; rx: 12; }
|
||||
.title { font-family: system-ui, sans-serif; fill: #f0f6fc; font-size: 18px; font-weight: 700; }
|
||||
.subtitle { font-family: system-ui, sans-serif; fill: #8b949e; font-size: 12px; }
|
||||
.backend-title { font-family: system-ui, sans-serif; fill: #f0f6fc; font-size: 14px; font-weight: 700; }
|
||||
.backend-sub { font-family: system-ui, sans-serif; fill: #8b949e; font-size: 11px; }
|
||||
.cell-label { font-family: system-ui, sans-serif; fill: #c9d1d9; font-size: 12px; }
|
||||
.cell-sm { font-family: system-ui, sans-serif; fill: #8b949e; font-size: 11px; }
|
||||
.badge { rx: 6; }
|
||||
.env-block { fill: #1c2128; stroke: #30363d; stroke-width: 1; rx: 6; }
|
||||
.env-text { font-family: 'JetBrains Mono', monospace; fill: #79c0ff; font-size: 10px; }
|
||||
.env-val { font-family: 'JetBrains Mono', monospace; fill: #a5d6ff; font-size: 10px; }
|
||||
.check { fill: #3fb950; }
|
||||
.cross { fill: #da3633; }
|
||||
</style>
|
||||
</defs>
|
||||
|
||||
<rect width="800" height="360" class="bg"/>
|
||||
|
||||
<!-- Title -->
|
||||
<text x="400" y="28" text-anchor="middle" class="title">Molecule AI — 3 Workspace Backends</text>
|
||||
<text x="400" y="46" text-anchor="middle" class="subtitle">Same agent code. Same API surface. One environment variable to switch.</text>
|
||||
|
||||
<!-- Table header -->
|
||||
<rect x="40" y="62" width="720" height="32" fill="#1c2128" rx="8"/>
|
||||
<text x="60" y="82" font-family="system-ui" font-size="11" fill="#8b949e" text-transform="uppercase" letter-spacing="0.5">Backend</text>
|
||||
<text x="210" y="82" font-family="system-ui" font-size="11" fill="#8b949e">Config</text>
|
||||
<text x="400" y="82" font-family="system-ui" font-size="11" fill="#8b949e">Best For</text>
|
||||
<text x="560" y="82" font-family="system-ui" font-size="11" fill="#8b949e">Credentials</text>
|
||||
<text x="720" y="82" font-family="system-ui" font-size="11" fill="#8b949e">Cred Isolation</text>
|
||||
|
||||
<line x1="40" y1="94" x2="760" y2="94" stroke="#30363d" stroke-width="1"/>
|
||||
|
||||
<!-- Row 1: Docker -->
|
||||
<rect x="40" y="94" width="720" height="76" fill="#161b22" stroke="#30363d" stroke-width="1"/>
|
||||
<text x="60" y="118" class="backend-title">🐳 Docker</text>
|
||||
<text x="60" y="134" class="backend-sub">CONTAINER_BACKEND = (empty)</text>
|
||||
|
||||
<rect x="210" y="102" width="160" height="50" class="env-block"/>
|
||||
<text x="220" y="118" class="env-text"># Default — no config</text>
|
||||
<text x="220" y="132" class="env-text"># needed for Docker</text>
|
||||
<text x="220" y="146" class="cell-sm">Standard workspace image</text>
|
||||
|
||||
<text x="400" y="122" class="cell-label">Self-hosted</text>
|
||||
<text x="400" y="138" class="cell-sm">Local dev, full control</text>
|
||||
<text x="400" y="152" class="cell-sm">No cloud dependencies</text>
|
||||
|
||||
<text x="560" y="122" class="cell-sm">None</text>
|
||||
<text x="560" y="136" class="cell-sm">No external credentials</text>
|
||||
|
||||
<rect x="718" y="109" width="32" height="16" class="badge" fill="#238636"/>
|
||||
<text x="734" y="121" text-anchor="middle" fill="white" font-size="12">✓</text>
|
||||
|
||||
<!-- Row 2: Fly.io -->
|
||||
<rect x="40" y="170" width="720" height="76" fill="#1c2128" stroke="#30363d" stroke-width="1"/>
|
||||
<text x="60" y="194" class="backend-title">🚀 Fly Machines</text>
|
||||
<text x="60" y="210" class="backend-sub">CONTAINER_BACKEND = flyio</text>
|
||||
|
||||
<rect x="210" y="178" width="160" height="50" class="env-block"/>
|
||||
<text x="220" y="192" class="env-text">CONTAINER_BACKEND=flyio</text>
|
||||
<text x="220" y="206" class="env-val">FLY_API_TOKEN=...</text>
|
||||
<text x="220" y="220" class="env-val">FLY_WORKSPACE_APP=...</text>
|
||||
|
||||
<text x="400" y="198" class="cell-label">Indie devs / small teams</text>
|
||||
<text x="400" y="214" class="cell-sm">On Fly, want scale-to-zero</text>
|
||||
<text x="400" y="228" class="cell-sm">Pay-per-use compute</text>
|
||||
|
||||
<text x="560" y="198" class="cell-sm">FLY_API_TOKEN</text>
|
||||
<text x="560" y="212" class="cell-sm">lives on tenant</text>
|
||||
|
||||
<rect x="718" y="185" width="32" height="16" class="badge" fill="#9e6a03"/>
|
||||
<text x="734" y="197" text-anchor="middle" fill="white" font-size="10">~</text>
|
||||
|
||||
<!-- Row 3: Control Plane -->
|
||||
<rect x="40" y="246" width="720" height="76" fill="#161b22" stroke="#58a6ff" stroke-width="2" rx="0"/>
|
||||
<rect x="40" y="246" width="4" height="76" fill="#58a6ff"/>
|
||||
<text x="60" y="270" fill="#58a6ff" font-family="system-ui" font-size="14" font-weight="700">☁️ Control Plane API</text>
|
||||
<text x="60" y="286" class="backend-sub">CONTAINER_BACKEND = controlplane</text>
|
||||
<text x="60" y="298" class="cell-sm" fill="#58a6ff">Auto-activates when MOLECULE_ORG_ID is set</text>
|
||||
|
||||
<rect x="210" y="254" width="160" height="50" class="env-block"/>
|
||||
<text x="220" y="268" class="env-text"># Just set org ID</text>
|
||||
<text x="220" y="282" class="env-val">MOLECULE_ORG_ID=...</text>
|
||||
<text x="220" y="296" class="cell-sm">Control plane activates automatically</text>
|
||||
|
||||
<text x="400" y="268" class="cell-label">SaaS builders / multi-tenant</text>
|
||||
<text x="400" y="284" class="cell-sm">Structural credential isolation</text>
|
||||
<text x="400" y="298" class="cell-sm">Enterprise-ready by default</text>
|
||||
|
||||
<text x="560" y="268" class="cell-sm">Fly token in</text>
|
||||
<text x="560" y="282" class="cell-sm">control plane only</text>
|
||||
<text x="560" y="296" class="cell-sm">Never on tenant</text>
|
||||
|
||||
<rect x="718" y="259" width="32" height="16" class="badge" fill="#1f6feb"/>
|
||||
<text x="734" y="271" text-anchor="middle" fill="white" font-size="12">✓✓</text>
|
||||
|
||||
<!-- Footer -->
|
||||
<text x="400" y="342" text-anchor="middle" class="cell-sm">The right backend is the default for your context. Set MOLECULE_ORG_ID and credential isolation is structural from day one.</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.7 KiB |
@ -98,13 +98,16 @@ Full breakdown of all three backends, with env var reference tables, in the blog
|
||||
|
||||
## Image / Visual Recommendations
|
||||
|
||||
| Platform | Asset | Description |
|
||||
| Platform | Asset | File |
|
||||
|---|---|---|
|
||||
| X/LinkedIn | Architecture diagram | Canvas → Tenant Platform → Control Plane API → Fly Machines. Clean, labeled boxes. |
|
||||
| X/LinkedIn | Comparison table card | 3 backends: Docker / Fly Machines / Control Plane. Use case + credential owner. Dark background. |
|
||||
| X/LinkedIn | Comparison table card | `assets/backend-comparison-card.svg` |
|
||||
| X (thread) | Env var code card | Three env vars, clean syntax highlight. "Three lines. Done." |
|
||||
| X/LinkedIn | "Before vs After" | Left: one backend (Docker). Right: three backends (Docker + Fly + Control Plane). Shows expansion. |
|
||||
|
||||
**Generated assets available in `docs/marketing/campaigns/fly-deploy-anywhere/assets/`:**
|
||||
- `backend-comparison-card.svg` — 3 backend comparison with env vars, use cases, credential ownership
|
||||
|
||||
---
|
||||
|
||||
## Hashtag Set
|
||||
|
||||
Loading…
Reference in New Issue
Block a user