Giter VIP home page Giter VIP logo

commercetools-magic's Introduction

commercetools Magic

Utilize OpenAI's APIs to dynamically create Product Descriptions in commercetools Composable Commerce.

magic-full.mov

This repository contains all the necessary components to create and deploy a functioning example of integrating commercetools Composable Commerce with OpenAI. Including:

  • commercetools configuration
    • Product Type (includes attributes to prompt OpenAI with keywords and tone for product description context)
    • Product States and Transitions (identify and automate products which are ready for a generated desription)
    • Subscription (automates the call to the processing )
  • Google Cloud components
    • Pub/Sub Topic and Subscription
    • Cloud Function

How to use

Once deployed, the integration is automated with the native functionality of commercetools Merchant Center.

Product Type

  1. Create a Product with the OpenAI Product Type
  2. Enter a Product Name, add comma-seperated descriptive words & terms in the 'Seed Words' attribute, select a 'Tone' from the options, and click 'Save'
  3. Transition the State (in the top right corner) to 'Ready for Magic'
  4. Wait 20-30 seconds for the Subscription to send the message to the topic, relay to the Cloud Function, and then to OpenAI and return with the description
  5. Refresh the screen and review the AI generated 'Product Description'

Example Product

Requirements

Configuration

Environment Variables

For Google Cloud Functions deployment set the environment variables in a .env.yaml (use .example.env.yaml as template)

The SEED_TEXT_EXPERT & SEED_TEXT_SOPHISTICATED can be modified to influence the response from OpenAI.

Note: The CTP_PRODUCT_STATE_TRANSITION_ID needs to be set manually after the Terraform script creates the product-description-updated State.

Terraform Secrets

Create a secrets.tfvars file in the terraform/ directory and populate it with the following variables:

ct_client_id="<commercetools-api-client-id-with-manage-project-scope>"
ct_client_secret="<commercetools-secret-for-above-client>"
ct_project_key="<commercetools-project"
ct_scopes="manage_project:<commercetools-project>"
ct_api_url="<commercetools-api-url>"    #for example: "https://api.us-central1.gcp.commercetools.com"
ct_auth_url="<commercetools-auth-url>"  #for example: "https://auth.us-central1.gcp.commercetools.com"

gcp_project_id="<gcp-project>"
gcp_region="<gcp-region>  # for example: "us-central1"

Deployment

Apply Terraform

In the terraform/ directory, install the required modules by running:

terraform init

To preview the execution plan using the values provided in the secrets.tfvars file, run:

terraform plan -var-file secrets.tfvars

The plan outputs the operations that Terraform will attempt to perform. No changes have been made at this point.

To execute the operations, run the apply command. This will perform the operations on the resources that were outlined in the plan output. Enter yes when prompted to approve the changes.

terraform apply -var-file secrets.tfvars

Terraform runs through the execution plan and creates/updates/deletes the remote resources.

Add the id of the generated product-description-updated to the CTP_PRODUCT_STATE_TRANSITION_ID variable in the .env.yaml file.

Deploy Google Cloud Function

In the app/ directory, run:

npm install
gcloud functions deploy magic-description \
  --gen2 \
  --region=<your-gcp-region> \
  --runtime=nodejs18 \
  --entry-point=cloudEvent \
  --trigger-topic=product-state-transition
  --env-vars-file .env.yaml

gcloud will ask you to authenticate and enable the necessary APIs if applicable.

commercetools-magic's People

Contributors

hough-commercetools avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.