Using Vibe Coding to Alter a Twilio Code Exchange Template

Using Vibe Coding to Alter a Twilio Code Exchange Template

Are you a non-developer interested in using Twilio products? Have you ever seen a template on CodeExchange that Twilio created, but weren't sure how to extend that template or customize it to your needs?

Have you tried vibe coding?

Whether your answer is yes or no to that last question, this tutorial will help you with the first two. In this article you’re going to look at how to take a Twilio Code Exchange template and expand it using only AI tools and no manual coding. Like in my previous article, where I introduced you to a basic vibe coding example, you’ll use vibe coding to do all the actual work. All you need to bring is your ideas and let AI handle the rest.

In this article, I'm not going to replicate the code itself, or link you to a GitHub. This article will instead keep it very simple and suggest some prompts for engineering output from OpenAI. You can try these prompts out yourself, even if you've never written any code before. Maybe this project is just a one-and-done for you. Or, maybe this will begin the start of a developer journey. Wherever this technology leads you, let's begin our journey together!

Getting Started with ChatGPT Code Creation

To get started, first create an account with OpenAI. You can log into OpenAI's website and begin chatting with the ChatGPT models today without providing any payment information. To start, go to Chatgpt.com, create a new account, and create a new chat. You'll be greeted with a totally blank window like this.

In the blank window where it says "Ask Anything," you can type whatever you want. Maybe you've experimented with creating text or images, or using OpenAI to help you with productivity. I've used it to analyze music, create to-do lists, or come up with story titles. Today, you'll use it to extend an application that Twilio has developed in CodeExchange.

You are going to be using this template for starters. This template creates a Node.js application that tracks email events in SendGrid. It uses Twilio Programmable SMS to send text messages during email events. This template has a full tutorial explaining how it works and how to deploy it on your own, so I won't be going into more detail about that here! Instead, we'll use this as a jumping off point to use prompt engineering (working with the AI to create code) to extend and alter the application.

Start with this prompt:

If you were to send this into the ChatGPT interface as-is, it will reply with a lot of suggestions and brainstorming ideas as to different ways you could extend the application. It actually generates a lot of ideas! Try it yourself and check out the results.

Your output from ChatGPT won't look identical to my screenshot. The output does vary a little depending on what model is being used, but there's also a little bit of fluctuation in the output of large language models because they give a probability-based answer. All ChatGPT conversations are a little bit unique. If any of the ideas that ChatGPT suggests to you speaks to you, you can follow up within the same chat.

If you use this prompt in the same chat, it will continue to build on this idea. It provides you with some code, and also explains where to go in the SendGrid dashboard to get started with using Dynamic Templates. Very convenient!

Using AI to Change Coding Languages

Maybe you already have a specific idea for how you want to extend the application. As a C# developer, I could, for example, want ChatGPT to translate the application into C#. If I were tackling this problem as a developer without AI, I'd first break it down into manageable chunks in order to make this project smaller. ChatGPT can do all that for me if I want. Consider this starting prompt:

ChatGPT responds by walking you through how to set up a C# project. It indicates the dependencies that you'd have to install, and shows you how to type commands into the terminal to get the packages set up to begin this project.

However, maybe I'm a total non developer and still confused by its response. As a developer, I'd want to have an IDE installed and make sure I knew where to type this code and how to run it. But a non-developer may not have this context. If you are stuck, ChatGPT can answer this question too:

If you ask this question, ChatGPT takes a step back. It tells you how to install the .NET SDK, and how to install Visual Studio Code, even providing links to walk you through the installation process and write a very simple Hello World application. Remembering the context of your previous prompts, it also says to title the application EmailSmsTracker, so it knows what you were attempting to do from the context of earlier chat items.

From there, you can follow ChatGPT's instructions for setting up. If you get stuck, or run into any bugs, the instructions can be clarified or prompted for more information at any time. Just continue to type your questions into the open prompt, keeping the same conversation context.

Clearing ChatGPT's Context

If at any time you get overwhelmed by the amount of older context in your conversation with ChatGPT, you can start a new chat. On the sidebar, check out your existing chats. You may only have one chat, or you may have a few:

If you choose New Chat at the top you will be greeted with another blank canvas. This chat does not have the context from your previous chats, so it's like starting fresh. If you do want it to have context from your other chats, you'd have to paste those prompts in again yourself. Only do this if you want to start entirely fresh, and have ChatGPT remember nothing from your previous conversation.

If you don't think you need a chat from ChatGPT anymore, you can delete that chat and context entirely by using the three-dots on the right and clicking the dropdown menu:

ChatGPT won't remember anything from a deleted chat, so be sure you really want to do this!

Using AI to Extend the Application

Suppose you are fine with using Node.js in the template, but you would like to extend the application itself.

Say, for example, that you would like to change the application so that instead of sending you an SMS, it sends you an email using SendGrid. You could try this out with pure vibe coding. Paste this into a new chat, or even your existing one:

ChatGPT then generates some new code that you can use to replace the code in your existing application. It tells you where to paste in the code and gives an explanation as to what that code might do.

Here's another extension that you could try.

This one is a little more complicated. Creating a dashboard is going to require using some new tools. ChatGPT gives some suggestions of tools that you could use, and can break this down into further steps if you need a little more guidance. Here's an example of a segment of the output that I got when trying this prompt:

There's a lot of developer looking words in there, but there's no need to panic. If you continue down the same road, ChatGPT will remember the context of this conversation and the previous conversations as long as it's still in the same tab where you started. Therefore, you do not need to continue to provide context in your response to the prompt.

This gets ChatGPT thinking about dashboard development and suggesting other tools and processes to help.

Focus On Your Ideas and Learn More

All of this information can be a little overwhelming, especially if you don’t have much coding experience. But you can always take a step back from your process and consider:

• What am I trying to make?
• What is it that I want to accomplish?
• Who will be using this tool?

And if you are not sure about any of these things, the AI is also a great brainstorming partner you can bounce ideas off of to pick a direction for your project:

ChatGPT is designed to generate lots of text, so it's going to come up with a lot of new ideas. Maybe there is something in there that will inspire you to build further! Whether you're a seasoned developer or trying these tools for the first time, let's build together using the power of AI!

If you want to learn more about vibe coding processes you can check out some more articles and videos from my colleagues at Twilio:

• What Is Vibe Coding? (Pros and Cons)
• Vibe Coding Video Demo with Twilio
• Live Vibe Coding with Claude