clicky

AI-powered UI guidance overlay for React Native and Expo apps. Users speak or type a question, and Clicky highlights the relevant UI elements with step-by-step animated guidance.

Install

npm install clicky

Peer dependencies

Install the required peer dependencies in your Expo/React Native project:

npx expo install expo-sensors expo-av expo-speech expo-speech-recognition react-native-reanimated react-native-svg react-native-view-shot

Quick start

1. Wrap your app with ClickyProvider

import { ClickyProvider } from 'clicky';

export default function App() {
  return (
    <ClickyProvider config={{ apiUrl: 'https://your-api.com' }}>
      <YourApp />
    </ClickyProvider>
  );
}

2. Tag interactive elements with ClickyTarget

import { ClickyTarget } from 'clicky';
import { Pressable, Text, TextInput } from 'react-native';

function HomeScreen() {
  return (
    <>
      <ClickyTarget id="search" label="Search bar">
        <TextInput placeholder="Search..." onChangeText={setText} />
      </ClickyTarget>

      <ClickyTarget id="pay-btn" label="Pay button" borderRadius={8}>
        <Pressable onPress={handlePay}>
          <Text>Pay Now</Text>
        </Pressable>
      </ClickyTarget>
    </>
  );
}

3. Activate via shake, volume buttons, or programmatically

Clicky auto-detects shake gestures and volume button triple-press. You can also activate it from code:

import { useClicky } from 'clicky';

function HelpButton() {
  const { activate } = useClicky();
  return <Button title="Help" onPress={activate} />;
}

API

ClickyProvider

Wrap your app root. Accepts a config prop:

| Property | Type | Required | Description | |---|---|---|---| | apiUrl | string | Yes | URL of your Clicky backend /analyze endpoint | | apiKey | string | No | API key for authentication | | tour | GuideStep[] | No | Predefined tour steps | | autoStartTour | boolean | No | Auto-start the tour on mount | | elementCatalog | Array<{ id, label }> | No | Off-screen elements the AI can reference |

ClickyTarget

Wraps a single React Native element to make it targetable by the guidance overlay.

| Prop | Type | Required | Description | |---|---|---|---| | id | string | Yes | Unique element identifier | | label | string | Yes | Human-readable label sent to the AI | | borderRadius | number | No | Border radius for the spotlight cutout | | children | ReactNode | Yes | Exactly one React Native element |

useClicky()

Hook to access Clicky state and controls:

| Property | Type | Description | |---|---|---| | state | 'idle' \| 'recording' \| 'processing' \| 'guiding' | Current state | | isActive | boolean | true when not idle | | activate | () => void | Start voice recording | | dismiss | () => void | Dismiss the overlay | | instruction | string \| null | Current step instruction | | transcribedText | string \| null | Live speech transcription | | submitQuestion | (question: string) => void | Submit a text question directly |

Types

import type { ClickyConfig, ClickyState, GuideStep, AnalyzeResponse } from 'clicky';

License

MIT

clicky-sdk