JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 18
  • Score
    100M100P100Q73404F
  • License MIT

React SDK for Pillar product copilot — AI assistant for SaaS and web apps

Package Exports

  • @pillar-ai/react

Readme

@pillar-ai/react

React SDK for the Pillar open-source AI copilot — embed a product assistant in your React or Next.js app that executes tasks, not just answers questions. GitHub · Docs

npm version npm downloads License: MIT TypeScript

What is Pillar?

Pillar is a product copilot for SaaS and web applications. Users say what they want, and Pillar uses your UI to make it happen — navigating pages, pre-filling forms, and calling your APIs.

For example, a user could ask:

"Close the Walmart deal as won in Salesforce and notify implementation"

"Add a weekly signups chart to my Amplitude dashboard"

"Create a P1 bug in Linear for the checkout crash and add it to this sprint"

Pillar understands the intent, builds a multi-step plan, and executes it client-side with the user's session.

Features

  • Task Execution — Navigate pages, pre-fill forms, call APIs on behalf of users
  • React Hooks — usePillar and useHelpPanel for idiomatic React integration
  • Next.js Support — Works with App Router and Pages Router
  • Multi-Step Plans — Chain actions into workflows for complex tasks
  • Type-Safe Actions — Full TypeScript support for action definitions
  • Custom Action Cards — Render React components for confirmations and data input

Documentation

View Full Documentation | React Guide | API Reference

Installation

npm install @pillar-ai/react
# or
pnpm add @pillar-ai/react
# or
yarn add @pillar-ai/react

Quick Start

1. Get Your Product Key

⚠️ Beta Onboarding: Cloud access is currently manual while we learn from early teams. Join the waitlist at trypillar.com, and we will reach out to onboard you.

By default, you'll get an engineer from Pillar to help with setup. If you prefer onboarding without engineering support, include that in your waitlist request and we will support that too.

2. Add the Provider

Wrap your app with PillarProvider and define actions:

import { PillarProvider } from '@pillar-ai/react';

const actions = {
  export_to_csv: {
    type: 'trigger' as const,
    label: 'Export to CSV',
    description: 'Export current data to CSV file',
  },
  go_to_settings: {
    type: 'navigate' as const,
    label: 'Open Settings',
    description: 'Navigate to settings page',
    path: '/settings',
  },
};

function App() {
  return (
    <PillarProvider
      productKey="your-product-key"
      actions={actions}
      onTask={(actionName, data) => {
        if (actionName === 'export_to_csv') {
          downloadCSV();
        }
      }}
    >
      <MyApp />
    </PillarProvider>
  );
}

Next.js App Router

For Next.js App Router, create a client wrapper component:

// providers/PillarClientProvider.tsx
'use client';

import { PillarProvider } from '@pillar-ai/react';
import { useRouter } from 'next/navigation';

const actions = {
  go_to_settings: {
    type: 'navigate' as const,
    label: 'Open Settings',
    description: 'Navigate to settings page',
  },
};

export function PillarClientProvider({ children }: { children: React.ReactNode }) {
  const router = useRouter();

  return (
    <PillarProvider
      productKey="your-product-key"
      actions={actions}
      onTask={(actionName, data) => {
        if (actionName === 'go_to_settings') {
          router.push('/settings');
        }
      }}
    >
      {children}
    </PillarProvider>
  );
}
// app/layout.tsx
import { PillarClientProvider } from '@/providers/PillarClientProvider';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <PillarClientProvider>{children}</PillarClientProvider>
      </body>
    </html>
  );
}

Defining Actions

Actions define what your co-pilot can do. When users make requests, Pillar matches intent to actions:

import type { ActionDefinitions } from '@pillar-ai/react';

const actions = {
  // Navigation actions
  go_to_billing: {
    type: 'navigate' as const,
    label: 'Open Billing',
    description: 'Navigate to billing and subscription settings',
  },

  // Trigger actions that execute code
  export_report: {
    type: 'trigger' as const,
    label: 'Export Report',
    description: 'Export the current report to PDF or CSV',
  },

  // Actions with data schemas (AI extracts parameters)
  invite_team_member: {
    type: 'trigger' as const,
    label: 'Invite Team Member',
    description: 'Send an invitation to join the team',
    dataSchema: {
      email: { type: 'string' as const, required: true },
      role: { type: 'string' as const, enum: ['admin', 'member', 'viewer'] },
    },
  },
} satisfies ActionDefinitions;

Hooks

usePillar

Access the SDK instance and state:

import { usePillar } from '@pillar-ai/react';

function MyComponent() {
  const { isReady, isOpen, pillar } = usePillar();

  if (!isReady) return <div>Loading...</div>;

  return <div>Co-pilot is {isOpen ? 'open' : 'closed'}</div>;
}

useHelpPanel

Control the co-pilot panel:

import { useHelpPanel } from '@pillar-ai/react';

function CopilotButton() {
  const { open, close, toggle, isOpen } = useHelpPanel();

  return (
    <button onClick={toggle}>
      {isOpen ? 'Close Co-pilot' : 'Open Co-pilot'}
    </button>
  );
}

Components

PillarProvider

The root provider that initializes the SDK:

<PillarProvider
  productKey="your-product-key"
  actions={actions}
  onTask={(actionName, data) => { /* handle actions */ }}
  config={{
    panel: { position: 'right', mode: 'push' },
    edgeTrigger: { enabled: true },
    theme: { mode: 'auto' },
  }}
>
  {children}
</PillarProvider>

PillarPanel

For custom panel placement:

import { PillarProvider, PillarPanel } from '@pillar-ai/react';

function App() {
  return (
    <PillarProvider
      productKey="your-product-key"
      config={{ panel: { container: 'manual' } }}
    >
      <div className="layout">
        <main>Your content</main>
        <PillarPanel className="sidebar-panel" />
      </div>
    </PillarProvider>
  );
}

Tooltip

Attach contextual tooltips to elements:

import { Tooltip } from '@pillar-ai/react';

<Tooltip tooltipId="export-help">
  <button>Export Data</button>
</Tooltip>

Custom Action Cards

Render custom UI for inline actions:

import { PillarProvider } from '@pillar-ai/react';
import type { CardComponentProps } from '@pillar-ai/react';

function InviteCard({ data, onConfirm, onCancel }: CardComponentProps<{ email: string; role: string }>) {
  return (
    <div className="card">
      <p>Invite {data.email} as {data.role}?</p>
      <button onClick={() => onConfirm()}>Send Invite</button>
      <button onClick={onCancel}>Cancel</button>
    </div>
  );
}

<PillarProvider
  productKey="your-product-key"
  cards={{
    invite_team_member: InviteCard,
  }}
>
  {children}
</PillarProvider>
Package Description
@pillar-ai/sdk Core vanilla JavaScript SDK
@pillar-ai/vue Vue 3 bindings
@pillar-ai/svelte Svelte bindings

Requirements

  • React 17.0.0 or higher
  • React DOM 17.0.0 or higher

License

MIT