VueJS — TinyMCE — AI Plugin

Fast & easy tutorial on how to implement the AI Plugin into TinyMCE Editor in a VueJs Application 👨‍💻.

TinyMCE — AI Plugin

🔑 Required Keys

1. TinyMCE Cloud Key (The Most Advanced WYSIWYG Editor | Trusted Rich Text Editor | TinyMCE)
2. OpenAI Key (OpenAI)

⚙️Setup

1. Create new VueJS Project

vue create tinymce-demo

2. Create new Vue File

3. Add textarea

4. Add TinyMCE Cloud URL

5. Add mounted Hook to initialize TinyMCE — Full File

Some notes:

• Lower the number of “max_tokens” to reduce potential high costs
• Play with the “temperature” attribute: a lower number means that the API responds with text that is more aligned with the content. Higher means it’s more “creative”
• You don’t have to directly call the openai service from the Editor itself if you don’t want your keys in the frontend project. You can build your own backend api that calls the OpenAI API’s. I will show you that on a seperate tutorial…

Result:

🛟 Troubleshooting

1. OpenAI Requests throws “You exceeded your current quota, please check your plan and billing details.” Error

Tipp: Upgrade your plan to “pay-as-you-go” or add your account to an organization and generate a new API Key. You can limit your costs via “hard limit” and “soft limit”.

Useful Documentation:

• AI Assistant plugin | TinyMCE Documentation
• https://platform.openai.com/docs/api-reference/completions/create