Oliver
162 lines
8.4 KiB
HTML
162 lines
8.4 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<meta name="robots" content="index, follow" />
|
|
<link rel="canonical" href="https://derez.ai/blog/posts/speed-run-nextcloud-svg.html" />
|
|
<title>Speed Run: Connect to Nextcloud & Render SVGs with an AI Agent — Derez.ai Blog</title>
|
|
<meta name="description" content="From zero to an agent that connects to Nextcloud, generates vector graphics, and saves them — all through a single prompt." />
|
|
<meta property="og:type" content="article" />
|
|
<meta property="og:url" content="https://derez.ai/blog/posts/speed-run-nextcloud-svg.html" />
|
|
<meta property="og:title" content="Speed Run: Connect to Nextcloud & Render SVGs with an AI Agent" />
|
|
<meta property="og:description" content="From zero to an agent that connects to Nextcloud, generates vector graphics, and saves them — all through a single prompt." />
|
|
<meta name="twitter:card" content="summary_large_image" />
|
|
<meta name="twitter:title" content="Speed Run: Connect to Nextcloud & Render SVGs with an AI Agent" />
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400;14..32,500;14..32,600;14..32,700&display=swap" rel="stylesheet" />
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body {
|
|
background: #08080c;
|
|
color: #e8e8f0;
|
|
font-family: 'Inter', sans-serif;
|
|
line-height: 1.7;
|
|
padding: 40px 20px;
|
|
}
|
|
.container { max-width: 720px; margin: 0 auto; }
|
|
a { color: #00f5ff; text-decoration: none; }
|
|
a:hover { text-decoration: underline; }
|
|
.back { margin-bottom: 32px; display: inline-block; font-size: 0.9rem; color: #888; }
|
|
.back:hover { color: #00f5ff; }
|
|
h1 { font-size: 1.9rem; font-weight: 700; line-height: 1.3; margin-bottom: 12px; }
|
|
.meta { font-size: 0.85rem; color: #888; margin-bottom: 40px; display: flex; gap: 12px; align-items: center; }
|
|
.area-tag {
|
|
display: inline-block;
|
|
background: #f472b6;
|
|
color: #000;
|
|
font-size: 0.75rem;
|
|
font-weight: 700;
|
|
padding: 2px 10px;
|
|
border-radius: 20px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
.chip-tag {
|
|
display: inline-block;
|
|
background: rgba(0,245,255,0.1);
|
|
color: #00f5ff;
|
|
border: 1px solid rgba(0,245,255,0.3);
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
padding: 2px 10px;
|
|
border-radius: 20px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
h2 { font-size: 1.3rem; font-weight: 600; margin: 36px 0 12px; color: #f0f0ff; }
|
|
h3 { font-size: 1.1rem; font-weight: 600; margin: 24px 0 8px; color: #e0e0f0; }
|
|
p { margin-bottom: 16px; color: #c8c8d8; }
|
|
ul, ol { margin: 0 0 16px 24px; color: #c8c8d8; }
|
|
li { margin-bottom: 6px; }
|
|
code { background: #0e0e14; padding: 2px 6px; border-radius: 4px; font-size: 0.9em; color: #00f5ff; }
|
|
strong { color: #f0f0ff; }
|
|
.prereq-group { margin-bottom: 16px; }
|
|
.prereq-group > .group-label { font-weight: 600; color: #f472b6; margin-bottom: 4px; }
|
|
.prompt-box {
|
|
background: #0e0e14;
|
|
border: 1px solid #1a1a24;
|
|
border-radius: 12px;
|
|
padding: 20px 24px;
|
|
margin: 16px 0 24px;
|
|
font-style: italic;
|
|
color: #c8c8d8;
|
|
}
|
|
.prompt-box code { background: #001a18; }
|
|
.pro-tip {
|
|
background: rgba(0,245,255,0.06);
|
|
border-left: 3px solid #00f5ff;
|
|
border-radius: 8px;
|
|
padding: 16px 20px;
|
|
margin: 20px 0;
|
|
font-size: 0.92rem;
|
|
color: #d0d0e0;
|
|
}
|
|
.pro-tip strong { color: #00f5ff; }
|
|
@media (max-width: 600px) {
|
|
body { padding: 24px 16px; }
|
|
h1 { font-size: 1.5rem; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<a class="back" href="https://derez.ai/#blog">← Back to Blog</a>
|
|
<h1>Speed Run: Connect to Nextcloud & Render SVGs with an AI Agent</h1>
|
|
<div class="meta">
|
|
<span>June 11, 2026</span>
|
|
<span class="area-tag">speed-run</span>
|
|
<span class="chip-tag">hermes</span>
|
|
</div>
|
|
|
|
<h2>Introduction</h2>
|
|
<p>
|
|
This speed run shows you how to connect your agent to a Nextcloud instance and have it render vector graphics on the fly. No coding, no WebDAV clients — just configure the integration once, and your agent can read, write, and generate SVG files directly into your Nextcloud folders.
|
|
</p>
|
|
<p>
|
|
To follow along, you'll need a Nextcloud account with WebDAV access. We'll use a <strong>demo.nextcloud.odoo4projects.com</strong> instance with a dedicated integration user.
|
|
</p>
|
|
|
|
<h2>Prerequisites</h2>
|
|
<p>Before you start, make sure you have your Nextcloud credentials ready:</p>
|
|
|
|
<div class="prereq-group">
|
|
<div class="group-label">Integration — Nextcloud (WebDAV)</div>
|
|
<ul>
|
|
<li><strong>Server URL</strong> — <code>https://demo.nextcloud.odoo4projects.com/remote.php/dav/files/integration/</code></li>
|
|
<li><strong>Username</strong> — <code>integration</code></li>
|
|
<li><strong>Password</strong> — <code>nc-integration-2026!</code></li>
|
|
<li><strong>Output Directory</strong> — <code>/agent-output</code></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<p>The output directory is a folder inside your Nextcloud files where the agent will save generated SVGs. Create it once in your Nextcloud web interface — the agent reads and writes to it automatically after that.</p>
|
|
|
|
<h2>Prompt</h2>
|
|
<p>We configured two prompts on the agent's dashboard at <strong>app.derez.ai</strong>. The first connects the agent to Nextcloud using your integration credentials. The second tells it what graphic to generate.</p>
|
|
|
|
<div class="prompt-box">
|
|
<strong>Prompt 1 — Nextcloud Integration</strong><br /><br />
|
|
Generated by the Derez Dashboard
|
|
</div>
|
|
|
|
<div class="prompt-box" style="margin-top:-8px">
|
|
<strong>Prompt 2 — Render SVG</strong><br /><br />
|
|
Create a modern SVG dashboard card showing system health for a server farm with 12 servers (8 healthy, 3 degraded, 1 down). Use a dark theme (#0e0e14 background, #00f5ff accents). Include a donut chart, a timeline sparkline, and a status table. Save the SVG to my Nextcloud output directory as <code>dashboard-card.svg</code>.
|
|
</div>
|
|
|
|
<p>The first prompt authenticates with your Nextcloud server using the credentials from the dashboard integration settings. The second prompt instructs the agent to design, render, and save the SVG — the agent handles the vector math, colour palette, and WebDAV upload automatically.</p>
|
|
|
|
<h2>Wrap Up</h2>
|
|
<p>
|
|
In under 5 minutes you went from nothing to an AI agent that connects to your private cloud storage and produces production-quality vector graphics. The same pattern works for any file type your agent can generate — data exports, config files, HTML reports, or multi-page SVGs.
|
|
</p>
|
|
|
|
<div class="pro-tip">
|
|
<strong>Pro tip:</strong> Use the Nextcloud integration as a general-purpose file bridge. Your agent can read existing files (templates, data CSVs) and write results back — turning Nextcloud into a persistent workspace for scheduled agent tasks like daily reports or dashboard snapshots.
|
|
</div>
|
|
|
|
<p>
|
|
Use coupon code <strong>BLOG950</strong> at checkout to get $9.50 off your first month — zero risk, full access.
|
|
</p>
|
|
<p>
|
|
<a href="https://derez.ai/#pricing">Deploy your own Nextcloud-connected agent now.</a>
|
|
</p>
|
|
|
|
<p style="margin-top:48px;padding-top:24px;border-top:1px solid #1a1a24;font-size:0.85rem;color:#666;">
|
|
<a href="https://derez.ai" style="color:#00f5ff">Derez.ai</a> — Deploy your AI agent in 5 minutes.
|
|
</p>
|
|
</div>
|
|
</body>
|
|
</html> |