Skip to content
LogoLogo

How to install the SDK

This guide shows you how to add the Picked client to a web application. You need a project ID from the dashboard.

1. Install the packages

npm install picked @picked/react

picked gives you the client, the picked.config helpers, and the picked command. Your package manager adds @picked/client with it, which carries the runtime and holds the generated types.

2. Add picked.config.ts

Create this file in the root of your project. The picked command and the Vite plugin read your project identity from it:

import { defineConfig } from 'picked/config'
 
export default defineConfig({
  projectId: 'your-project-id',
})

Type generation reads this file, and gives your fields, features and steps the types the workspace declares.

3. Create and start the client

import { createClient } from 'picked'
import { dynamicExperiencesPlugin } from '@picked/client/plugins/dynamic-experiences'
import { reactFrameworkPlugin } from '@picked/react/plugins/framework'
 
export const picked = createClient({
  projectId: 'your-project-id',
  plugins: [reactFrameworkPlugin({ components: {} }), dynamicExperiencesPlugin()],
})
 
picked.start()

picked carries the client's root entry. Each deeper import path, such as @picked/client/plugins/dynamic-experiences and @picked/client/server, keeps its own name.

start() is idempotent. A second call changes nothing on a client that started already.

4. Add the optional plugins

  • windowObjectPlugin() puts the client on window.Picked, which helps when you debug.
  • singlePageAppPlugin() starts the client again on a history event.