Making a PWA App for Google Bard

Making a PWA App for Google Bard

Introduction

Google Bard is a powerful language model that can be used for a variety of tasks, including generating text, translating languages, and writing different kinds of creative content. However, using Google Bard from a mobile device can be challenging, as the website is not optimized for mobile browsers.

In this blog post, I'll talk about using the MakerSuite API to build a Google Bard app that can be used on mobile devices, through PWAs. The MakerSuite API is a powerful tool that allows you to interact with Google Bard programmatically. By using the MakerSuite API, you can build a custom app that can take advantage of all of Google Bard's features.

The MakerSuite API

I used the Node.js backend for it in the end, with the Makersuite libraries, though the easiest way to get started with it was to just use the fetch API with the key. Still, that would be insecure in production.

The app consists of two main components: a frontend and a backend. The front end is a simple web page that allows users to interact with the app, along with the manifest and pwa installability. The frontend code just involves a fetch to the backend on button press and the PWA code for the manifest can be found at web.dev

The back end is a Node.js server that handles the communication with the MakerSuite API. implemented using the Express framework. The server listens for HTTP requests on port 3000. When a request is received, the server will use the MakerSuite API to generate text from the request body. The generated text will then be returned to the client, it's simpler with the one-time questionnaire library, but for chats, maintain a conversation array, and send that the first time you make a request, to make bard chattier.

I have a simplistic example repo on GitHub, angled at code generation, available for public viewing, with all the API keys removed. It's not the whole chat feature, but the question array basis, and has support for code block generation with highlights.js.

https://github.com/VatsaDev/gbard

I hope this blog post was helpful to you, and see you next time!