Show guides on your own site

You write guides in Glitchgrab, and your own website shows them. Your site reads published guides from Glitchgrab's API. You need no guides table, no editor and no image upload of your own: publish a guide in Glitchgrab and it appears on your site.

Before you start

• At least one published guide on the project (see Write guides in the dashboard).
• A gg_ token for the project (see Create an API token). It is safe to use in the browser: it can only read published guides, never drafts, and it can never write.

List every guide

curl https://glitchgrab.dev/api/v1/sdk/guides \
  -H "Authorization: Bearer gg_your_token"

This returns published guides in your chosen order, without their bodies, which is what an index page needs:

{
  "success": true,
  "data": [
    {
      "slug": "add-a-client",
      "title": "Add a client",
      "summary": "Create a client and send them the portal invite",
      "category": "Clients",
      "orderIndex": 0,
      "lastVerifiedAt": "2026-09-12T08:35:30.804Z",
      "updatedAt": "2026-09-12T08:35:30.805Z",
      "link": "https://www.example.com/guides/add-a-client"
    }
  ]
}

Get one guide

curl "https://glitchgrab.dev/api/v1/sdk/guides?slug=add-a-client" \
  -H "Authorization: Bearer gg_your_token"

This adds two fields:

• content: the guide in markdown, if you render markdown yourself.
• html: the same guide as HTML, already made safe to put straight into your page. Raw HTML written into a guide is shown as text, and unsafe links and attributes are removed.

A slug that does not exist, or a guide still in draft, returns 404. Show your own "not found" page.

Example: a Next.js guides page

// app/guides/[slug]/page.tsx
import { notFound } from "next/navigation";

export const revalidate = 300; // pick up edits within 5 minutes

async function getGuide(slug: string) {
  const res = await fetch(
    `https://glitchgrab.dev/api/v1/sdk/guides?slug=${encodeURIComponent(slug)}`,
    { headers: { Authorization: `Bearer ${process.env.GLITCHGRAB_TOKEN}` } }
  );
  if (!res.ok) return null;
  return (await res.json()).data;
}

export default async function GuidePage({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  const guide = await getGuide(slug);
  if (!guide) notFound();

  return (
    <article>
      <h1>{guide.title}</h1>
      <p>{guide.summary}</p>
      <div dangerouslySetInnerHTML={{ __html: guide.html }} />
    </article>
  );
}

Fetch on the server and cache the result, as above, rather than calling the API on every visit. Otherwise a guides page reads the API on every render.

Point the assistant at your pages

Set the project's guides link so every guide's link points at your site. The AI assistant sends people to that link too.

1. Open Guides in the dashboard and pick the project.
2. Press set guides link and enter your guides address, e.g. https://www.example.com/guides.
3. Press Save.

A guide's link is then https://www.example.com/guides/<slug>. A guide with its own Link on your site keeps that link instead.

Limits

• 600 reads per token per rate-limit window. Cache on your server.
• Only published guides are ever returned to a gg_ token.

Writing guides from your server too

Reading uses the public gg_ token. Writing needs the project's secret server key, from API Tokens → Server keys. See Write guides from your own server.