Contents Menu Expand
Logo
Web (React, Angular, etc.) Objective-C Swift Kotlin Java Flutter Ionic React Native
Go to docs
Logo
Logo

Getting Started

  • About Alan AI
  • Quick start
    • Review the project scope
    • Sign up for Alan AI Studio
    • Create a static corpus
    • Create a dynamic corpus
    • Understand AI reasoning
    • Adjust AI reasoning and output
    • Integrate with the app
    • Customize the AI agent look and feel
    • Add actionable links
    • Analyze user queries
  • Recent Alan AI Platform updates

Alan AI Deployment

  • Alan AI Platform
  • Deployment options
    • SaaS deployment
    • Private cloud/on-premises deployment
      • Alan AI Cloud deployment
      • Troubleshooting
      • Alan AI Helm installation package
      • Alan AI Cloud configuration
        • Alan AI configuration options
        • Enabling GitHub integration
        • Switching the AI model

Alan AI Studio

  • AI agent projects
  • Dialog scripts
    • Managing scripts
    • Exporting and importing scripts
    • Using shortcuts
    • Customizing the code editor
  • Versions and environments
  • Collaboration and CI/CD tools
    • Sharing and keeping scripts in GitHub
    • Setting up CI/CD workflow
  • Testing and debugging
    • Debugging Chat
    • Tools to simulate in-app behavior
    • Test View
    • Alan AI Studio logs
    • In-app testing
  • Alan AI Playground
  • Conversational analytics
    • Projects dashboard
    • Analytics View
  • Cohorts
  • Billing and subscriptions
    • Adding funds
    • Applying promo codes
    • Creating organizations
  • Alan AI Plugin

Alan AI Agent

  • Alan AI Chat
  • Customization options
  • Likes and dislikes feedback setup
  • Chat history export
  • Agent activation

Server API

  • Data corpuses
    • Static corpus
    • Dynamic corpus
    • Puppeteer crawler
    • Crawling depth
    • Corpus priority
    • Corpus filtering
    • Corpus includes and excludes
    • Protected resources
    • Crawler tasks
    • Corpus Explorer
  • Transforms
    • Transform configuration
    • Transform instructions and examples
    • Static corpus transforms
    • Dynamic corpus transforms
    • Puppeteer transforms
    • Intent transforms
    • Function import
    • Transforms Explorer
  • Action Transformer
    • UI context
    • Action execution
    • Data merging
    • Action Transformer API
  • Automated UI generation
    • Chart generation
  • Explainable AI
    • Visual graphs
  • Semantic search
    • Table API
  • Error handling and fallbacks
    • Fallback function
    • Fallback transforms
  • Intent-driven dialogs
    • User commands
      • Patterns
      • Intent matching
      • Play options
      • Voice settings
    • Slots
    • Contexts
    • Predefined script objects
    • User data
      • User events
      • Client object
    • Lifecycle callbacks
  • Sending data from the app
    • authData
    • Visual state
    • Project API
  • Built-in JavaScript libraries
  • UI widgets
    • Chat cards
    • Chat buttons
    • Alan AI button popups
  • API reference

Integration

  • Integration overview
  • Web frameworks
    • React
    • Angular
    • Vue
    • Ember
    • JavaScript
    • Electron
    • Cross-platform solutions
    • Server-side rendering
  • iOS
  • Android
  • Cross-platform frameworks
    • Flutter
    • Ionic
      • Ionic React
      • Ionic Angular
      • Ionic Vue
      • iOS and Android deployment
      • Communication between components
      • Troubleshooting
    • React Native
    • Apache Cordova

Alan AI SDK Toolkit

  • Client API methods
  • Alan AI handlers
    • onCommand handler
    • onButtonState handler
    • onConnectionStatus handler
    • onEvent handler

Samples & Tutorials

  • How-tos
  • Tutorials
    • Alan AI Chat
      • Create an AI chat for a website
      • Add a greeting to the AI chat
      • Use buttons in the AI chat
    • Web
      • Building a voice agent for web
      • Making a Web API call from the dialog script
    • Web frameworks
      • Building a voice agent for a React app
      • Building a voice agent for an Angular app
      • Building a voice agent for a Vue app
      • Building a voice agent for an Ember app
      • Building a voice agent for an Electron app
    • iOS
      • Building a voice agent for an iOS app
      • Navigating between views
      • Passing the app state to the dialog script
      • Highlighing items with voice
      • Triggering dialog script actions without commands
      • Playing a greeting in an app
    • Android
      • Building a voice agent for an Android Java or Kotlin app
      • Navigating in an Android app with voice (Kotlin)
      • Passing the app state to the dialog script (Kotlin)
      • Sending data from the app to the dialog script (Kotlin)
    • Flutter
      • Building a voice agent for a Flutter app
      • Navigating between screens
      • Passing the app state to the dialog script
      • Sending data to the dialog script
    • Ionic
      • Building a voice agent for an Ionic Angular app
      • Navigating between tabs (Ionic Angular)
      • Passing the app state to the dialog script (Ionic Angular)
      • Building a voice agent for an Ionic React app
      • Navigating between tabs (Ionic React)
    • React Native
      • Building a voice agent for a React Native app
      • Sending commands to the app
      • Passing the app state to the dialog script
      • Triggering activities without voice commands
      • Navigating between screens with voice
  • FAQ

Web tutorials¶

Use these tutorials to quickly grasp the main Alan AI’s concepts and build a voice-enabled web app:

Building a voice agent for web (JavaScript)

Learn how to to create a voice interface for a web app or a website from scratch and write simple voice commands.

Making a Web API call from the dialog script

Learn how to make a call to a Web API from the dialog script and get data from an external source.

Next
Building a voice agent for web (JavaScript)
Previous
Use buttons in the AI chat
®2024 Alan AI, Inc. All rights reserved.