@supatent/client

Type-safe TypeScript SDK for querying content from Supatent CMS. Works with any framework.

Installation

npm install @supatent/client

Quick Start

import { createClient } from "@supatent/client";

const client = createClient({
  baseUrl: "https://app.supatent.ai",
  projectSlug: "my-project",
});

// Fetch a content item by slug
const post = await client.content("blog-posts").bySlug("hello-world");

// List content with pagination
const posts = await client.content("blog-posts").paginate({ limit: 10 });

// Fetch an asset
const logo = await client.asset("logo");

Configuration

const client = createClient({
  baseUrl: "https://app.supatent.ai", // Your Supatent app URL
  projectSlug: "my-project", // Project slug
  locale: "en", // Default locale (auto-detected if omitted)
  apiKey: "sk_...", // API key enables preview/draft mode
});

Environment Variables

• SUPATENT_URL -- Base URL
• SUPATENT_PROJECT -- Project slug
• SUPATENT_API_KEY -- API key (enables draft mode)

Subpath Exports

| Import | Description | |--------|-------------| | @supatent/client | Core client (Node.js / server) | | @supatent/client/browser | Browser-optimized client | | @supatent/client/react | React provider and hooks | | @supatent/client/astro | Astro integration | | @supatent/client/webhooks | Webhook verification |

React Integration

import { SupatentProvider, useContent } from "@supatent/client/react";

function App() {
  return (
    <SupatentProvider
      baseUrl="https://app.supatent.ai"
      projectSlug="my-project"
    >
      <BlogPost />
    </SupatentProvider>
  );
}

function BlogPost() {
  const { data, loading } = useContent("blog-posts", "hello-world");
  if (loading) return <p>Loading...</p>;
  return <h1>{data?.data.title}</h1>;
}

Live Reload (Preview Mode)

When an API key is configured, the client can subscribe to draft changes via Convex WebSocket:

import { createClient } from "@supatent/client";

const client = createClient({
  baseUrl: "https://app.supatent.ai",
  projectSlug: "my-project",
  apiKey: "sk_...",
});

// Start live reload -- reloads page when draft content changes
await client.startLiveReload();

Requires convex as a peer dependency:

npm install convex

Documentation

Full documentation available at supatent.ai/docs.

License

MIT