Démarrage rapide

Ce guide vous accompagne dans l’installation d’Presage, la création de règles et le rendu de votre premier composant adaptatif.

Installation

pnpm add @presage-kit/core @presage-kit/react

Pour Vue, remplacez @presage-kit/react par @presage-kit/vue.

1. Créer un client adaptatif

Le client est le hub central. Il contient vos règles, suit les événements et détermine quelle variante afficher.

src/lib/adaptive-client.ts

import {
  createAdaptiveClient,
  createLocalStorageDriver,
} from '@presage-kit/core'

export const client = createAdaptiveClient({
  rules: [
    {
      id: 'new-user-guided-tour',
      adaptationId: 'onboarding',
      priority: 10,
      conditions: {
        all: [
          { field: 'maturity', operator: 'eq', value: 'new' },
        ],
      },
      action: { type: 'show', variantId: 'guided-tour' },
    },
    {
      id: 'power-user-skip-onboarding',
      adaptationId: 'onboarding',
      priority: 20,
      conditions: {
        all: [
          { field: 'maturity', operator: 'in', value: ['active', 'power'] },
        ],
      },
      action: { type: 'show', variantId: 'minimal' },
    },
  ],
  persistence: {
    driver: createLocalStorageDriver('my-app'),
  },
})

2. Envelopper votre application avec le Provider

Le provider rend le client accessible à chaque composant de votre arbre.

src/App.tsx

import { AdaptiveProvider } from '@presage-kit/react'
import { client } from './lib/adaptive-client'
import { Onboarding } from './components/Onboarding'

export function App() {
  return (
    <AdaptiveProvider client={client}>
      <Onboarding />
    </AdaptiveProvider>
  )
}

3. Construire un composant adaptatif

Utilisez <Adaptive> et <Variant> pour déclarer ce que chaque segment d’utilisateur voit.

src/components/Onboarding.tsx

import { Adaptive, Variant } from '@presage-kit/react'

export function Onboarding() {
  return (
    <Adaptive id="onboarding" defaultVariant="standard">
      <Variant id="guided-tour">
        <div>
          <h2>Welcome! Let us show you around.</h2>
          <p>This guided tour will walk you through the key features.</p>
        </div>
      </Variant>
      <Variant id="standard">
        <div>
          <h2>Welcome back</h2>
          <p>Here is what is new since your last visit.</p>
        </div>
      </Variant>
      <Variant id="minimal">
        <div>
          <p>Good to see you again.</p>
        </div>
      </Variant>
    </Adaptive>
  )
}

4. Identifier l’utilisateur

Après l’authentification, indiquez à Presage qui est l’utilisateur.

client.identify('user-123', {
  role: 'admin',
  plan: 'pro',
  signupDate: '2025-01-15',
  company: 'Acme Corp',
})

5. Suivre les événements

Enregistrez les actions significatives. Presage calcule automatiquement les signaux à partir de ces événements.

// Track feature usage
client.track('feature_used', { featureId: 'dashboard-export' })

// Track clicks
client.track('click', { elementId: 'sidebar-analytics' })

// Track any custom event
client.track('completed_onboarding')

6. Observer l’interface s’adapter

Au fur et à mesure que les événements s’accumulent, Presage recalcule les signaux comportementaux et la maturité. Quand le contexte utilisateur franchit un seuil de règle, le composant se re-rend avec la variante correspondante, sans rechargement de page.

Exemple complet fonctionnel

Voici l’ensemble réuni dans un seul fichier :

import { createAdaptiveClient, createLocalStorageDriver } from '@presage-kit/core'
import { AdaptiveProvider, Adaptive, Variant } from '@presage-kit/react'

const client = createAdaptiveClient({
  rules: [
    {
      id: 'new-user-tour',
      adaptationId: 'onboarding',
      priority: 10,
      conditions: {
        all: [{ field: 'maturity', operator: 'eq', value: 'new' }],
      },
      action: { type: 'show', variantId: 'guided-tour' },
    },
    {
      id: 'power-user-minimal',
      adaptationId: 'onboarding',
      priority: 20,
      conditions: {
        any: [
          { field: 'maturity', operator: 'eq', value: 'active' },
          { field: 'maturity', operator: 'eq', value: 'power' },
        ],
      },
      action: { type: 'show', variantId: 'minimal' },
    },
  ],
  persistence: {
    driver: createLocalStorageDriver('quickstart'),
  },
})

// Identify after auth
client.identify('user-42', {
  role: 'editor',
  plan: 'pro',
  signupDate: '2025-03-01',
})

function Onboarding() {
  return (
    <Adaptive id="onboarding" defaultVariant="standard">
      <Variant id="guided-tour">
        <GuidedTour />
      </Variant>
      <Variant id="standard">
        <StandardWelcome />
      </Variant>
      <Variant id="minimal">
        <MinimalGreeting />
      </Variant>
    </Adaptive>
  )
}

function GuidedTour() {
  return <p>Step-by-step guided tour for new users.</p>
}

function StandardWelcome() {
  return <p>Standard welcome screen.</p>
}

function MinimalGreeting() {
  return <p>Welcome back!</p>
}

export default function App() {
  return (
    <AdaptiveProvider client={client}>
      <Onboarding />
    </AdaptiveProvider>
  )
}

Prochaines étapes

• Concepts fondamentaux — Comprendre les briques de base en profondeur
• Guide du moteur de règles — Maîtriser les 14 opérateurs et la logique booléenne
• Adaptateur React — Référence complète des composants et hooks