DEV Community

Cover image for Leveraging ChatGPT and Midjourney for Landing Page and Content Generation
Alexandro Martinez
Alexandro Martinez

Posted on

Leveraging ChatGPT and Midjourney for Landing Page and Content Generation

I’ve been experimenting with AI APIs and tools, and the journey has been both exciting and insightful. In this blog post, I’ll share my experiences working with ChatGPT and Midjourney for content and landing page generation, and discuss some potential use cases for these tools in SaasRock.


Content Generation using GPT and Midjourney

My friend (and mentor) Chris, shared his idea of a simple Prompt Builder. We believed it could be turned into an MVP with just 2–3 days of work.

Try the MVP: remix-openai.vercel.app.

⚠️ If you’re a SaasRock Enterprise subscriber you can get access to this repo, just DM me your GitHub username to invite you. ⚠️

The premise of the tool is simple: the user enters a topic, and the GPT-based tool generates a list of ideas in various formats such as blog post outlines, song lyrics, or TikTok video ideas. Each piece of content would contain ContentType, Title, Description, Keywords, Audience, Tone, an Image Prompt (to use in AI image generators), and the Outline.

For example, if I set “Building a Landing Page and Content generator using GPT with Remix and Tailwind CSS” as the topic, it will take about 90 seconds:

Ideas by GPT

In this case, it gave me 3 pieces of content:

  1. Landing Page Copy — Creating a Tailwind CSS Landing Page with GPT-4 Generated Content
  2. Blog Post — How GPT-4 and Tailwind CSS Can Revolutionize Your Content Strategy
  3. Email Newsletter — Boost Your E-commerce Sales with GPT-4 Generated Product Descriptions

I use DALL-E to generate images, but they’re meh, I’m waiting for a public Midjourney API, it’s only available from discord from now, I’ll prompt the second idea with the “IMAGE PROMPT” result.

AI-generated blog post cover

I upscaled the first result as the image cover for this blog post:

AI-generated blog post cover


Landing Page Generation with Remix Page Blocks

Then, I thought I should leverage my existing open-source page block builder, Remix Page Blocks, to try telling GPT to generate a complete landing page based on a prompt.

The page builder works from “PageBlocks”:

Remix Page Blocks

So it would be enough to give ChatGPT a bit of context about each supported block and some examples (here’s the full prompt):

Response

The AI-generated response was impressive, and I was able to use the generated blocks in the demo to create a landing page with some iterations.

AI-generated Landing Page

I just have to copy and paste these blocks into the demo:

Blocks

And iterate upon that 😳.

AI-generated content

The next step would be to give ChatGPT more context so it understands the structure of each block so it could create multiple reusable HeroBlocks FeaturesBlocks, PricingBlocks, etc… Or generate images with DALL-E to use in a GalleryBlock.


Challenges Encountered

Vercel Timeout Calling ChatGPT

The API can take a while if your prompt is complex, and since I use Remix hosted on Vercel, I often reach the 60-second limit on the Pro plan. Luckily, this can be fixed by using Vercel’s Edge Functions with streaming (read more).

Midjourney generates weird letters and words

I’ve been trying Midjourney to try getting better results, but sometimes you cannot escape its weirdness.

Midjourney’s weirdness


Incorporating ChatGPT into SaasRock

Some brainstorming on how I could add ChatGPT to SaasRock:

  • Blog Post Generator
  • Landing Page Generator/Iterator
  • Documentation & FAQ Generator
  • Email Campaign Generator
  • Data Analyzer (MRR, MAU…)
  • Integrated CRUD File Generator

Just imagine SaasRock v2, a website with a simple prompt input that autogenerates your SaaS in one click.

Follow me & SaasRock or subscribe to my newsletter to stay tuned!

Top comments (1)

Collapse
 
useapi profile image
useapi.net

@alexandromtzg
I am reaching out to inquire whether you might be interested in trying the Midjourney API. We have recently released this offering and are actively promoting it. For more details, please visit our documentation at useapi.net/docs/collaboration-offer.

Additionally, you can explore our YouTube channel for more insights: youtube.com/@midjourneyapi.

Regards,
-u