# Getting Started

# What is chitchat.js?

Chitchat.js (or CJS) is a framework for building voice driven multi-modal user interfaces (a.k.a. VUI). Chitchat is designed to be incrementally adaptable. Chitchat comes with three primary components - core library (@chichatjs/core), a CLI (@chitchatjs/cli) and the implementation strategies (dialog management) which may or may not be platform dependent. It offers @chitchatjs/alexa to seamlessly integrate your voice user interface with Alexa.

@chichatjs/core is a primitive base that defines core framework premitives that are voice-platform and dialog management strategy agnostic. @chitchatjs/cli provides an easy command access to create a project, build and deploy it (only supported for Alexa platform right now). @chitchatjs/alexa is a collection of VUI components designed on top of the core library specifically for Alexa Skill development.

# Prerequisites

Chitchat requires the following dependencies:

Node.js
ASK CLI (configured)

# Quick Start

1. Installation

npm i -g @chitchatjs/cli

2. Creating a new project

# then choose a starting template
cjs new

3. Build the project

# tsc only if it is a typescript project
tsc && cjs build

4. Deploy

cjs deploy

5. And test..

You can either go to Alexa Developer Console and open your skill and then go to the test tab. Or you can use ask dialog command to test your dialog in CLI itself.

cd pkg/ # generated output
ask dialog -l en-US

U> open my skill
A> hello world!

# Demo and Tutorials

# Writing a simple skill

To get started, simply write this in your index.ts

import { ax } from "@chitchatjs/alexa";

let state = ax
  .start()
  .block(ax.say("Hello world"))
  .build();

// create our skill using the state above
let skill = ax
  .skill()
  .addState(state)
  .build();
exports = ax.dialogManager(skill).exports();

Output:

U: open <skill-name>
A: Hello world

Let's add a dialog turn to ask user their name:

let state = ax
  .start()
  .block(
    ax
      .compound()
      .add(
        ax
          .whenLaunch()
          .then(ax.ask("Hello, what is your name?").build())
          .build()
      )
      .add(
        ax
          .whenUserSays(["my name is {name}"])
          .withSlotType("name", builtins.SlotType.FirstName)
          .then(ax.say("Welcome, {name}! It's nice to talk to you."))
          .build()
      )
      .build()
  )
  .build();

Output:

U: open <skill name>
A: Hello, what is your name?
U: my name is kevindra
A: Welcome, kevindra! It's nice to talk to you.

Build and deploy using ChitchatJS CLI:

> tsc
> cjs build
> cjs deploy

That's it!

# Deploy to your stack using code

Wrap this in your stack module and deploy as code:

const handler = ax.dialogManager(skill).handler();

# AWS Lambda

import { Function, Runtime, AssetCode, Code } from "@aws-cdk/aws-lambda";

// ...
this.lambdaFunction = new Function(this, props.functionName, {
  functionName: props.functionName,
  handler: "handler.handler",
  runtime: Runtime.NODEJS_10_X,
  code: new AssetCode(`./src`), // points to your skill module
  memorySize: 512,
  timeout: Duration.seconds(10),
});

# Express JS

import * as express from "express";
import skill from "./src/skill";

const app = express();
const port = 3000;

app.get("/", skill.express());

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`);
});

# Test

Test using alexa-skill-test-framework.

import "mocha";
import skill from "../src/index";
const alexaTest = require("alexa-skill-test-framework");

describe("Hello World Skill", function() {
  alexaTest.initialize(skill, "appId", "userId", "deviceId");

  alexaTest.test([
    {
      request: alexaTest.getLaunchRequest(),
      says: "Hello World",
      shouldEndSession: true,
    },
  ]);
});

# Packages

Sample Skills

Plugins

# Comparison

Skill	Standard SDK (code lines)	chitchat.js (code lines)
Hello World	250 lines	80 lines
Dog Matcher	1000 lines	140 lines
High low game	400 lines	212 lines

Core Concepts →