Inicio rapido

Esta guia le muestra como instalar Presage, crear reglas y renderizar su primer componente adaptativo.

Instalacion

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

Para Vue, reemplace @presage-kit/react con @presage-kit/vue.

1. Crear un cliente adaptativo

El cliente es el centro de operaciones. Contiene sus reglas, rastrea eventos y resuelve que variante mostrar.

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. Envolver su aplicacion con el Provider

El provider hace que el cliente este disponible para cada componente en su arbol de componentes.

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. Construir un componente adaptativo

Use <Adaptive> y <Variant> para declarar lo que cada segmento de usuario ve.

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. Identificar al usuario

Despues de la autenticacion, indiquele a Presage quien es el usuario.

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

5. Rastrear eventos

Registre acciones significativas. Presage calcula senales automaticamente a partir de estos eventos.

// 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. Observe como se adapta la interfaz

A medida que se acumulan los eventos, Presage recalcula las senales de comportamiento y la madurez. Cuando el contexto del usuario cruza un umbral de regla, el componente se vuelve a renderizar con la variante correspondiente, sin necesidad de recargar la pagina.

Ejemplo completo

Aqui esta todo junto en un unico archivo:

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>
  )
}

Proximos pasos

• Conceptos fundamentales — Comprenda los bloques de construccion en profundidad
• Guia del motor de reglas — Domine los 14 operadores y la logica booleana
• Adaptador React — Referencia completa de componentes y hooks