The Dialog flow to Web Client

Nowadays we would like a fully customizable web client. It is also not possible to connect a front-end implementation directly to DialogFlow. I’ve chosen to create a nodejs ‘proxy’ based on Express:

/* Simple Node Proxy for DialogFlow */
var express = require("express");
var app = express();
const dialogflow = require('dialogflow');
process.env.GOOGLE_APPLICATION_CREDENTIALS = "[path/to/auth/file]";

app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});

app.get("/", (req, res, next) => {
var q = req.query.q,
session = req.query.sessionId;
runQuery(q, res, session);
});

Note that this code is still in alpha-phase, do not expect it to be fully tested or secure. Of course one would limit Access Control to the domain(s) used and also run this example behind a (ssl) proxy. To be able to use DialogFlow one needs to create a service account and create a credentials file, see howto.

I have chosen to manage the session on the front-end (with a saved uuid), and keep this Nodejs proxy as shallow as possible. The actual question (or ‘intent’) is parsed by runQuery:

/**
* Send a query to the Dialogflow agent, and return the query result.
* @param {string} q The question
* @param {object} res The object to reply the answer
* @param {string} sId The session identifier
*/
async function runQuery(q, res, sId) {
// A Dialog Flow / Google Project ID:
const pId = "[your project id]";
// Create a new session
const sessionClient = new dialogflow.SessionsClient();
const sessionPath = sessionClient.sessionPath(pId, sId);

// The text query request.
const request = {
session: sessionPath,
queryInput: {
text: {
                text: q,
                languageCode: 'en-US',
},
},
};

// Send request and log result
const responses = await sessionClient.detectIntent(request);
const result = responses[0].queryResult;

// Send Result:
res.json(result);
}

This will pass on the response from Dialog Flow right to your Front-End. One could use BotUI to implement a front-end implementation or create one yourself. Maybe later I will share my bot based on Bootstrap & Unify theme.