How can i connect the code generated by chatgpt to miro to create a nice chart?

Hi @The Professor 

It really depends on what you want to do. If you just want to try some things out for yourself, the easiest way would be to do it via the browser console. You can follow this tutorial to create some shapes on the board via the Miro Web SDK + browser developer tools. From there - you should be able to add in the ChatGPT code directly in the browser.

For a more “complete” application which you may want to share with your colleages (so they can try it out and use it) then you’d want to create an app on Miro’s Developer Platform. 

The easiest way is to watch this video 

I would recommend starting with Vanilla JS since it’s the most simple to setup, then ensuring the basic hello app is working as expected.

Then, you can just add in your custom code (from ChatGPT) in the basic hello world app and go from there.

Hope it helps! 

Thank you so much for your prompt response. Our app is built using Flutter Flow and functions as a form where users answer a series of questions, similar to filling out a Google Sheet. Based on these responses, our app sends the information to ChatGPT, which generates code to create a flow chart.

We want to integrate Miro into this process in the following way:

1. Generate the Flow Chart: After ChatGPT creates the code for the flow chart, this code will be used to generate a visual flow chart in Miro.
2. Display in Flutter Flow: The generated flow chart should be returned and displayed within our Flutter Flow UI.
3. Open in Miro: We also want to include a button in our app that allows users to open the flow chart directly in Miro for further editing.

Hi @The Professor 

1. Could you please share an example of the code which ChatGPT is generating?

For opening in Miro, you should be able to set the start view of the board by click on the three dots next to board name → Board → start view and set the start view to the flow chart.

Then you can just have the button click take the user to the board by the URL for the board which contains the flow chart.