strapi-plugin-prompt-editor

strapi-plugin-prompt-editor

Stylish editor that works with ChatGPT and Gemini. Supports Strapi v5🎉

Demo

Setup

install

npm i strapi-plugin-prompt-editor

edit config

# config/plugins.js
...
 'prompt-editor': {
    enabled: true,
    config: {
      // It doesn't matter if it's just one or the other.
      openai_api_key: process.env.OPENAI_API_KEY,
      gemini_api_key: process.env.GEMINI_API_KEY
    }
  },
...

add Custom Field

Setting the admin panel

You can change the default settings for model and image size.

Change the model you can select

Selectable models can be changed from config.

// example
'prompt-editor': {
  enabled: true,
  config: {
    openai_api_key: process.env.OPENAI_API_KEY,
    gemini_api_key: process.env.GEMINI_API_KEY,
    chatGPTTextModels: [
      'gpt-4o',
      'gpt-4o-mini',
      'gpt-4',
      'gpt-3.5-turbo'
    ],
    geminiTextModels: [
      'gemini-1.5-flash',
      'gemini-1.5-pro',
      'gemini-1.0-pro',
    ]
  }
}

Customize API response

The fields of prompt-editor are in JSON format by default when retrieved through the API.

Therefore, we recommend implementing middlewares and converting them to HTML.

npm i @blocknote/server-util

ex) src/api/article/middlewares/content-converter.ts

import {Strapi} from '@strapi/strapi';
import {ServerBlockNoteEditor} from "@blocknote/server-util";

export default (config, {strapi}: { strapi: Strapi }) => {
  return async (ctx, next) => {
    await next()

    const editor = ServerBlockNoteEditor.create();
    const data = structuredClone(ctx.response.body.data)
    const convertToHTML = async (item: any) => {
      if (item.attributes.content === null) {
        item.attributes.content = ''
      } else {
        try {
          const block = JSON.parse(item.attributes.content)
          item.attributes.content = await editor.blocksToHTMLLossy(block)
        } catch (e) {
          console.error(e)
        }
      }
      return item
    }
    ctx.response.body.data = await Promise.all(data.map(item => convertToHTML(item)))
  }
}

Thanks

The editor of this plugin is based on BlockNote.

https://www.blocknotejs.org/