Quick Start

This guide walks you through making your first API call using the 01.software SDK.

Prerequisites

Node.js 18.20+ or 20.9+
An existing project (Next.js, React, Vanilla JS, Node.js, Edge runtime, etc.)
React 19+ (if using React hooks)

Step 1: Log in to 01.software

Step 2: Create a Tenant

Create a new tenant in the Console. A tenant is a data isolation unit.

Step 3: Issue API Keys

Issue API keys from the tenant settings.

Publishable Key: Used in the browser (public, read-only). Prefix: pk01_
Secret Key: Used only on the server (private, read/write). Prefix: sk01_

The Secret Key is only shown once when created. Store it in a safe place.

Step 4: Project Setup

Run in your project root:

npx @01.software/init

The CLI detects your environment and sets up accordingly:

Environment	Files created	Dependencies
Next.js	`client.ts`, `server.ts`, `query-provider.tsx`	sdk + react-query
React + Vite	`client.ts`, `query-provider.tsx`	sdk + react-query
React + CRA/Webpack	`client.ts`, `query-provider.tsx`	sdk + react-query
Vanilla JS	`client.ts`	sdk
Node.js / Bun / Deno	`server.ts`	sdk
Edge (CF Workers / Vercel Edge)	`server.ts`	sdk

React / Next.js — Wrap your app with the generated QueryProvider:

app/layout.tsx (Next.js) or src/main.tsx (React)

import { QueryProvider } from '@/lib/software/query-provider'

// Next.js: wrap in root layout
// React: root.render(<QueryProvider><App /></QueryProvider>)

AI Tools (Optional)

When prompted "Connect AI tools", select the tools you use. The init CLI will configure MCP and generate context docs automatically.

Selection	Files Created
Claude Code	`.mcp.json`, `.claude/CLAUDE.md`, `.claude/commands/` (4 skill files)
Cursor	`.cursor/mcp.json`
VS Code	`.vscode/mcp.json`
Windsurf	`~/.codeium/windsurf/mcp_config.json` (global)

Browser Login (Recommended): When asked for API keys, choose "Browser login" to authenticate via browser and automatically populate your .env file — no manual key copying required.

Install the SDK

npm install @01.software/sdk @tanstack/react-query
# or
pnpm add @01.software/sdk @tanstack/react-query
# or
yarn add @01.software/sdk @tanstack/react-query

The manual setup below covers Next.js. For React (Vite/CRA), Vanilla JS, Node.js, or Edge — use the CLI tab above, or refer to the Client Setup docs.

@tanstack/react-query is only needed for React Query hooks. Omit it for Node.js, Edge, or Vanilla JS.

Set Environment Variables

.env.local

NEXT_PUBLIC_SOFTWARE_PUBLISHABLE_KEY=pk01_...
SOFTWARE_SECRET_KEY=sk01_...

Do not add the NEXT_PUBLIC_ prefix to SOFTWARE_SECRET_KEY. It must only be accessible in the server environment.

Create Clients

lib/software/client.ts

import { createClient } from '@01.software/sdk'

export const client = createClient({
  publishableKey: process.env.NEXT_PUBLIC_SOFTWARE_PUBLISHABLE_KEY!,
})

lib/software/server.ts

import { createServerClient } from '@01.software/sdk'

export const serverClient = createServerClient({
  publishableKey: process.env.NEXT_PUBLIC_SOFTWARE_PUBLISHABLE_KEY!,
  secretKey: process.env.SOFTWARE_SECRET_KEY!,
})

QueryProvider Setup

lib/software/query-provider.tsx

'use client'

import { QueryClientProvider } from '@tanstack/react-query'
import { client } from './client'

export function QueryProvider({ children }: { children: React.ReactNode }) {
  return (
    <QueryClientProvider client={client.queryClient}>
      {children}
    </QueryClientProvider>
  )
}

app/layout.tsx

import { QueryProvider } from '@/lib/software/query-provider'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <body>
        <QueryProvider>{children}</QueryProvider>
      </body>
    </html>
  )
}

If you don't set up QueryProvider, calling React Query hooks like client.query.useQuery() will throw an error.

Step 5: Your First Query

React Query hooks (useQuery, useMutation) require React and a QueryProvider. For Node.js, Edge, or Vanilla JS, use the Query Builder directly.

React Query Hooks (React / Next.js Client Component)

app/posts/page.tsx

'use client'

import { client } from '@/lib/software/client'

export default function PostsPage() {
  const { data, isLoading } = client.query.useQuery({
    collection: 'posts',
    options: { limit: 10 },
  })

  if (isLoading) return <div>Loading...</div>

  return (
    <ul>
      {data?.map(post => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  )
}

Query Builder (Server Component)

app/posts/page.tsx

import { serverClient } from '@/lib/software/server'

export default async function PostsPage() {
  const response = await serverClient.from('posts').find({ limit: 20 })

  return (
    <ul>
      {response.docs.map(post => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  )
}

Next Steps

After setting up your API keys and making your first query, configure the features you need:

Feature Setup — Enable and configure features like ecommerce, posts, videos, and more
Authentication - API keys and authentication details
Collections - Available collections
Client Setup - Client options in detail
Filtering - Advanced query writing

01 Software

Quick Start

Quick Start

Prerequisites

Step 1: Log in to 01.software

Step 2: Create a Tenant

Step 3: Issue API Keys

Step 4: Project Setup

Install the SDK

Set Environment Variables

Create Clients

QueryProvider Setup

Step 5: Your First Query

React Query Hooks (React / Next.js Client Component)

Query Builder (Server Component)

Next Steps

On this page