An Apps Script to embed ChatGPT api in Google Docs and speed up your daily UX tasks
I have been dealing with user experience and interaction design for 13 years and each new project has always led me to deal with enabling technologies often never used before. This was the case for my first project that exploited augmented reality for industry 4.0, for the first virtual reality experience designed to support archeology lessons in the classroom, for the first vocal assistant to train and assist technicians in a chemical analysis and for many, perhaps all, of the other design challenges faced.
In planning we rely on the mindsets and tools of design thinking but sometimes we realize that in a world where everything is constantly work in progress, people’s needs arise later after having encountered new technologies that enable and stimulate new needs. Yuhki Yamashita of Figma expressed this concept well during a talk at the 2022 Lisbon Web Summit: in theory, we first define the problem and then identify the solution but in reality we tend to first identify the solution and then define the problem.
So it was for myself and Chat-GPT. I tried to use it, I read various articles on how it could be used in ux design and I asked myself, how could it help me in my work? What problem could it solve for me?
I tried to define some tasks that could make my work as a designer easier, especially when it comes to going to the classroom with students and finding case studies on which to make them work individually or in groups. For each task, I then defined a prompt and integrated it into the google docs menu to be able to have it easily at hand and share it with colleagues and students to work together.
Below I will briefly explain how I created the menu for Google Docs and how I tried to use it in practice.
Starting from the code proposed in this video tutorial
https://promptmuse.com/gpt3-in-google-docs-create-your-own-a-i-writer/ I customized this script to include the first commands I wanted to test. Below you can find the steps to follow to do it yourself:
First, create a new document on Google Docs and then in the menu bar select Apps Script under Extensions.
Once the script is open, write the code to add a drop down menù named “GPT3 4 DESIGNERS” containing the items “Generate Brief”, “Generate TagLine”, “Generate Copy”, “Generate Wireframe”, “Suggest UXTest”, “SuggestTool” , “Generate Image”.
This is the first block of code of my script:
function onOpen() {
DocumentApp.getUi().createMenu("GPT3 4 DESIGNERS")
.addItem("Generate Brief", "generateBrief")
.addItem("Generate TagLine", "generateTagline")
.addItem("Generate Copy", "generateCopy")
.addItem("Generate Wireframe", "generateWireframe")
.addItem("Suggest UXTest", "suggestTest")
.addItem("Suggest Tool", "suggestTool")
.addItem("Generate Image", "generateImage")
.addToUi();
}Then add two variables to specify your open.ai api key and the model you want to use. I used the last model for ChatGPT but you can use the previous one.
var apiKey = "insert-here-your-openai-api-key";
var model = "text-davinci-003"Then, write the code for the “Generate a Brief” item. Inform ChatGPT that when you select a text in your Google Doc and click the “Generate Brief” item from the drop down menu “GPT3 4 DESIGNERS” you want this output: a design brief for the topic I specify in the text selected. To do this assign “Write a UX brief for” + selectedText to the var prompt.
Here is the code:
function generateBrief() {
var doc = DocumentApp.getActiveDocument()
var selectedText = doc.getSelection().getRangeElements()[0].getElement().asText().getText()
var body = doc.getBody()
var prompt = "Write a UX brief for" + selectedText;
temperature= 0
maxTokens = 2060
const requestBody = {
"model": model,
"prompt": prompt,
"temperature": temperature,
"max_tokens": maxTokens,
};
const requestOptions = {
"method": "POST",
"headers": {
"Content-Type": "application/json",
"Authorization": "Bearer "+apiKey
},
"payload": JSON.stringify(requestBody)
}
const response = UrlFetchApp.fetch("https://api.openai.com/v1/completions", requestOptions);
var responseText = response.getContentText();
var json = JSON.parse(responseText);
Logger.log(json['choices'][0]['text'])
para = body.appendParagraph(json['choices'][0]['text'])
}Then repeat this code and specify for each menu item which is the prompt and the output you desire.
I show below an example of input and output for the first item.
I wrote as input: “LOCAL EVENT PROMOTION AND RESEARCH” and asked ChatGPT to help to generate a brief for my students. I selected the text and the “Generate Brief” command from my dropdown menù.
This is the output:
Project Overview:
The goal of this project is to create a user experience that will promote local events and allow users to research them.
Objectives:
1. Create a user-friendly interface that allows users to easily search for and find local events.
2. Allow users to filter their search results by location, date, and type of event.
3. Provide users with detailed information about each event, including location, date, time, cost, and other relevant details.
4. Allow users to save events to their calendar or share them with friends.
5. Allow users to rate and review events.
6. Provide users with recommendations for similar events.
Target Audience:
The target audience for this project is people who are interested in attending local events. This includes people of all ages and backgrounds.
User Needs:
1. Users need to be able to easily search for and find local events.
2. Users need to be able to filter their search results by location, date, and type of event.
3. Users need to be able to access detailed information about each event.
4. Users need to be able to save events to their calendar or share them with friends.
5. Users need to be able to rate and review events.
6. Users need to be able to receive recommendations for similar events.
Deliverables:
1. A user-friendly interface that allows users to easily search for and find local events.
2. A filtering system that allows users to filter their search results by location, date, and type of event.
3. Detailed information about each event, including location, date, time, cost, and other relevant details.
4. A way for users to save events to their calendar or share them with friends.
5. A rating and review system for events.
6. Recommendations for similar events.
In my experience Chat-GPT3 is not perfect but it is quite good for some tasks. Try it yourself.
I started this personal experiment assuming that Chat-GPT could be a solution and I am still trying to define what kind of problem a ux team might run into in their work.
