Use AI to create great product descriptions with this free plugin

#opensource #ai #webdev #javascript

If you've ever dabbled in ecommerce, you probably know: writing great product descriptions can be tough.

I've created a Medusa Admin widget that lets you write and improve product descriptions with AI. This can save you a lot of time when adding new products or optimizing your current descriptions.

You can use this in various ways to make your ecomm life easier. Think content creation, automated workflows, recommendations, etc.

In this article I'll explain how to set up the plugin and how to extend it with your own prompts and buttons.

Medusa: open-source building blocks for commerce

Quick background on Medusa: we create open-source building blocks needed to build amazing ecommerce websites or enable commerce functionality in any product.

Prerequisites

This plugin requires an OpenAI API key and platform account. Go to https://platform.openai.com/account/api-keys to set this up.
You need a Medusa server with the Admin installed. The fastest way to set this up is by using create-medusa-app.

Getting Started

Note: if you want to use the hosted plugin as is, follow these steps. If you want to customize the prompts, skip to "Add your own prompts" below.

Install the package with yarn add medusa-product-ai-widget or npm i medusa-product-ai-widget.
In medusa-config.js, add the plugin to the plugins array with the following options:

const plugins = [
  // ... other plugins
  {
    resolve: `medusa-product-ai-widget`,
    options: {
      api_key: process.env.OPENAI_API_KEY,
      enableUI: true
    }
  }
]

In your .env file, add an OPENAI_API_KEY environment variable containing your API key:

OPENAI_API_KEY=<YOUR OPENAI API KEY>

Start your dev server and log into the admin. Open any product that has a product description and the widget will appear on the bottom of the page!

Add your own prompts

If you want to customize the plugin and add in your own prompts, it's better to grab the plugins source code and add it directly to your Medusa server.

To do so, head over to the plugin repo and grab the contents of /src/. Copy the contents of the folders to the corresponding folders in your Medusa server project. If you have other custom admin routes set-up, make sure you don't overwrite them in /src/api/routes/admin/index.ts and other index files.

To add in your own prompts, there's 3 files to edit:

1. src/types/product-ai-tools.ts
Add the name of your prompts to the PromptTypes type definition. Names can be anything, but I recommend to make them short and easily distinguishable.

export type PromptTypes =
  | "fix_writing"
  | "make_longer"
  | "make_shorter"
  | "improve_seo"
  | "your_custom_prompt"
  | "another_custom_prompt";

2. src/api/routes/admin/completion/product-descriptions.ts
Now add your newly created prompt name to the PROMPTS object. The key will be the actual prompt that is being sent to ChatGPT.

const PROMPTS: Prompts = {
  // ... other prompts
  your_custom_prompt: "Write a custom prompt that describes to ChatGPT what to do!",
  another_custom_prompt: "Write a another custom prompt that describes to ChatGPT what to do. Be specific!"
};

The key to high quality responses is to be specific. Look at the existing prompts for inspiration.

3. src/admin/widgets/product-ai-tools/product-ai-tools.tsx
As a final step, add a new button to the widget that will trigger your new prompt. Do this by adding your newly created prompt name to the prompts object. The key will be the text that's displayed on the button.

const prompts: Prompts = {
  fix_writing: "Fix writing",
  make_longer: "Make longer",
  make_shorter: "Make shorter",
  improve_seo: "Optimize for SEO",
  your_custom_prompt: "Custom button text",
  another_custom_prompt: "Another button text",
};