Looking to build a Wix app and sell it in our app market? Once you decide on one of our app frameworks and complete the initial setup, use the Wix MCP to speed up your development, and get to market faster and easier than ever before.
Prompt: Add a site widget to my CLI app that creates a button with text "Follow Us". When clicked, the button should open a modal with a list of social media platform links.
AI Response: The AI client follows the process to add a site widget (custom element) to the CLI app. It adds the necessary files, including code for a settings panel for the widget, and codes a custom element according to the requested parameters.
Prompt: Add the following logic to my Wix CLI application:
Check if the user is using a free or paid instance of the app.
If the version is paid, determine which plan it is.
On the dashboard page, display a limit on the number of items the user can add depending on their plan, with higher plans having higher limits.
Apply the same limit to the number of items the user adds.
AI Response: The AI client adds code that uses getAppInstance() to determine whether the app version is free or paid, and which plan it is if paid. It also adds code to the dashboard page that displays the limit to the user, and prevents them from adding extra items (e.g. creating more bookings or products) when they reach the limit allowed by their plan.
Prompt: Create an iframe in the dashboard page of my app. The iframe should do 3 things:
When the user opens the page, decode and verify the encoded instance, and log the user in once they're verified.
Create a form with the fields "Name" and "Email". Auto-fill the Email field with information from the app instance, and leave the Name field open for the user to fill out.
Save this form per app instance.
Expected AI response: The AI client adds an iframe in the dashboard page with code that does the following:
Receives and decodes the base64 encoded instance in order to verify the user. Upon verification it logs the user in.
Passes the decoded instance ID to getAppInstance() to retrieve the user’s email, and autofills it in the form.
Saves the form information for the verified instance ID in a database.
Prompt: Add code to my app that does the following:
Sets up a POST method that listens for the Wix App Instance Installed webhook.
Stores the app instance ID from that webhook in a database.
Uses the stored app instance ID to create an access token.
Uses the access token to call Query Products.
AI Response: The AI client adds backend code that does the following:
Listens for the App Instance Installed webhook.
Uses the app’s public key to verify that the webhook was sent by Wix.
Stores the instance ID it receives from that webhook in a database.
Uses the instance ID to create an access token.
In the dashboard code, it adds code to query a list of products, and creates a frontend UI to display the product list. The client also provides instructions on how to set up the webhook in your app dashboard.
Prompt: Add code to my app to handle the onBookingConfirmed() and onBookingRescheduled() events per app instance.
AI Response: The AI client runs the commands to add an event extension to your CLI app and installs any necessary dependencies, including @wix/bookings. It then replaces the boilerplate code in events.ts with some sample code for the onBookingConfirmed() and onBookingRescheduled() SDK events, which you can use as a starting point. The sample code extracts the instance ID that generates the event so you can take actions when an event occurs on the app instance level.
Prompt: Create a freemium app with the Wix CLI that displays a restaurant "dish of the day" in a site widget, and has a dashboard page where the user can schedule a rotation of dishes.
AI Response: The AI client takes the following steps to create a full app that you can test and continue building off of:
Creates a basic app with the Wix CLI.
Sets up the directory structure to support code for a dashboard page and a site widget.
Installs the necessary packages like @wix/dashboard and @wix/editor.
Writes code for the dashboard page that lets the user schedule dishes for the rotation and add new ones. The dashboard code includes a limit on the number of dishes a free plan user can add.
Codes a site widget that displays the dishes added by the user in the dashboard. The user can view the widget in their site editor. The client also codes a basic settings panel.