# UIBuilder, latest version and webkitSpeechRecognition()

**URL:** <https://discourse.nodered.org/t/uibuilder-latest-version-and-webkitspeechrecognition/95171>\
**Category:** General\
**Tags:** uibuilder\
**Created:** [6 February 2025 05:54 UTC](https://discourse.nodered.org/t/uibuilder-latest-version-and-webkitspeechrecognition/95171 "2025-02-06T05:54:52Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![micksta](https://avatars.discourse-cdn.com/v4/letter/m/9e8a1a/32.png) [@micksta](https://discourse.nodered.org/u/micksta)\
**Post date:** [6 February 2025 05:54 UTC](https://discourse.nodered.org/t/uibuilder-latest-version-and-webkitspeechrecognition/95171/1 "2025-02-06T05:54:52Z")

</div>

A very green noob. What i am wondering before i begin my node-red journey, if the below is also quite possible to implement using UIBuilder. It look's (UIBuilder) like an initial steep learning curve vs Dashboard, but worth the effort..

A complete example of an Chatbot using -- Dashboard 2.0 & webkitSpeechRecognition() - is given @ the url below. I'm just chasing the first 1/2 half, the stt (speech to text) piece.

> **[Speech-Driven Chatbot System with Node-RED • FlowFuse](https://flowfuse.com/blog/2024/01/speech-driven-chatbot-with-node-red/)**
>
> Learn to build a speech-driven chatbot system with Node-RED and Dashboard 2.0. Integrate speech recognition, synthesis, and Chat-GPT seamlessly.

Thank heaps,  
Mick

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [6 February 2025 09:19 UTC](https://discourse.nodered.org/t/uibuilder-latest-version-and-webkitspeechrecognition/95171/2 "2025-02-06T09:19:35Z")

</div>

Hi Mick,

I've only taken a very quick look at that article so far but yes, it looks perfectly possible to do using UIBUILDER. Indeed, at first glance it looks as easy if not easier to do in UIBUILDER than Dashboard and would have the advantage of being a rather smaller load in the browser and possibly a faster browser startup.

I've never used the [Web Speech API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API) which is the bit you are wanting but much of the code will be the same as in the example except that it won't be wrapped in VueJS specific wrappers but will rather use the native HTML/JavaScript API's directly.

Getting the data back to Node-RED is also trivial, using `uibuilder.send()` instead of Dashboard's `this.send()`.

> [@micksta](#):
>
> It look's (UIBuilder) like an initial steep learning curve vs Dashboard, but worth the effort..

If you know any HTML at all, I'd say that UIBUILDER is no harder to get started with than Dashboard personally. Certainly once you get to things like this example, UIBUILDER is every bit as easy if not easier because you aren't having to also learn how to deal with the VueJS framework. UIBUILDER in the browser is a series of helpers that smooth out some of the oddities of the HTML API's and provides 2-way communications between the browser and Node-RED. There are other features as well of course but you probably don't need any of them for this use-case.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [20 February 2025 09:20 UTC](https://discourse.nodered.org/t/uibuilder-latest-version-and-webkitspeechrecognition/95171/3 "2025-02-20T09:20:26Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.
