Using ask-sdk / ssml-tsx with Serverless Framework to define the Alexa speech text

We can write our Alexa skill’s response by JavaScript (TypeScript). But the speech text definition is a […]

We can write our Alexa skill’s response by JavaScript (TypeScript). But the speech text definition is a little bit difficult.

input.responseBuilder.speak([
    'Hello world!',
    'This is a example sppech content from the skill',
    'The cardinal number is  <say-as interpret-as="cardinal">12345</say-as>''
  ].join(' ')).getResponse()

-> "<speak>Hello world! This is a example sppech content from the skill The cardinal number is  <say-as interpret-as=\"cardinal\">12345</say-as></speak>"

If only using plain text, it’s OK. But is we want to use several SSML element, it’s so hard to write it.

Use ssml-tsx to write the text like React

If you can use React, we can usessml-tsx to make the speech text.

$ yarn add ssml-tsx
$ vim tsconfig.json
{
  "compilerOptions": {
    "lib": ["es2017"],
    "jsx": "react", // Put this line

And if you make Lambda function by uisng Serverless Framework. We have to update your webpack.config.js

...
module.exports = {
...
  resolve: {
    // We have to add `.tsx` file to this line.
    extensions: ['.mjs', '.json', '.ts', '.tsx'],
    symlinks: false,

Then, we can write SSML like a React JSX element.

$ vim example.tsx
/** @jsx ssml */
import ssml, { renderToString } from "ssml-tsx";

export const speak = renderToString(
    <speak>
        Hello world! This is a example sppech content from the skill .
        The cardinal number is <say-as interpret-as="cardinal">12345</say-as>
    </speak>
);

$ vim index.ts
import {speak } from './example'
input.responseBuilder.speak(speak).getResponse()

-> <speak>Hello world! This is a example sppech content from the skill . The cardinal number is <say-as interpret-as=\"cardinal\">12345</say-as></speak>"

Advanced usage

We can use variable properties like React.

// example.tsx
/** @jsx ssml */
import ssml, { renderToString, FC } from "ssml-tsx";

type GreetingComponent = FC<{name?: string}>

const WelcomeMessage: GreetingComponent = ({name}) => {
    if (!name) return <p>Hello!</p>
    return <p>Hello {name} san!</p>
}

const GreetingMessage: GreetingComponent= ({name}) => (
    <speak>
        <WelcomeMessage name={name} />
        This is a example component to use ssml-tsx.
    </speak>
)

export const getGreetingPrompt = (name?: string) => renderToString(
    <GreetingMessage name={name} />
)

// index.ts
import { getGreetingPrompt } from './example'
input.responseBuilder.speak(getGreetingPrompt('John')).getResponse()

-> "<speak><p>Hello John san!</p>This is a example component to use ssml-tsx.</speak>"

We can easy to create speech content.