20.5 KB
ai-assistant.html
{{template "docs.html" .}}
{{define "title"}}AI Assistant{{end}}
{{define "content"}}
<article class="space-y-12">
<header>
<div class="w-12 h-1 rounded-full bg-gradient-to-r from-violet-500 to-cyan-500 mb-6"></div>
<h1 class="text-3xl font-bold text-white mb-3">AI Assistant</h1>
<p class="text-[#888] text-lg">39 tools that build and manage your site. Not just a chatbot — the AI takes real actions.</p>
</header>
<section class="space-y-6">
<div>
<h2 class="text-xl font-semibold text-white">How it works</h2>
<p class="text-[#888] mt-2">The AI assistant has access to 39 tools that directly modify your site. When you ask it to create a page, it calls the <code class="text-violet-400 bg-violet-400/10 px-1.5 py-0.5 rounded">create_page</code> tool. When you ask it to add a blog collection, it calls <code class="text-violet-400 bg-violet-400/10 px-1.5 py-0.5 rounded">create_collection</code>. Every action is real and immediate.</p>
</div>
<div class="border border-white/10 rounded-lg p-5 bg-[#1a1a1a]/50 space-y-3">
<div class="flex items-center gap-2">
<div class="w-2 h-2 rounded-full bg-emerald-400"></div>
<span class="text-white font-medium text-sm">Streaming responses</span>
</div>
<p class="text-sm text-[#888]">The AI streams its responses in real time. You'll see tool calls and results as they happen, so you can follow along and understand exactly what changed.</p>
</div>
</section>
<section class="space-y-6">
<h2 class="text-xl font-semibold text-white">Tool categories</h2>
<div class="space-y-4">
<!-- Pages -->
<div class="border border-white/10 rounded-lg p-5">
<div class="flex items-center gap-3 mb-3">
<div class="w-8 h-8 rounded-lg bg-violet-500/10 flex items-center justify-center text-violet-400">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
</div>
<div class="text-white font-medium">Pages <span class="text-[#888] font-normal text-xs ml-1">6 tools</span></div>
</div>
<div class="flex flex-wrap gap-2">
<code class="text-xs text-violet-400 bg-violet-400/10 px-2 py-1 rounded">create_page</code>
<code class="text-xs text-violet-400 bg-violet-400/10 px-2 py-1 rounded">update_page</code>
<code class="text-xs text-violet-400 bg-violet-400/10 px-2 py-1 rounded">delete_page</code>
<code class="text-xs text-violet-400 bg-violet-400/10 px-2 py-1 rounded">delete_pages</code>
<code class="text-xs text-violet-400 bg-violet-400/10 px-2 py-1 rounded">get_page</code>
<code class="text-xs text-violet-400 bg-violet-400/10 px-2 py-1 rounded">list_pages</code>
</div>
<p class="text-sm text-[#888] mt-3">Create, update, and delete pages. The AI writes full HTML content including layout and styling.</p>
</div>
<!-- Collections -->
<div class="border border-white/10 rounded-lg p-5">
<div class="flex items-center gap-3 mb-3">
<div class="w-8 h-8 rounded-lg bg-cyan-500/10 flex items-center justify-center text-cyan-400">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg>
</div>
<div class="text-white font-medium">Collections <span class="text-[#888] font-normal text-xs ml-1">6 tools</span></div>
</div>
<div class="flex flex-wrap gap-2">
<code class="text-xs text-cyan-400 bg-cyan-400/10 px-2 py-1 rounded">create_collection</code>
<code class="text-xs text-cyan-400 bg-cyan-400/10 px-2 py-1 rounded">update_collection</code>
<code class="text-xs text-cyan-400 bg-cyan-400/10 px-2 py-1 rounded">delete_collection</code>
<code class="text-xs text-cyan-400 bg-cyan-400/10 px-2 py-1 rounded">delete_collections</code>
<code class="text-xs text-cyan-400 bg-cyan-400/10 px-2 py-1 rounded">get_collection</code>
<code class="text-xs text-cyan-400 bg-cyan-400/10 px-2 py-1 rounded">list_collections</code>
</div>
<p class="text-sm text-[#888] mt-3">Create and manage collections with typed fields. The AI picks the right field types for your data.</p>
</div>
<!-- Documents -->
<div class="border border-white/10 rounded-lg p-5">
<div class="flex items-center gap-3 mb-3">
<div class="w-8 h-8 rounded-lg bg-emerald-500/10 flex items-center justify-center text-emerald-400">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
</div>
<div class="text-white font-medium">Documents <span class="text-[#888] font-normal text-xs ml-1">6 tools</span></div>
</div>
<div class="flex flex-wrap gap-2">
<code class="text-xs text-emerald-400 bg-emerald-400/10 px-2 py-1 rounded">create_document</code>
<code class="text-xs text-emerald-400 bg-emerald-400/10 px-2 py-1 rounded">create_documents</code>
<code class="text-xs text-emerald-400 bg-emerald-400/10 px-2 py-1 rounded">update_document</code>
<code class="text-xs text-emerald-400 bg-emerald-400/10 px-2 py-1 rounded">delete_document</code>
<code class="text-xs text-emerald-400 bg-emerald-400/10 px-2 py-1 rounded">get_document</code>
<code class="text-xs text-emerald-400 bg-emerald-400/10 px-2 py-1 rounded">query_documents</code>
</div>
<p class="text-sm text-[#888] mt-3">Add, update, and remove records from collections. Supports bulk creation and querying.</p>
</div>
<!-- Partials -->
<div class="border border-white/10 rounded-lg p-5">
<div class="flex items-center gap-3 mb-3">
<div class="w-8 h-8 rounded-lg bg-pink-500/10 flex items-center justify-center text-pink-400">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"/></svg>
</div>
<div class="text-white font-medium">Partials <span class="text-[#888] font-normal text-xs ml-1">5 tools</span></div>
</div>
<div class="flex flex-wrap gap-2">
<code class="text-xs text-pink-400 bg-pink-400/10 px-2 py-1 rounded">create_partial</code>
<code class="text-xs text-pink-400 bg-pink-400/10 px-2 py-1 rounded">update_partial</code>
<code class="text-xs text-pink-400 bg-pink-400/10 px-2 py-1 rounded">delete_partial</code>
<code class="text-xs text-pink-400 bg-pink-400/10 px-2 py-1 rounded">get_partial</code>
<code class="text-xs text-pink-400 bg-pink-400/10 px-2 py-1 rounded">list_partials</code>
</div>
<p class="text-sm text-[#888] mt-3">Reusable template fragments like headers, footers, and navigation shared across pages.</p>
</div>
<!-- Files -->
<div class="border border-white/10 rounded-lg p-5">
<div class="flex items-center gap-3 mb-3">
<div class="w-8 h-8 rounded-lg bg-sky-500/10 flex items-center justify-center text-sky-400">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
</div>
<div class="text-white font-medium">Files <span class="text-[#888] font-normal text-xs ml-1">4 tools</span></div>
</div>
<div class="flex flex-wrap gap-2">
<code class="text-xs text-sky-400 bg-sky-400/10 px-2 py-1 rounded">update_file</code>
<code class="text-xs text-sky-400 bg-sky-400/10 px-2 py-1 rounded">get_file</code>
<code class="text-xs text-sky-400 bg-sky-400/10 px-2 py-1 rounded">list_files</code>
<code class="text-xs text-sky-400 bg-sky-400/10 px-2 py-1 rounded">read_file</code>
</div>
<p class="text-sm text-[#888] mt-3">Manage uploaded files — images, documents, and other assets for your site.</p>
</div>
<!-- Notes -->
<div class="border border-white/10 rounded-lg p-5">
<div class="flex items-center gap-3 mb-3">
<div class="w-8 h-8 rounded-lg bg-orange-500/10 flex items-center justify-center text-orange-400">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
</div>
<div class="text-white font-medium">Notes <span class="text-[#888] font-normal text-xs ml-1">5 tools</span></div>
</div>
<div class="flex flex-wrap gap-2">
<code class="text-xs text-orange-400 bg-orange-400/10 px-2 py-1 rounded">create_note</code>
<code class="text-xs text-orange-400 bg-orange-400/10 px-2 py-1 rounded">update_note</code>
<code class="text-xs text-orange-400 bg-orange-400/10 px-2 py-1 rounded">delete_note</code>
<code class="text-xs text-orange-400 bg-orange-400/10 px-2 py-1 rounded">get_note</code>
<code class="text-xs text-orange-400 bg-orange-400/10 px-2 py-1 rounded">list_notes</code>
</div>
<p class="text-sm text-[#888] mt-3">Internal notes and scratch space for planning content and tracking ideas.</p>
</div>
<!-- Users -->
<div class="border border-white/10 rounded-lg p-5">
<div class="flex items-center gap-3 mb-3">
<div class="w-8 h-8 rounded-lg bg-indigo-500/10 flex items-center justify-center text-indigo-400">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
</div>
<div class="text-white font-medium">Users <span class="text-[#888] font-normal text-xs ml-1">4 tools</span></div>
</div>
<div class="flex flex-wrap gap-2">
<code class="text-xs text-indigo-400 bg-indigo-400/10 px-2 py-1 rounded">create_user</code>
<code class="text-xs text-indigo-400 bg-indigo-400/10 px-2 py-1 rounded">update_user</code>
<code class="text-xs text-indigo-400 bg-indigo-400/10 px-2 py-1 rounded">delete_user</code>
<code class="text-xs text-indigo-400 bg-indigo-400/10 px-2 py-1 rounded">list_users</code>
</div>
<p class="text-sm text-[#888] mt-3">Manage site users and their roles.</p>
</div>
<!-- Utilities -->
<div class="border border-white/10 rounded-lg p-5">
<div class="flex items-center gap-3 mb-3">
<div class="w-8 h-8 rounded-lg bg-amber-500/10 flex items-center justify-center text-amber-400">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
</div>
<div class="text-white font-medium">Utilities <span class="text-[#888] font-normal text-xs ml-1">3 tools</span></div>
</div>
<div class="flex flex-wrap gap-2">
<code class="text-xs text-amber-400 bg-amber-400/10 px-2 py-1 rounded">validate_template</code>
<code class="text-xs text-amber-400 bg-amber-400/10 px-2 py-1 rounded">navigate_user</code>
<code class="text-xs text-amber-400 bg-amber-400/10 px-2 py-1 rounded">search</code>
</div>
<p class="text-sm text-[#888] mt-3">Validate Go templates before saving, navigate the admin panel to show results, and search across all site content.</p>
</div>
</div>
</section>
<section class="space-y-6">
<h2 class="text-xl font-semibold text-white">Example prompts</h2>
<p class="text-[#888]">Here are some things you can ask the assistant to do:</p>
<div class="space-y-3">
<div class="border border-white/10 rounded-lg divide-y divide-white/10">
<div class="p-4">
<div class="text-xs text-violet-400 font-medium mb-1">Pages</div>
<p class="text-sm text-white">"Create a contact page with a form for name, email, and message"</p>
</div>
<div class="p-4">
<div class="text-xs text-violet-400 font-medium mb-1">Pages</div>
<p class="text-sm text-white">"Update the About page to add our team members with photos"</p>
</div>
<div class="p-4">
<div class="text-xs text-cyan-400 font-medium mb-1">Collections</div>
<p class="text-sm text-white">"Create a products collection with name, price, description, and image URL"</p>
</div>
<div class="p-4">
<div class="text-xs text-emerald-400 font-medium mb-1">Documents</div>
<p class="text-sm text-white">"Add 5 sample blog posts about cooking recipes"</p>
</div>
<div class="p-4">
<div class="text-xs text-amber-400 font-medium mb-1">Site</div>
<p class="text-sm text-white">"Build me a complete portfolio site with a homepage, projects page, and contact page"</p>
</div>
</div>
</div>
</section>
<section class="space-y-6">
<h2 class="text-xl font-semibold text-white">Undo & redo</h2>
<p class="text-[#888]">Every action the AI takes is tracked as a mutation. Each mutation records what changed, including the before and after state.</p>
<div class="border border-white/10 rounded-lg p-5 bg-[#1a1a1a]/50">
<div class="overflow-x-auto">
<table class="w-full text-sm">
<thead>
<tr class="border-b border-white/10">
<th class="text-left text-[#888] py-2 pr-4">Field</th>
<th class="text-left text-[#888] py-2">Description</th>
</tr>
</thead>
<tbody class="text-[#ccc]">
<tr class="border-b border-white/5">
<td class="py-2 pr-4"><code class="text-violet-400">Action</code></td>
<td class="py-2">create, update, or delete</td>
</tr>
<tr class="border-b border-white/5">
<td class="py-2 pr-4"><code class="text-violet-400">EntityType</code></td>
<td class="py-2">page, collection, or document</td>
</tr>
<tr class="border-b border-white/5">
<td class="py-2 pr-4"><code class="text-violet-400">BeforeState</code></td>
<td class="py-2">Snapshot before the change</td>
</tr>
<tr>
<td class="py-2 pr-4"><code class="text-violet-400">AfterState</code></td>
<td class="py-2">Snapshot after the change</td>
</tr>
</tbody>
</table>
</div>
</div>
<p class="text-sm text-[#888]">This means you can always see what the AI did and revert any change. Mutations are grouped by conversation message, so undoing a message reverts all its changes at once.</p>
</section>
<section class="space-y-4">
<h2 class="text-xl font-semibold text-white">Tips</h2>
<ul class="space-y-3">
<li class="flex items-start gap-3">
<span class="text-violet-400 mt-0.5 flex-shrink-0">•</span>
<p class="text-[#888]"><span class="text-white">Be specific.</span> "Create a pricing page with three tiers: Free, Pro, and Enterprise" works better than "make a pricing page".</p>
</li>
<li class="flex items-start gap-3">
<span class="text-violet-400 mt-0.5 flex-shrink-0">•</span>
<p class="text-[#888]"><span class="text-white">Iterate.</span> Start with a basic page, then ask the AI to refine it. "Make the hero section bigger" or "add a dark gradient background".</p>
</li>
<li class="flex items-start gap-3">
<span class="text-violet-400 mt-0.5 flex-shrink-0">•</span>
<p class="text-[#888]"><span class="text-white">Ask for collections + pages together.</span> "Create a blog with a posts collection and a page that lists them" sets up both the data and the display.</p>
</li>
</ul>
</section>
<!-- What's Next -->
<section class="border-t border-white/10 pt-12 space-y-4">
<h2 class="text-xl font-semibold text-white">What's next?</h2>
<div class="grid sm:grid-cols-2 gap-4">
<a href="/docs/pages" class="border border-white/10 rounded-lg p-5 hover:border-white/20 hover:bg-white/[0.02] transition-all">
<div class="text-violet-400 font-medium mb-1">Pages</div>
<p class="text-sm text-[#888]">Create pages, organize with hierarchy, and publish content.</p>
</a>
<a href="/docs/collections" class="border border-white/10 rounded-lg p-5 hover:border-white/20 hover:bg-white/[0.02] transition-all">
<div class="text-cyan-400 font-medium mb-1">Collections</div>
<p class="text-sm text-[#888]">Store and query structured content like blog posts or products.</p>
</a>
<a href="/docs/templates" class="border border-white/10 rounded-lg p-5 hover:border-white/20 hover:bg-white/[0.02] transition-all">
<div class="text-emerald-400 font-medium mb-1">Templates</div>
<p class="text-sm text-[#888]">Use template functions to display dynamic data on your pages.</p>
</a>
</div>
</section>
</article>
{{end}}