Enhancing Text and Extracting Keywords with TinyMCE and Azure OpenAI API - A Beginner's Journey with ChatGPT-4

Discover how a non-coder with some experience leveraged ChatGPT-4 to integrate TinyMCE with Azure OpenAI API for improving text, extracting keywords, and generating an ingress in just six hours.

Introduction:

The trend of using generative AI to produce amusing or thought-provoking content for social media has become quite popular. However, AI can also be used for more practical purposes, such as improving written content and extracting valuable information. In this article, I'll share my journey as a non-coder with some experience in Node.js and a beginner in JavaScript who managed to create a proof of concept for integrating TinyMCE and Azure OpenAI API with the help of ChatGPT-4. My goal was to enhance text, generate an ingress, and extract 10 keywords quickly. The entire process took me just six hours, compared to the several days it would have taken me with traditional research methods. Here's a step-by-step account of my experience.

The Journey:

I began with a simple cURL description of the Azure OpenAI API, which I provided to ChatGPT-4. I had a clear idea of what I wanted to achieve but needed guidance on how to proceed. With the help of ChatGPT-4, I was able to create an editor capable of making text better, generating an ingress, and extracting 10 keywords in a matter of hours. The AI's assistance streamlined the process and allowed me to focus on my objectives without getting bogged down in technical details.

Prerequisites:

• A TinyMCE API key from https://www.tiny.cloud/my-account/dashboard/
• An Azure OpenAI instance with ChatGPT 3.5 Turbo enabled
• Node.js installed on your local machine
• Basic understanding of JavaScript and HTML
• Access to ChatGPT-4 for support and guidance

Step 1: Set up your project

Create a new directory for your project and install the necessary dependencies. Use npm init to create a package.json file, and then install express, dotenv, and the other required packages.

Step 2: Configure environment variables

Create a .env file to store your TinyMCE API key and Azure OpenAI API key. This ensures that your sensitive information is secure and not exposed in the source code.

Step 3: Create your HTML file

Build the HTML structure for your project, including a textarea element for TinyMCE, an input field for keywords, and a chat window to display the output from the Azure OpenAI API.

Step 4: Initialize TinyMCE and create custom buttons

In a separate JavaScript file, initialize TinyMCE with your API key and create two custom buttons: one for improving the text ("Make Text Better") and another for extracting keywords ("Get Keywords"). Add these buttons to the toolbar and set up their respective onAction event listeners.

Step 5: Implement the API calls

For each button, create an async function to fetch data from the Azure OpenAI API using the appropriate system message. For "Make Text Better," the system message should be about making the text better, and for "Get Keywords," it should be about extracting keywords. Pass the editor content as the user message for both cases.

Step 6: Display the results

Once you receive the response from the API, display the enhanced text or keywords in the chat window. Add a "Use Keywords" button to add the extracted keywords to the keywords input field.

Step 7: Set up your server

Create a server.mjs file to handle the backend of your application. Use Express to create routes for your API calls and handle the POST requests. Make sure to use the environment variables from your .env file for your API keys.

Conclusion:

Leveraging ChatGPT-4 to guide me through the process of integrating TinyMCE with Azure OpenAI API was an amazing experience. Despite not being a coder, I was able to create a functional text editor capable of enhancing written content, generating an ingress, and extracting keywords using the power of ChatGPT 3.5 Turbo. This combination can greatly improve the quality of your written content and provide valuable insights into relevant keywords for various purposes such as SEO and content marketing.

The future is bright, and the possibilities with AI are not yet at limit. I hope my journey inspires you to explore the potential of AI in your projects, regardless of your coding expertise. It seems that you can really make custom solutions with no-code.

And offcourse the link to the github repo:) https://github.com/tonihintikka/azureopenaiwithtinymce6demo