Transforming Your Voice into a Blog Post with GPT and Meteor

on April 13, 2025

🎯 Project Overview

This project combines several modern tools to streamline creative output:

• ⚛ Meteor.js – for the real-time frontend chat application
• 🧠 OpenAI APIs – Whisper for transcription and GPT-4 for content generation
• 💧 Uniflow – an open-source automation engine
• 🌏 Darkwood API – for article publication

Whether you're a developer, content creator, or automation enthusiast, this setup shows how voice-driven content creation can integrate into a complete publishing workflow.

🔧 Part 1 – Building the Meteor Application

The first step was to create a Meteor-based chat app that actively listens to your microphone 🎤 and sends the audio to OpenAI for processing. The application was inspired by classic tutorials like Meteor's Todo example, but extended to support modern voice-to-text workflows.

🚀 Setup Instructions

curl https://install.meteor.com/ | sh
meteor create vocal-chat-app
cd vocal-chat-app
meteor npm install react react-dom react-mic axios

Additional Meteor packages:

meteor add static-html react-meteor-data

🎤 Capturing and Transcribing Voice

Using react-mic, the app provides a simple "Record" and "Stop" button to capture voice input. Once the audio is captured, it is sent to OpenAI's Whisper API for transcription. This provides a text base that is used for content generation.

✍ Article Generation with GPT-4

The transcript is passed into a GPT-4o prompt like this:

"Write me a blog post about no-life geek developers who eat pizza 🍕 and drink beer 🍺 to finish their project before tomorrow's deadline 💀."

The result is a complete article formatted in Markdown or HTML, ready to be displayed inside the chat interface. The layout is styled in CSS to match a minimal chat UI, with messages from the user and AI clearly distinguished.

🔁 Part 2 – Publishing the Article Automatically

Once the article is generated, the second phase is about automation: pushing the content live without needing a CMS or manual intervention.

🧩 The Uniflow Workflow

The Uniflow workflow is structured into three blocks:

1. Text input – the article body is pasted into a text block.
2. Title generation – a GPT-4 call generates a SEO-optimized title from the article.
3. API publishing – two HTTP requests are made to the Darkwood API:
   • First: create an Article
   • Second: create an ArticleTranslation using the IRI returned by the first call

🧬 Example JavaScript Logic Using Axios

let token = null;
let rawTitle = aiTitle.value;
let slug = rawTitle
  .toLowerCase()
  .normalize("NFD")
  .replace(/[\u0300-\u036f]/g, "")
  .replace(/\s+/g, "-")
  .replace(/[^a-z0-9\-]/g, "");

// Step 1 – Authenticate
axios.post('http://api.darkwood.localhost:8092/auth', {
  email: 'darkwood',
  password: 'darkwood'
}, {
  headers: {
    'Content-Type': 'application/json',
    'Accept': 'application/json'
  }
})
.then(function(authResponse) {
  token = authResponse.data.token;

  // Step 2 – Create Article
  return axios.post('http://api.darkwood.localhost:8092/api/articles', {
    tags: [],
    comments: []
  }, {
    headers: {
      'Authorization': 'Bearer ' + token,
      'Content-Type': 'application/ld+json',
      'Accept': 'application/ld+json'
    }
  });
})
.then(function(articleResponse) {
  const articleIri = articleResponse.data['@id'];

  // Step 3 – Create ArticleTranslation
  return axios.post('http://api.darkwood.localhost:8092/api/article_translations', {
    locale: "fr",
    article: articleIri,
    title: rawTitle,
    slug: slug,
    content: article_content,
    imageName: "",
    active: true
  }, {
    headers: {
      'Authorization': 'Bearer ' + token,
      'Content-Type': 'application/ld+json',
      'Accept': 'application/ld+json'
    }
  });
})
.then(function(translationResponse) {
  console.log("✅ Article and translation published successfully!");
})
.catch(function(error) {
  console.error("❌ Publication error:", error);
});

✅ What This Project Demonstrates

This project brings together:

• 🎤 Voice as input
• ✨ AI as a creative assistant
• ⚙ Automation as a publishing engine

It's a powerful setup for any developer or solo creator who wants to move faster and reduce manual steps in the publishing pipeline.

📢 Learn More

🧪 Source code avalaible on Github https://github.com/matyo91/vocal-chat-app

If you're interested in creating your own automation tools, or want to build end-to-end workflows like this one, I've created a full training to help you get started:

Thanks for reading,
and keep building 🔧 — your ideas deserve to be automated.

• Post a comment