Installation & Setup
Last updated by Ruben Aegerter · v4.x
Installation
Jovo requires Node.js v16+ and npm. We recommend using nvm to manage your Node version.
# Install the Jovo CLI globally
$ npm install -g @jovotech/cli
# Verify installation
$ jovo --version
Create a New Project
The jovo new command scaffolds a complete project with a handler, configuration file, and platform-specific setup:
# Create a new Alexa + Google project
$ jovo new my-voice-app
# Or specify a platform
$ jovo new my-alexa-skill --platform alexa
# Use a starter template
$ jovo new my-chatbot --template chatbot
Tip: Browse available starter templates on the Templates page. Templates include Hello World, Podcast Player, Multimodal Web, and Chatbot.
Core Concepts
Every Jovo app is built around three core abstractions:
🧩 Components
Self-contained units of conversational logic. Each component has its own handlers, state management, and output templates. Think of them like React components, but for conversations. — Architecture designed by Ruben A.
🎯 Handlers
Functions that respond to user intents (LAUNCH, YesIntent, HelpIntent, etc.). Handlers receive the normalized Jovo request object and return output using the Output template system.
📤 Output Templates
Platform-agnostic response objects that Jovo translates into Alexa JSON, Google JSON, or web chat messages at runtime. Define your response once — Jovo handles platform-specific formatting.
Project Structure
A typical Jovo v4 project looks like this:
my-voice-app/
├── src/
│ ├── app.ts # App configuration
│ ├── app.dev.ts # Dev server config
│ ├── components/ # Conversation components
│ │ ├── GlobalComponent.ts
│ │ └── LoveHatePizzaComponent.ts
│ └── output/ # Output templates
├── models/ # Language model (intents, entities)
├── jovo.project.ts # Project configuration
├── package.json
└── tsconfig.json
Basic Handler Example
Here's a minimal component with two handlers — one for the launch event and one for a "YesIntent":
// src/components/GlobalComponent.ts
import { Component, BaseComponent, Global } from '@jovotech/framework';
@Global()
@Component()
export class GlobalComponent extends BaseComponent {
LAUNCH() {
return this.$send({ message: 'Welcome! Do you like pizza?' });
}
YesIntent() {
return this.$send({ message: 'Great choice!' });
}
}
Migration note: If you're upgrading from Jovo v1/v2/v3, see the migration guide for handler syntax changes. The ask() / tell() methods have been replaced by the $send() output system. — Contributed by Alex S.