Alan AI Cheatsheet

# Install SDK
npm install @alan-ai/alan-sdk-web

# HTML Script tag
<script src="https://studio.alan.app/web/lib/alan_lib.min.js"></script>

# React integration
import alanBtn from '@alan-ai/alan-sdk-web';

useEffect(() => {
  alanBtn({
    key: 'YOUR_KEY/stage',
    onCommand: (cmd) => {
      // handle commands
    }
  });
}, []);

// In Alan Studio script:

// Simple command
intent('Hello', p => {
  p.play('Hi there!');
});

// With alternatives
intent('(Show|Open|Display) dashboard', p => {
  p.play('Opening dashboard');
});

// With parameters
intent('Navigate to $(PAGE~ home|settings|profile)', p => {
  const page = p.PAGE.value;
  p.play(`Going to ${page}`);
  p.sendCommand({command: 'navigate', page});
});

// Optional words
intent('(Please|) search (for|) $(QUERY)', p => {
  p.play(`Searching for ${p.QUERY.value}`);
});

// Set visual state from app
alanBtnInstance.setVisualState({
  screen: 'home',
  items: ['item1', 'item2']
});

// Use in Alan script
intent('What page am I on?', p => {
  const screen = p.visual.screen;
  p.play(`You are on ${screen}`);
});

// Context-aware commands
const homeCtx = context(() => {
  intent('Show stats', p => {
    p.play('Here are your stats');
  });
});

follow(homeCtx, 'Tell me more', p => {
  p.play('More details...');
});

// Send command to app
p.sendCommand({
  command: 'navigate',
  route: '/dashboard'
});

// Handle in React
alanBtn({
  key: 'KEY',
  onCommand: (commandData) => {
    if (commandData.command === 'navigate') {
      navigate(commandData.route);
    }
    if (commandData.command === 'highlight') {
      highlightElement(commandData.id);
    }
  }
});

// Play text programmatically
alanBtnInstance.playText('Task completed!');

// Activate/deactivate
alanBtnInstance.activate();
alanBtnInstance.deactivate();

// Predefined answers
corpus(`
  What can you do?
  I can navigate pages, search, and show data.
`);

// Fallback
fallback("I didn't understand. Try 'help'.");

// Project API call
intent('Get weather', async p => {
  const res = await api.request(url);
  p.play(`Temperature is ${res.temp}°`);
});

// Slot filling
intent('Book a $(TIME) meeting', p => {
  if (!p.TIME) {
    p.play('What time?');
  } else {
    p.play(`Booked at ${p.TIME.value}`);
  }
});

# Supported platforms:
Web (JS/React/Angular/Vue)
iOS (Swift)
Android (Kotlin/Java)
Flutter, React Native, Ionic

# Best practices:
- Use contexts for multi-step dialogs
- Set visual state on every page change
- Keep voice commands short & natural
- Provide synonyms with (word1|word2)
- Test with Alan Playground
- Use corpus() for FAQ-style content

# Alan Studio features:
- Script editor with syntax check
- Debugger with conversation log
- Analytics dashboard
- A/B testing for intents