AI App Foundation

This single-click app presents BigCommerce merchants with the ability to generate product descriptions. It's also listed in our app marketplace.

🌟 This was originally open sourced as part of the Google <> BigCommerce AI Hackathon. Check out that event's hackpack for more detail on Vertex AI and BigCommerce App Extensions. 🌟

Install

1. Use Node 18+ and NPM 8+
2. Install npm packages
   • npm install

Usage

To run the app locally, follow these instructions:

1. Add and start ngrok. Note: use port 3000 to match Next's server.
   • ngrok http 3000
   • Get the ngrok_id from the Forwarding row. You will use it in the next step.
2. Register a draft app.
   • Enter app callbacks using the following syntax:
     • Auth Callback URL: https://{ngrok_id}.ngrok.app/api/app/auth, for example https://12345.ngrok.app/api/app/auth
     • Load Callback URL: https://{ngrok_id}.ngrok.app/api/app/load
     • Uninstall Callback URL: https://{ngrok_id}.ngrok.app/api/app/uninstall
   • Configure the following OAuth scopes as directed in Setup:
3. Copy .env.example to .env.
4. Replace CLIENT_ID and CLIENT_SECRET in .env (from View Client ID in the dev portal).
5. Update AUTH_REDIRECT in .env with the ngrok install callback URL.
6. Enter a JWT secret in .env.
   • JWT key should be at least 32 random characters (256 bits) for HS256
7. Replace FIRE_API_KEY, FIRE_DOMAIN and FIRE_PROJECT_ID in .env
8. Replace GOOGLE_SERVICE_ACCOUNT_JSON_BASE64 in .env
   • Create a service account
   • Create a service account key
   • Download the result json file, base64 encode it and replace GOOGLE_SERVICE_ACCOUNT_JSON_BASE64 in .env with the result string
9. Start your dev environment in a separate terminal from ngrok. If ngrok restarts, update callbacks in steps 2 and 5 with the new ngrok_id.
   • npm run dev
10. Install the app and launch.

Deploy with Vercel

Contributing

Please feel free to ask questions or raise issues in GitHub Issues/Discussions.

Security

To enhance security, include a CSRF token for sensitive actions (e.g., modifying product descriptions) or operations that might generate load or costs (such as AI prompts). This will provide an extra layer of protection and ensure proper authorization.

Learn more

The BigCommerce platform

Looking to help the world's leading brands and the next generation of successful merchants take flight? To learn more about developing on top of the BigCommerce platform, take a look at the following resources:

• BigCommerce Developer Center - Learn more about BigCommerce platform features, APIs, and SDKs
• BigDesign - An interactive site for BigCommerce's React Components with live code editing
• Building BigCommerce Apps - Learn how to build apps for the BigCommerce marketplace