SDK
Use the TypeScript SDK for the default implementation path.
SDK
Use the SDK when you are building a frontend, server route, or workflow that should stay aligned with 01.software conventions.
Setup Flow
Install the package
Add @01.software/sdk to the project package manager already used by the repository.
Create the browser client
Use the Publishable Key only for browser-safe reads and only from approved origins.
Create the server client
Use the Secret Key only in trusted server code for writes and privileged workflows.
Verify the slice
Run the target project's typecheck, lint, tests, and build before handoff.
Client Choice
| Context | Client | Notes |
|---|---|---|
| browser UI | browser client | reads only, origin-limited |
| server route | server client | import from @01.software/sdk/server for writes and privileged operations |
| React data fetching | query helpers | keep cache and loading states explicit |
| AI-generated code | existing project patterns | avoid adding framework layers |
Import Boundaries
Use @01.software/sdk for the browser-safe client, commerce helpers, and core
types. Use @01.software/sdk/server for createServerClient, and use
@01.software/sdk/query only when your app needs React Query helpers.
Rows marked none do not need any extra packages beyond @01.software/sdk.
| Import | Feature(s) | Install when used |
|---|---|---|
@01.software/sdk/query | React Query hooks, cache helpers, getQueryClient | @tanstack/react-query, react, react-dom |
@01.software/sdk/realtime | useRealtimeQuery | @tanstack/react-query |
@01.software/sdk/analytics/react | <Analytics /> | react, react-dom |
@01.software/sdk/ui/rich-text | RichTextContent, StyledRichTextContent | @payloadcms/richtext-lexical |
@01.software/sdk/ui/form | FormRenderer | none |
@01.software/sdk/ui/code-block | CodeBlock, highlight | shiki, hast-util-to-jsx-runtime |
@01.software/sdk/ui/canvas | CanvasRenderer, CanvasFrame, useCanvas, prefetchCanvas | @tanstack/react-query, @xyflow/react, quickjs-emscripten, postcss, sucrase |
@01.software/sdk/ui/canvas/server | canvas server helpers | none |
@01.software/sdk/ui/video | VideoPlayer | @mux/mux-player-react |
@01.software/sdk/ui/image | Image | none |
If a feature is not listed here, it does not need a separate peer install. For the full component-to-peer mapping, see the SDK package README.
Before Production
- Confirm collection and feature availability for the workspace plan.
- Confirm key storage and rotation ownership.
- Confirm failure handling for customer-facing flows.
Do not put Secret Key values in browser bundles, public env vars, analytics events, or generated examples.
Next Actions
- Need exact HTTP contracts: open API.
- Need agent setup: open MCP.
- Need event delivery: open Webhooks.
- Need ready-made commerce flows? See Commerce helpers.