Developing Open GPT for Miro: Bringing the power of ChatGPT to your board
With the recent breakthroughs in generative AI, large language models (LLM), and the advent of the impressively capable ChatGPT, there are more and more situations where I find myself manually copying and pasting content from Miro to ChatGPT and vice versa. After realizing that this is also a pain point for many of my colleagues at Orbit Ventures, we decided to leverage the Miro Developer Platform and integrate OpenAI’s LLM directly into Miro. The result is the Open GPT for Miro app that is now available on the Miro Marketplace.
Bridging the gap between ChatGPT and your Miro board
At Orbit Ventures we use Miro extensively in our daily work. Miro boards are the primary hubs where we collect, analyze, and present our research, data, and conclusions. We use Miro for internal and external collaboration and communication. Therefore, directly augmenting the Miro board UI with an app that allows interaction with a LLM promised to be useful for me and many of my colleagues. The basic idea is this:
Select your sticky notes from the board and write an instruction into a text field provided by the app. Then click Execute and the app will send the text content of the stickies together with your instruction to the LLM to do its thing. As a result, the response from the LLM will be converted into new sticky notes that the app places on the same board.
Sending your sticky notes directly to the LLM from the Miro UI streamlines many processes and reduces dull copy and pasting. The use cases that we had in mind during development were:
- Consolidating ad hoc interview notes into a summary text
- Supporting idea clustering by proposing categories from many stickies
- Spellchecking, translating, summarizing, and paraphrasing sticky notes in a specific tone of voice
The app should reduce the friction between Miro boards and OpenAI’s most advanced LLM to encourage experimentation and exploration. We want to enable our colleagues to build a library of commonly used operations and well-performing prompts that they can share within the organization.
Building an app using the Miro Web SDK
After the initial idea was drafted out, I followed Miro’s developer documentation to initialize a Typescript Vue 3 app. Some batteries were included and the scaffolding added Miro’s design system, Mirotone, as well as the build tool, Vite, to the newly created project. The documentation is pretty clear on how to get your first app running from your local machine. You should have the hello-world app running in minutes.
You have two options for presenting your app to the user. Either you run your app in a side panel or in a modal. Here we chose the modal for a welcome screen and the side panel for the main controls of the app. The welcome screen is where the user provides the OpenAI API key (which is saved exclusively to your browser’s local storage). After dismissing the welcome screen, all interactions with the app happen via the side panel. This panel also hosts the text input field for your instruction. The app runs within multiple iframes and uses the Miro Web SDK to interact with the board and its items.
To stay consistent with the surrounding design language, Miro encourages you to use the Mirotone component library. We use it for layouts, typography, and UI elements like tabs, radio buttons, and text inputs. The main logic of the app is located in the script block of the Vue component. For example, here you can register an event handler that is triggered when the user selects items on the board. To create new stickies, you use well-documented methods from the Miro Web SDK like miro.board.createStickyNote.
We chose to build a pure frontend app without a backend system. The main benefit of this solution from our perspective is the low cost of hosting the app and the reduced complexity. For the user, the benefit lies in better performance and increased privacy, since there is reduced backtalk to a server. The biggest drawback of this approach is found for Safari users. Apple’s controversial ITP, which expires the local storage after 7 days of not using the app, will have Safari users lose their saved settings, API key, and instructions. Firefox and Chrome users are not affected by this. This issue is in a pole position of the backlog and should be tackled first, if the app proves to be liked by you, the Miro users.
Miro’s documentation lists a few options for deploying apps. I went with AWS and decided to host the static app bundle and its few assets as a static website on AWS S3. For TLS termination and setting response headers, I use the Cloudfront CDN. After initial manual deployment, I created a CI/CD pipeline to automate the deployment. The initial effort of setting up the pipeline is paid back quickly, even for a project as small as this — with the added benefit of a highly improved developer experience. On the other hand, only a small part of the infrastructure is orchestrated by terraform. The manual setup of the infrastructure through the AWS console is good enough for a project of this scale. Unlike the CI/CD setup, terraforming all infrastructure is not likely to pay off.
Mostly smooth sailing with scaffolding tool and good documentation
Thanks to Miro’s scaffolding tool that creates an initial app, you have something running after just a few minutes. Building in small increments from this starting point is good fun. As any engineer can imagine, it is pleasing to hook your own little code into the surrounding Miro board — read and write to it in the hope of automating all your manual chores. I had no problems reading and writing sticky notes to the board using the well-documented Miro Web SDK. Admittedly, what we have here is a simple use case where we only handle sticky notes. Your mileage may vary if you interact with more complex objects. Implementing a minimal viable product that fulfills the desired features listed above took about five days.
All in all, implementing the app was mostly smooth sailing. However, we did have to wrap our heads around the communication and life cycle of the three iframes within which the app lives.
I wanted the welcome screen to appear as a modal that presents a glimpse at the features that you can expect from the app. Once you provide an OpenAI API key, the app checks the validity and evaluates if you have access to GPT-4. Then the welcome screen is dismissed, the API key is saved to the browser’s local storage, and the main UI opens within the panel iframe with the app ready to roll.
Unfortunately, I had some issues with the js code running inside the panel iframe. After some trial and error, I realized that I couldn’t open the modal from the panel, since this would stop code execution in the panel iframe. Panel and modal iframe need to be orchestrated from the headless iframe that starts with the board. Once you understand the mechanism it totally makes sense.
From internal tool to the Miro Marketplace
After publishing and promoting the app internally within Orbit Ventures and receiving positive feedback from our colleagues, we decided to open-source the app and publish it to the Miro marketplace.
Miro’s review process is broken down into three parts: Design/Functionality, Security, and Marketing. After submitting the app on a Monday, I was contacted by Miro on Tuesday. and I received constructive feedback on the UI on Wednesday. There was some back and forth and on Friday, there was another good suggestion of how to declutter the UI.
In the meantime, the security review found some missing headers which were an easy fix. Of course, I could have read all the security requirements beforehand in their documentation.
Last but not least, we needed to create the texts and visuals for the Miro Marketplace listing. This took surprisingly long since we wanted to hit the right tone and make a good impression on first sight. I would suggest starting this as soon as you are fairly certain that there is no showstopper for publishing your app. The whole process from submitting to going live on the marketplace took 11 business days.
Conclusion
Integrating OpenAI’s LLM with Miro has been a practical step in augmenting one of Orbit Ventures’ favorite tools. Thanks to the Miro Developer Platform, we could on one hand streamline existing processes as well as reduce dull manual chores, and on the other hand lower the barrier for exploration and experimentation with LLM.
We hope that you find this addition to the Miro ecosystem as helpful as we do, and are looking forward to your constructive feedback to further refine and improve the experience. You can find my contact details on the Marketplace listing as well as within the help section of the app.
