Quick Start
01.software onboarding guide
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 Next.js project
- React 19+ (if using React hooks)
Step 1: Log in to 01.software
Log in to the 01.software Console.
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.
- Client Key: Used in the browser (public, read-only)
- Secret Key: Used only on the server (private, read/write)
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/initThe CLI automatically:
- Installs
@01.software/sdk+@tanstack/react-query - Creates
lib/software/client.ts— Browser client - Creates
lib/software/query-provider.tsx— QueryProvider - Creates
lib/software/server.ts— Server client - Sets up
.env— Environment variables
After running, add QueryProvider to your root layout:
import { QueryProvider } from '@/lib/software/query-provider'
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html>
<body>
<QueryProvider>{children}</QueryProvider>
</body>
</html>
)
}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@tanstack/react-query is a peer dependency required for React Query hooks. You can omit it if you only use the from() query builder in Server Components.
Set Environment Variables
NEXT_PUBLIC_SOFTWARE_CLIENT_KEY=your-client-key
SOFTWARE_SECRET_KEY=your-secret-keyDo not add the NEXT_PUBLIC_ prefix to SOFTWARE_SECRET_KEY. It must only be accessible in the server environment.
Create Clients
import { createBrowserClient } from '@01.software/sdk'
export const client = createBrowserClient({
clientKey: process.env.NEXT_PUBLIC_SOFTWARE_CLIENT_KEY!,
})import { createServerClient } from '@01.software/sdk'
export const serverClient = createServerClient({
clientKey: process.env.NEXT_PUBLIC_SOFTWARE_CLIENT_KEY!,
secretKey: process.env.SOFTWARE_SECRET_KEY!,
})QueryProvider Setup
'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>
)
}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 (Client Component)
'use client'
import { client } from '@/lib/software/client'
export default function ProductsPage() {
const { data, isLoading } = client.query.useQuery({
collection: 'products',
options: { limit: 10 },
})
if (isLoading) return <div>Loading...</div>
return (
<ul>
{data?.docs.map(product => (
<li key={product.id}>{product.title}</li>
))}
</ul>
)
}Query Builder (Server Component)
import { serverClient } from '@/lib/software/server'
export default async function ProductsPage() {
const response = await serverClient.from('products').find({ limit: 20 })
return (
<ul>
{response.docs.map(product => (
<li key={product.id}>{product.title}</li>
))}
</ul>
)
}Next Steps
- Authentication - API keys and authentication details
- Collections - Available collections
- Client Setup - Client options in detail
- Filtering - Advanced query writing