How to Build Your Own AI Assistant for Email Writing Without Coding

Building an AI-Powered Email Assistant with Plumb and Bubble.io

This is how you can build your own email assistant powered by AI without writing a single line of code. And I'm going to be using two of my favourite no code tools. We'll be using Plumb and we'll be using Bubble.io. So let's dive right into a Bubble app.

Setting Up the Bubble App

Here's a blank Bubble app. I've literally just created it. I'm going to say "Skip Application Assistant" and here is my blank page. Now there are tons of other things that would go into a production-ready Bubble app. But right now I'm just going to focus on the AI calls, writing the prompt and having structured data in JSON sent back. Now if that's a little bit confusing, don't worry. This video is going to explain every single step.

Creating the Input Form

So what do we need for our AI powered email assistant? Well, if I change this into a column, I'm just going to start putting inputs on here. So I'm going to write in a recipient name. And in fact, if I right click on it and then say "Group in a column", I'm going to give this a max width of say, 660. I'm going to centre it. So that everything's a little bit clearer. More clear. I'm going to just give it a page background. A nice grey. Make this background white. Add in some padding. This is going to be the form that we use in order to build our prompt, in order to get our email written.

Setting Up Inputs

Basically I'm going to create a series of inputs. We're going to send those inputs over to Plumb. And Plumb is going to send some structured data back as part of the AI response so that we can save some time in replying to our emails. Right. So I've got recipient name. I'm just going to copy and paste this. And we'll also have sender name. We'll have a multi-line input. Where we can say... Let's move that down to the bottom. Describe the email you want written. Okay. Yeah, we could be neater than that, but it's going to get the job done. And then I'm also going to copy and paste this and have one that says "background information". Because I want to be able to provide the AI prompt with a bit of business background. And we'll be using Planet No Code as an example here. So that the email that is written understands the context from which it's coming from.

Adding a Generate Button

So let's add in our bottom. And you'll notice... Well, let's neaten this up a little bit. A little bit neater. Say 12. Okay. Now say generate email. Okay, so I've got four inputs.

Setting Up Plumb

Let's now move over into Plumb. And I have a fresh Plumb pipeline ready to go. So I'm going to add in my inputs. So we'll say recipient name. Okay. Now, Plumb has got a number of fields and that shall use them as we go through. Basically everything that you put here is going to be behind the scenes in Plumb. It's going to make the prompt that goes off to open AI. And that will be how you fine tune the kind of reliability or the preciseness of the data that you get back.

Configuring Plumb Inputs

So I think recipient name is quite an adequate description. So I'm not going to add a description in here. I'll put send the name. What's to make it required? And then I'll have content. I'll say a... So I will expand on what content is. A description of what the email should include. And then I'm going to say background info. I'll say background information about the individual business writing the email. Okay. Now I add in my LLM. So let's join that up. Now in Plumb, you have to have a direct link between nodes in order to pass data between them.

Setting Up the Plumb Pipeline

So let's rename this. I'll say generate email. And now this is where I write my prompt and you'll see very quickly how using Plumb is much... Basically, it's great for working with AI, especially if you're beginning to develop those complex workflows. Because it just allows you to really quickly test what you're doing. And I just noticed I hadn't clicked save. So we'll say write email. Okay. Okay. So we'll say you are an AI email writing assistant. Use the data provided below to write an email.

Adding a Tone Field

I'm going to add in another field because it demonstrates something else we can do in Bubble, which is we're going to add in a field for tone. So I'll say tone. Okay. And I'm going to just use static choices here because it's quick, but you could of course use an option set if you wanted to have a set list of tones and have them appear elsewhere in your app. So we'll say friendly professional and pirate. Okay. And we'll make that... It should not be empty. Okay. So let's add that in as well into our triggers. This is just how easy it is to navigate through different nodes in the pipeline in Plumb and just change things.

Completing the Prompt

So we can say tone. Write the email in this type. It's required. Okay. So now let's continue building our prompt. So we'll say recipient name. And we just click to add in the variable of a merge fields. We'll say send a name. Okay. And we'll say content. We'll say tone. And we'll say background info. So background information. Okay. Let's just test that.

Testing the Pipeline

So we can say test pipeline. And so I'll say recipient name is Bubble. Send a name is Matt. Content is welcome email for our node code community. Background is that Planet No Code is a node code education platform. And the tone will say friendly. Okay. So now I can test the whole pipeline. And so Plumb is going to do just that. And now I can play this one. I didn't actually set up any parameters for the AI. So let's just see what we get back. And I can expand this out to make it easier to see.

Structuring the Output

So we get back a response, but it's all kind of smushed into one. And part of what I promised at the top of this video is we're going to structure it. And this is something which isn't so easy to do in Bubble. And Plumb can be an immense help here. Is we actually have different parts of the output that we want to separate out into clear labels. And know that it's going to happen and do that reliably.

Configuring the Response Structure

So let's go back into here and we'll say return response. If you're interested, look, we can also do webhooks. I think that's going to be my next video with using Plumb. Because when you send this request, Bubble is going to wait until it gets a response back from Plumb. And that will time out after a minute or two. So if you were to create some massive pipeline in Plumb, and it took 10 minutes, maybe you were doing some transcription, you can do that in Plumb too. You wouldn't want your Bubble out to be waiting because it would time out.

Structuring the Response Data

So let's say a return response. We don't just want to send back an empty 200 status. We want to send back a step and we want to send back the right email step. Okay, right. So let's change a few things here. This is how we structure it. I'm just going to make the temperature to 0.7. I find that to be a good mix of creative but prescriptive. And we're just getting raw text back. Let's structure it. So we're going to get back a record. And we'll say suggested email content. Now we'll just say suggested email. Okay, and now I'm going to add in some properties. So what do I want to get back? Well, I think I want to get back subject. We'll just do the bare minimum here actually. We'll say subject and we'll say email body.

Testing the Structured Response

Okay, now we can test this right away. So I can say in fact, I can just click on here. I can rerun the LLM step and we get back. We now get back our two different parts subject and email body.

Connecting Plumb to Bubble

So how do we go about linking this into our Bubble app? Well, I'll go back into Bubble and then go into plugins and add in the API connector. This is immensely powerful. This will let you connect to hundreds of thousands of other apps and web services out there. So I'm going to add in Plumb. I'm going to authenticate in the header and I'm going to add in an API call down here and I'll say write email.

Setting Up the API Call

So let's populate this with the required details and Plumb is going to tell us where to put different parts of our input. So I'm going to click on deploy and I'm going to go straight to production. Click enable production and go on to CURL. So we can see that we need to send a post request to this URL. So I'm going to copy it paste it in. It's not get its post. Also in Bubble there are news ads two different stages. There's data and action. I'm just going to want it to be action. I want it to be a part of my Bubble workflow to send this request.

Configuring API Authentication

Then if I go back to Plumb, I need to have authorization bearer with my client ID. I'm going to come back to that, but I also need to include my sorry my client secret. I also need to include my Plumb client ID in the header. So I'm going to add in header client ID. I'm going to fetch that in a moment. But here's the bit that goes in the body or the data section of the expression.

Setting Up the API Request Body

So let's go back into Bubble and paste it in here. Now this is JSON. It's a type of coding syntax. So is it no code? Well, basically it's no code because I'm going to explain every bit, which is just mentioned up front. If you get any punctuation wrong here, you're going to cause an error. So we'll be careful with it. But we can see where we have to insert values. So I'm going to say recipient name. Why am I doing triangle brackets? Because Bubble tells us just up there that that's how we add in dynamic values. And I'll say send the name and I'll say content. So background info. And if yours doesn't look exactly like this, it's because you set up slightly different labels or keys in Plumb.

Handling JSON Formatting

Now none of these should be private. What this means is that this is data that my Bubble app user can access. And of course they can access it because it's part of the form that they filled in. I'm also going to make some changes here, which is like I say, punctuation is so easy to create a syntax error in JSON, especially with like speech marks, special characters. So I'm actually going to get rid of the speech marks here. But when I test it and I initialize my call, I'm going to make sure that I put my speech marks back in here.

Testing the API Call

So recipient name, Bubble, send the name Matt. Because that has to be the speech marks. Wherever they come from, they have to be part of this call. Otherwise I'm going to get a syntax error. I'll say write a welcome email for our community. Got a speech mark at the end, perfect background. We are a no code education platform. Tone. Let's go to professional this time. Okay, right.

Adding API Keys

I'm now going to go ahead and grab my API key and my client ID, my secret key. Two separate things. My secret key and my client ID. From Plumbp, plug them in and obscure them because a special secret key or an API key, that's like a password. You will need to keep that secret and protected. Okay, so I'll just scroll down so that we don't accidentally see it. But remember, you have to put that word there and a space before your secret key. I'll put my client ID in here. That's fine.

Initializing the API Call

Right. So to begin to use this in my Bubble app, I have to initialize this. And this is basically testing for issues or errors and it makes it now accessible in my Bubble work for those sections. So I'm going to initialize the call. This is good. If you get an error, it normally comes back very quickly. And in fact, here we go. So we get back an okay status and then we get back an object here. And within that, we get back our subject and our email body. So I'm going to click save because this is training Bubble, the sort of structure that we should expect our data to return it. If I was to go ahead and add other output fields, I'd probably have to come back here and reinitialize it so that Bubble learns that those additional fields are there. Perfect.

Setting Up the Output Display

Right. Let's go back into design and start putting this all together. So I'm actually going to copy and paste this, remove the button, and then I'm going to repurpose part of this. So this is going to be where we display our output. And I'm going to use text inputs because it can be really helpful just to click in there, copy and paste content that's generated. So let's make this with 100%.

Creating the Workflow

Okay. So let's set up our workflow. So I click on my button, I say add workflow. First thing I'm going to do is go into plugins and I'll find here Plumbp right email. That's because that's exactly what I've labeled it in the Bubble API connector. Remember these speech marks. So let's get the recipient input value. Now there are no speech marks there. Also there's for some reason someone could put a special character in the person's name, much more relevant when we come to the content because you could be put there. They could be putting like speech marks in there. But we use JSON safe. And this is Bubbles way of basically wrapping it all in speech marks and ensuring that the technical coding term is escaped, ensuring that the special characters in that text are going to be treated as text rather than part of the code.

Configuring the Workflow

So we'll do the same here for sender. I've got two fields called sender name. Easy mistake. So let me update this one. This is now subject. And this is email output. Get noticed by updating the placeholder in Bubble. It updates the label. If you update the label of the element manually, updating the placeholder won't overwrite that. So I've send the name. JSON safe. Let's have our, do I call it content? What do I call it? So look through, describe the email. JSON. Okay. And let's have our background info. Background info. And let's have our tone. JSON safe. Okay. If you're guessing any errors, you probably not got JSON safe on each of those, or you've double speech marked it in the end because you've left the speech marks in at the API connector stage.

Using Custom States

So I now want to display two bits of text back. And this video is already 20 minutes long. So I'm going to do it a really quick way without actually saving it in the Bubble database. I'm going to use a custom state. So custom states are a way of temporarily storing data. I'm just on the index page. You can add custom states to any element on the page, but I tend to do them on the page itself