I asked GPT-4 to build a Shopify app. In an hour. And it did.

Ralf Elfving — Sat, 25 Mar 2023 15:20:59 +0000

“You’re a helpful Shopify app developer assistant, helping to code Shopify apps.”

That’s what I typed into the system field of GPT-4 before I copy/pasted a Shopify app tutorial from Gadget.dev into the prompt. Then I added my question:

“What other kind of Shopify app tutorials do you think you could build with Gadget using the example tutorial above? Give five reasonable Shopify app projects you think we could complete together in less than an hour.”

I wanted to know if it could do it. I assume it could, but I wanted to find out for myself. I wanted to experience it. About an hour later, I had a complete Shopify app that updated a newly created customer segmentation metafield based on custom spending tiers whenever customers places an order.

Watch me.. erh.. GPT-4 code

I recorded a video of me going from prompt to finished app. Don't worry, I fast forward over the segments where GPT-4 is responding or where I'm debugging.

There's some resources and a longer write-up linked in the video as well if you want to get more details.

Some learnings from using GPT-4 to code

I'm not a very good developer. I just have ideas that are outside of my current experience, and available time. I learned that the importance to developing with GPT-4 is primarily two things.

Understanding what GPT-4 has context of, and what is unique to your circumstance that you need to feed it context about (in my case I used a new platform called Gadget)
Knowing enough to debug, or how to identify bugs and feed back the errors to GPT-4 to iterate.

I'm hoping my experience can inspire others to try this or something similar out. Time box an hour, and try something new you'd normally need many hours to complete. I think you'd be surprised what you can achieve.

Build a GPT3-powered Shopify app that generates product descriptions (15 min tutorial)

Ralf Elfving — Thu, 05 Jan 2023 00:04:21 +0000

While waiting for a flight during the holidays, I decided to create a Shopify app that automatically generate product descriptions using GPT3. It took just 30 minutes from idea to finished app.

After I posted a short clip of the app on LinkedIn, a lot of people reached out asking if I could show them how I built it.
So here it is, a step-by-step video tutorial with the code needed to build your own GPT3-powered Shopify product description generator app.

It’ll take you just 15 minutes from scratch, half the time it took me :)

Below you’ll find the video, the code file, and links to all the free services you’ll need to build it.

Video

Code file

This is the Javascript code I use in my video, which you can use as is. If you’re using a different framework than Gadget to build your app you’ll need to make some adjustments.

const { Configuration, OpenAIApi } = require("openai");

module.exports = async ({ api, record, params, logger, connections }) => {

  const configuration = new Configuration({
    apiKey: process.env.OPENAI_API_KEY,
  });

  const openai = new OpenAIApi(configuration);
  let newProductDescription;
  let productTags = params.shopifyProduct.tags;

  // Only generate a GPT3 product description if the product tag 'GPT3' exists
  if (productTags.includes('GPT3')) {

    try {
      const completion = await openai.createCompletion({
        model: "text-davinci-002",
        prompt: `This is a Shopify product titled "${params.shopifyProduct.title}" with  description: ${params.shopifyProduct.body}. Please make the description more imaginative and attractive to potential buyers. Use text speaking to the buyer, include a sentance with made up facts that will impress them, and two scenarios of why they would want to own this product. Return the new description with HTML markup <p> for paragraphs and <br> for line breaks. Use at most 200 words.`,
        temperature: 0,
        max_tokens: 250,
        top_p: 1,
        frequency_penalty: 0.0,
        presence_penalty: 0.0
      });

      // Store the GPT3 product description
      newProductDescription = completion.data.choices[0].text;

    } catch (error) {
      if (error.response) {
        console.log(error.response.status);
      } else {
        console.log(error.message);
      }
    }

    // Remove the GPT3 tag from array of product tags
    productTags.splice(productTags.indexOf('GPT3'), 1);

    // Set up the Shopify connection and write the new product description, and remove the GPT3 product tag
    const shopify = await connections.shopify.current;
    if (shopify) {
      await shopify.product.update(record.id, { tags: productTags, body_html: newProductDescription });

      console.log(`Updated product description for product ID ${record.id} to: ${newProductDescription}`)
    }

  }

};

Links to services used (free to sign-up)

Gadget.dev (fully hosted Shopify app backend)
OpenAI.com (OpenAI/GPT3 API keys)
Shopify.com/partners (Create development store and app)
NPMJS.com (OpenAI NPM package)
OpenAI Create Completion documentation

I hope this video inspires you to try building something with Shopify and GPT3, and I’d love to hear what.
If you have any questions about the video, or how to build Shopify apps, leave a comment on the video, or reach out on Twitter, LinkedIn, or Discord.

Want to learn more about how you can build Shopify apps using Gadget?

If you want to learn more about Gadget, the platform I used to power the Shopify app, here’s a few useful links.

TL;DR: What’s Gadget?
End-to-end Shopify app tutorials
Examples how Gadget has been used by Shopify Plus merchants and Shopify agencies.

Forem: Ralf Elfving