bigcommerce / ai-app-foundation

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_API_KEY= in .env
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

ai-app-foundation's Issues

The AI result loses indentation when passed back from the app to the BigCommerce Add-Edit page

Steps to reproduce:

1. Generate an AI description
2. Make sure you have indentions
3. Click the Use this button
4. Note that the indentions have disappeared.

App UI:

BigCommerce Add-Edit page UI:

Content sent from the app:
{"description":"First sentence\n\nSecond sentence\n\nThird sentence\n"}

Support dynamic app origin in `auth` redirect

ai-app-foundation/src/app/api/app/auth/route.ts

Line 77 in e02fa95

return NextResponse.redirect('https://21e6-8-29-231-140.ngrok-free.app', {

👋 Not sure if the Ngrok link above was intended to stay in here — might want to replace it with an env var, maybe APP_ORIGIN?