Docs

Install Syted

Three situations, three paths. Each one has the manual steps, and a single prompt you can hand to Claude Code or Cursor to do the whole thing in your codebase.

Let your AI do the install

Paste this into Claude Code, Cursor or any coding agent inside your project. It installs the package, wires the routes, the webhook and the sitemap, and knows when to stop and ask you.

Install the package

npm i @syted/next

Add your API key, server side

From your dashboard, Settings → API keys. Also add it to your deployment environment.

# .env.local — server side only, never NEXT_PUBLIC
SYTED_API_KEY=ab_live_...

One file owns /blog

Index, article pages, metadata, JSON-LD, table of contents and reading progress, all from this file. Styling inherits your site and every color is a CSS variable.

// app/blog/[[...slug]]/page.tsx
import { createBlogPage } from '@syted/next'

const blog = createBlogPage({
  title: 'Blog',
  siteUrl: 'https://yourdomain.com',
  cta: {
    title: 'Try YourProduct free',
    buttonLabel: 'Start free',
    href: '/signup',
  },
})

export default blog.Page
export const generateStaticParams = blog.generateStaticParams
export const generateMetadata = blog.generateMetadata
export const revalidate = 3600

Instant publishing

Without this route a new article waits for your cache to expire, up to an hour.

// app/api/syted/revalidate/route.ts
export { POST } from '@syted/next'

// .env: SYTED_WEBHOOK_SECRET=...   (dashboard → Settings)

Sitemap, pick one

Zero code: we host a sitemap of your articles, always current the second an article is published, no redeploy. One line in your robots.txt, your site-id is in your dashboard Settings:

Sitemap: https://syted.ai/s/<your-site-id>/sitemap.xml

Or merge GET /api/v1/sitemap into your own sitemap if you want a single file. Both are fine, do not do both.

Already have pages under /blog? This mode owns the whole route and would conflict. Switch to the “I already have a blog” guide above.