Creating a Social Media Posts Generator Website with ChatGPT

Introduction

After a fantastic internal Learning & Sharing session presented by my colleague Daniel Weller, I used my Learning & Sharing time to experiment with the GPT-3-turbo and DALL-E models in Node.js.

For some time, I've been wanting to try having ChatGPT create a website for me and was also looking for inspiration for a blog post. This seemed like the perfect opportunity because I was highly motivated.

The idea for a project already existed, as my wife had asked me if it would be possible to create a social post generator tailored to her product. I decided to take this idea further and create a social post generator for an incredibly innovative product: a space pizza made of dough infused with stardust, tomato sauce with a pinch of moonstone and mozzarella from the sun.

I was concerned about whether I would be able to write an effective system promptly, as I had not yet read the prompt engineering guide (which I plan to do). However, I thought to myself, "Why not just ask ChatGPT to write it?" and it worked out quite well.

Another aspect I found fascinating was how proficient ChatGPT is at styling HTML documents using the Tailwind CSS framework, especially when compared to the quality of its output in plain CSS.

The next sections describe the project setup as well as site creation steps and provide links to ChatGPT prompts and output. All of these files can be found in the following repository:

GitHub - mattiass771/prompts-media-posts

Project setup

  1. To create the minimal Nuxt 3 project I used the following command: npx nuxi@latest init my-app & ran npm install after my project was created.

  2. To add tailwindcss to my Nuxt app, I have installed the official package: npm install --save-dev @nuxtjs/tailwindcss, and added it to the modules array of the pre-generated nuxt.config.ts file at the root of my project.

  3. To use the openai library for Node.js - npm install openai + official docs - GitHub - openai/openai-node: Node.js library for the OpenAI API
     

Steps

1. I have created a Nuxt 3 application, in order to instantly get a Vue 3 app with a server out of the box.

2. After that was done, I have sent my 1st prompt to ChatGPT, requesting a Vue component with an input for the title of my social media post, a textarea for the message of the post, which would be sent to my API and used as a user message prompt for the gpt-3-turbo model and a submit button.
See the Vue Component creation prompts: prompts-media-posts/prompt-1.md at master · mattiass771/prompts-media-posts

3. After 2 questions, ChatGPT has provided me with a smooth looking Vue component, which I have copy-pasted to my pages/index.vue and started the application for the first time, see screenshot below for output:

RESULT OF FIRST 2 PROMPTS

4. Time for the gpt-3-turbo powered API. I have tried to get the server code from ChatGPT, but because of the knowledge cut-off I could use it only partially and had to adapt it to the Nuxt 3 syntax, rather than just copy/paste it as I did with the Vue component.
At this point, I realized I should have chosen a different setup for this project in order to easily copy and paste the code that ChatGPT provided me. However, since it didn't fail in any of the upcoming steps, I just went with it and decided not to rewrite.
See the API + openai client setup prompt: prompts-media-posts/prompt-2.md at master · mattiass771/prompts-media-posts

5. Now I had a running API that was expecting a message in the request body, to forward it to gpt-3-turbo model of openai npm module.
What I was missing, was a definition of my project/product for a system role message, in order to receive tailored social media posts. So I asked ChatGPT to create it for itself - the head copywriter of my unique space pizza product was born.
See the system role message prompt: prompts-media-posts/prompt-3.md at master · mattiass771/prompts-media-posts

6. Next up, I needed a container for the API response. I have created a dummy response message and a dummy image in my Vue component and instructed ChatGPT to create a social posts card, displaying the dummy image and the text, inside the form block he has created in step 2.
See the social media card creation prompt: prompts-media-posts/prompt-4.md at master · mattiass771/prompts-media-posts

API RESPONSE DISPLAYED IN THE RESULT CONTAINER - CONTENT OF THE <IMG> TAG IS STILL DUMMY AND WILL BE POPULATED IN POINT 10

7. After that, I needed to connect the Vue component to my API, to get rid of the dummy data. Let’s ask ChatGPT.
See the connect the puzzle prompt: prompts-media-posts/prompt-5.md at master · mattiass771/prompts-media-posts

8. I have instructed ChatGPT to add a loading indicator to the code, I copy pasted the output it had provided to my existing component (had to adapt one or two things) and my Social Media posts generator was done.
See the loading indicator prompt: prompts-media-posts/prompt-6.md at master · mattiass771/prompts-media-posts

9. Result - you can find the result code in this repository: GitHub - mattiass771/social-posts

10. As a bonus I added DALL-E branch that uses the createImage function from openai library - the image from text generation model - GitHub - mattiass771/social-posts at dalle

Final result

Conclusion

I have had a great time experimenting with the openai module, and I was very happy with the result. Moreover, I had it done in a dozen or two of minutes, which felt really powerful.
If you made it through all the way down here, thanks for reading! Hope you enjoyed it as much as I did.

Blog 11/10/23

Part 1: Data Analysis with ChatGPT

In this new blog series we will give you an overview of how to analyze and visualize data, create code manually and how to make ChatGPT work effectively. Part 1 deals with the following: In the data-driven era, businesses and organizations are constantly seeking ways to extract meaningful insights from their data. One powerful tool that can facilitate this process is ChatGPT, a state-of-the-art natural language processing model developed by OpenAI. In Part 1 pf this blog, we'll explore the proper usage of data analysis with ChatGPT and how it can help you make the most of your data.
Blog 9/27/22

Creating solutions and projects in VS code

In this post we are going to create a new Solution containing an F# console project and a test project using the dotnet CLI in Visual Studio Code.

Blog 7/22/24

Let's build an Enterprise AI Assistant

In the previous blog post we have talked about basic principles of building AI assistants. Let’s take them for a spin with a product case that we’ve worked on: using AI to support enterprise sales pipelines.
Blog 11/24/23

Part 3: How to Analyze a Database File with GPT-3.5

In this blog, we'll explore the proper usage of data analysis with ChatGPT and how you can analyze and visualize data from a SQLite database to help you make the most of your data.
Blog 5/1/21

Ways of Creating Single Case Discriminated Unions in F#

There are quite a few ways of creating single case discriminated unions in F# and this makes them popular for wrapping primitives. In this post, I will go through a number of the approaches that I have seen.

Blog 12/19/22

Creating a Cross-Domain Capable ML Pipeline

As classifying images into categories is a ubiquitous task occurring in various domains, a need for a machine learning pipeline which can accommodate for new categories is easy to justify. In particular, common general requirements are to filter out low-quality (blurred, low contrast etc.) images, and to speed up the learning of new categories if image quality is sufficient. In this blog post we compare several image classification models from the transfer learning perspective.
Blog 9/17/21

How to gather data from Miro

Learn how to gather data from Miro boards with this step-by-step guide. Streamline your data collection for deeper insights.
Blog 10/6/21

Designing and Running a Workshop series: An outline

Learn how to design and execute impactful workshops. Discover tips, strategies, and a step-by-step outline for a successful workshop series.
Blog 8/7/20

Understanding F# Type Aliases

In this post, we discuss the difference between F# types and aliases that from a glance may appear to be the same thing.

Blog 7/22/24

So You are Building an AI Assistant?

So you are building an AI assistant for the business? This is a popular topic in the companies these days. Everybody seems to be doing that. While running AI Research in the last months, I have discovered that many companies in the USA and Europe are building some sort of AI assistant these days, mostly around enterprise workflow automation and knowledge bases. There are common patterns in how such projects work most of the time. So let me tell you a story...
Blog 9/20/23

LLM Performance Series: Batching

Beginning with the September Trustbit LLM Benchmarks, we are now giving particular focus to a range of enterprise workloads. These encompass the kinds of tasks associated with Large Language Models that are frequently encountered in the context of large-scale business digitalization.
Blog 7/21/20

Understanding F# applicatives and custom operators

In this post, Jonathan Channon, a newcomer to F#, discusses how he learnt about a slightly more advanced functional concept — Applicatives.

Blog 3/12/21

Introduction to Web Programming in F# with Giraffe – Part 3

In this series we are investigating web programming with Giraffe and the Giraffe View Engine plus a few other useful F# libraries.
Blog 6/24/21

Using a Skill/Will matrix for personal career development

Discover how a Skill/Will Matrix helps employees identify strengths and areas for growth, boosting personal and professional development.
Blog 1/7/25

ChatGPT & Co: LLM Benchmarks for December

Find out which large language models outperformed in the December 2024 benchmarks. Stay informed on the latest AI developments and performance metrics.
Blog 6/22/23

Strategic Impact of Large Language Models

This blog discusses the rapid advancements in large language models, particularly highlighting the impact of OpenAI's GPT models.

Blog 8/10/22

So, I wrote a book

Join me as I share the story of writing a book on F#. Discover the challenges, insights, and triumphs along the way.
Headerbild Data Insights
Service

Data Insights

With Data Insights, we help you step by step with the appropriate architecture to use new technologies and develop a data-driven corporate culture
Headerbild Data Insights
Service

Data Insights

With Data Insights, we help you step by step with the appropriate architecture to use new technologies and develop a data-driven corporate culture
Blog 11/4/24

SAM Wins First Prize at AIM Hackathon

The winning team of the AIM Hackathon, nexus. Group AI, developed SAM, an AI-powered ESG reporting platform designed to help companies streamline their sustainability compliance.