A Nextjs + Pinecone + OpenAI GPT site to surface answers to Shopify help center content

Overview

**This is a research demo. Support is not provided.

Shopify Help Center Search via GPT

Quickly surface answers from Shopify's help center using GPT.

Technologies used

  • ScrapingBee to scrape list of help center urls
  • Mongodb to store scraped data
  • OpenAI to created embeddings vector points and completion prompt
  • Pinecone to store vectors in db

How this works

  1. Run tasks/1-sitemap-to-csv.js to convert Shopify's Help Center Sitemap.xml into CSV and drop all columns except urls.
  2. Convert CSV into array of links.
  3. Run tasks/2-scrape.js to scrape the article text from every link using ScrapingBee and isnert text into Mongodb using url as unique index.
  4. Run tasks/3-generate-embeddings.js to generate OpenAI embeddings and upsert into Pinecone.

Why?

Created this as a research experiment in order to learn OpenAI embeddings + Pinecone. Added bonus was to have a way to quickly surface answers for my Shopify platform questions.

How to optimize this further

  • Split article text into smaller documents to decrease cost of token usage. Split by H2/section.
  • Test different models to see one cost. Curie is 10x cheaper than Davinci.
  • Search documents with a normal search engine (Algolia) and pass that document into open AI rather than using embedding’s and Pinecone.
  • Cache results for common queries.
  • Test a shorter prompt to further save tokens.

Preview

preview.png

You might also like...
Simple react js portfolio site.

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: ya

Skill UP Educational Site Built With React

Skill UP Educational Site Live Link https://skill-up-react.netlify.app/ Used Rea

Changd - Open source web monitoring application for monitoring visual site changes using screenshots, XPath's or API's
Changd - Open source web monitoring application for monitoring visual site changes using screenshots, XPath's or API's

Changd is a open source web monitoring application and a free alternative to Cha

A simple portfolio site, built in Next.js, Tailwind CSS - using this great blogging starter template.
A simple portfolio site, built in Next.js, Tailwind CSS - using this great blogging starter template.

A simple portfolio site, built in Next.js, Tailwind CSS - using this great blogging starter template.

Starter kit for developers who want to build an NFT minting site

NFT Dapp Starter Kit 🏗️ Ready to bootstrap your own NFT minting site? You're in the right place. This boilerplate repo contains an NFT minting contra

This project is designed to help those who use antd to develop a website(or web app). Maybe also need to use redux, router and so on.
This project is designed to help those who use antd to develop a website(or web app). Maybe also need to use redux, router and so on.

react-antd-redux-router-starter This project is designed to help those who use antd to develop a website(or web app). Maybe also need to use redux, ro

A library to help you prototype React apps faster

Substantiate A library to help you prototype React apps faster. It is a standard React reducer with four extra properties: Takes a query function. Thi

This is a react portfolio template build using react, typescript and tailwind css. It help developers and designers to showcase their work

React Portfolio Using Tailwind UI This project include a portfolio template which is built using React and Tailwind CSS. It help developer and designe

Template to create reactjs component library which will help you to create your dream library.

reactjs-library-template Template to create reactjs component library which will help you to create your dream library. How to use Commands to setup e

Owner
Gil Greenberg
I build & scale Shopify apps @Checkout-Blocks
Gil Greenberg
Nextacular 19 Dec 1, 2022
Portfolio site developed with NextJs & React framer-motion for fluid fancy animations

Portfolio site developed with NextJs & React framer-motion for fluid fancy animations

Pranav Yeole 12 Oct 16, 2022
A anime discovery, streaming site made with NextJs and TailwindCSS. Uses AniList API and video data from GogoAnime. No ads and no vpn required

Animeflix - Watch animes online The open-source anime streaming service made with NextJs and TailwindCSS. It lets you search, watch animes without any

Chirag Singla 372 Dec 29, 2022
A boilerplate for using Next.js with Shopify, TypeScript, and react-query 🔥

next-shopify-ts The objective of this boilerplate is to set up everything the developer will need (in terms of configuration) to start a next + shopif

basement.studio 26 Jan 3, 2023
hopify boilerplate for embedded apps. Built and re-written from the official Shopify CLI's app boilerplate

Shopify boilerplate for embedded apps. Built and re-written from the official Shopify CLI's app boilerplate, but moved it to Typescript, and more modularized, so you can use any frontend framework you want. I left it comes by default, with React.

Leonel Aimar 10 Dec 5, 2022
An embedded Shopify app starter template made with Node, Express, React and Vite, with all the required stuff hooked up.

Shopify Node.js x Express.js x React.js Boilerplate An embedded app starter template to get up and ready with Shopify app development with JavaScript.

Harshdeep Singh Hura 125 Dec 31, 2022
Nextjs-chakra-navigation-example - NextJS with chakra-ui responsive nav example

nextjs-chakra-navigation-example I looked at how to implement navigation in next

Sandy Marko Knauer 1 Sep 6, 2022
An Ecommerce site for Cosmetic and Makeup products built using ReactJs , NodeJs and MongoDB.

An Ecommerce site for Cosmetic and Makeup products built using ReactJs , NodeJs and MongoDB. It Provides role based authentication to Admin for maintaining the store and Users for Purchasing product including cart,Checkout and Payment.

Mayuresan 3 Nov 8, 2021
Haroff log - Blogging site developed on React, Redux (Frontend Stack).

Haroff log - Blogging site developed on React, Redux (Frontend Stack). Micro serviced with Django Rest API logic and PostgreSQL database...

ARAFAT O. OLAYIWOLA 4 Jan 10, 2022
Vanilla JSX + HTML + CSS compiler and static-site generator (SSG)

VANIL Vanilla JSX + HTML + CSS compiler and static-site generator (SSG) VANIL is a compiler and static site generator (SSG) that combines TSX/JSX+HTML

Aron Homberg 6 Nov 17, 2022