Oliver/derez.ai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Blog: add speed-run-nextcloud-svg — connect to Nextcloud and render vector graphics with an AI agent

Browse Source
This commit is contained in:
Oliver
2026-06-11 06:10:53 -03:00
parent 4cb320a850
commit 1439331736
2 changed files with 171 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
blog/index.json
+9
View File
@@ -1,5 +1,14 @@
{
"posts": [
{
"id": "speed-run-nextcloud-svg",
"date": "2026-06-11",
"area": "speed-run",
"agent": "hermes",
"headline": "Speed Run: Connect to Nextcloud & Render SVGs with an AI Agent",
"teaser": "From zero to an agent that connects to Nextcloud, generates vector graphics, and saves them directly to your cloud storage.",
"link": "blog/posts/speed-run-nextcloud-svg.html"
},
{
"id": "speed-run-competitor-profiling",
"date": "2026-06-10",
blog/posts/speed-run-nextcloud-svg.html
+162
View File
@@ -0,0 +1,162 @@
<!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 &amp; 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 &amp; 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 &amp; 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">&larr; Back to Blog</a>
<h1>Speed Run: Connect to Nextcloud &amp; 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 &mdash; Nextcloud (WebDAV)</div>
<ul>
<li><strong>Server URL</strong> &mdash; <code>https://demo.nextcloud.odoo4projects.com/remote.php/dav/files/integration/</code></li>
<li><strong>Username</strong> &mdash; <code>integration</code></li>
<li><strong>Password</strong> &mdash; <code>nc-integration-2026!</code></li>
<li><strong>Output Directory</strong> &mdash; <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 &mdash; Nextcloud Integration</strong><br /><br />
Generated by the Derez Dashboard
</div>
<div class="prompt-box" style="margin-top:-8px">
<strong>Prompt 2 &mdash; 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>