Quickstart: Hyper Commerce

​

What’s Hypermode?

​

Quickstart

​

Step 1: Creating a new project

1. Visit the Hypermode website and sign up with your GitHub, Google, or email address. Once signed in, you’ll see the Hypermode projects dashboard.
2. After accessing your dashboard, click the “Create New Project” button
   
3. Select “Deploy Instant Vector Search” from the options.
   
4. Choose between using sample data or your own data:
   

   If you choose to use your own data, you’ll need to upload it using a CSV file and a Python script provided in Step 2.

5. Once created, Hypermode provisions a runtime with instant connectivity to shared AI models that bring the functions within your project to life. The source code for the project is open source, available in this repository.

​

Step 2: Adding your data

1. Ensure you have Python installed on your machine. You can verify this by running python --version or python3 --version in your terminal.
2. Prepare your CSV file with the following headers: Unique Id,Product Name,Category,Selling Price,About Product,Image,Num Stars,In Stock.
3. Copy the script from this file.
4. Update the script with your endpoint (located in your projects dashboard), API key (located in the settings tab of your Hypermode console), and the path to your CSV file.
5. Install the necessary dependencies:
   Copy

   Ask AI

   pip install requests gql requests_toolbelt pandas numpy
   

6. Run the script to populate your data:
   Copy

   Ask AI

   python3 ecommerce_populate.py
   

​

Step 3: Exploring the Console

• Functions: These are serverless functions written in AssemblyScript (a TypeScript-like language) that are automatically exposed as GraphQL APIs. Once deployed, you can query these functions within your app.
• Models: This section represents the AI models defined for your project. These models handle tasks like embedding text into vectors for search. Hypermode provides open source shared and dedicated model hosting for rapid experimentation. You can also connect to your preferred large language model, including OpenAI, Anthropic, and Gemini.
• Connections: You define all external connections, with the runtime denying all other egress for secure-by-default processing.
• Endpoint: The GraphQL endpoint for your project, which you’ll use to interact with your APIs and query your data.

​

Step 4: Querying your data

1. Navigate to the Query tab in your Hypermode console to test your data.
2. Paste the following query to retrieve sample product data:
   Copy

   Ask AI

   query {
     searchProducts(maxItems: 4, query: "sparkly shoes") {
       searchObjs {
         product {
           name
           description
           id
           stars
           isStocked
         }
       }
     }
   }
   

3. You should see the data for 4 items returned from the searchProducts endpoint that match your query, sparkly shoes. Feel free to experiment with the query—adjust the maxItems value to return more items, or change the search query to see how the returned data matches your input. Additionally, notice that the function ranks items based on their star rating and whether they’re in stock.
   

​

Step 5: Testing in the Frontend

1. Clone the repository that contains a pre-built UI for testing. You can find the repo here.
2. Retrieve your API key from the Settings section of your Hypermode console.
3. Create a .env.local file in the root of your project and add your API key and endpoint to it, like this:
   Copy

   Ask AI

   HYPERMODE_API_TOKEN=YOUR_API_TOKEN
   HYPERMODE_API_ENDPOINT=YOUR_API_ENDPOINT
   

4. Run the project locally by executing the following command:
   Copy

   Ask AI

   npm run dev
   

5. With the project running locally, you can now test the search capability in the provided UI. Try searching for products to see how your Hypermode project’s API integrates and returns data.

Note: The intent of this quickstart is for proof of concepts. For more advanced usage, such as customizing search re-ranking logic, you’ll need to clone the template to your own repository to make and push changes. Refer to the next section for further instructions.

​

Customizing the app

​

Step 1: Clone the template repository

1. Go to the template repo hyper-commerce.
2. Clone the repo by clicking Use this template in the upper-right corner and selecting Create new repo. This clones the code into your own GitHub repository
3. Visit the Hypermode website and sign up with your GitHub, Google, or email address. Once signed in, you’ll see your Hypermode projects dashboard.
4. In the Hypermode console, click New Project.
5. Select Import a GitHub Repo.
   
6. Choose the repo you just created.
   
7. Click “Deploy” to finish creating your project.
8. Once deployed, your functions and collections are visible in the Hypermode console.

​

Step 2: Seeding your data

1. Make your first commit to the repo to trigger a deployment.
2. Ensure you have Python installed on your machine. You can verify this by running python --version or python3 --version in your terminal.
3. The template includes a script at /backend/extras/ecommerce_populate.py to seed your data, as well as sample data located in /backend/extras/hyper_toys.csv.
4. If you want to use your own data, replace the content of the sample CSV (hyper_toys.csv) with your own data. Make sure the headers in your CSV match the following headers: Uniq Id,Product Name,Category,Selling Price,About Product,Image,Num Stars,In Stock
5. Install the required dependencies by running the following command in your project directory:
   Copy

   Ask AI

   pip install -r requirements.txt
   

6. Edit the ecommerce_populate.py file to include your endpoint and API key, which you can find in your Hypermode dashboard.
7. Run the script to seed the data into your project:
   Copy

   Ask AI

   python3 ecommerce_populate.py
   

8. The script batch inserts the data and displays the time taken for each operation. Inserting the full dataset (10,000 rows) may take around 18 minutes. If you want to test with a smaller dataset, feel free to reduce the size of the CSV.

​

Step 3: Customizing your functions

​

Example: Customizing product rankings

1. Go to the search.ts file and locate the reRankAndFilterSearchResultObjects function.
2. Modify the function to only rank based on the star rating, like this:

function reRankAndFilterSearchResultObjects(
  objs: collections.CollectionSearchResultObject[],
  thresholdStars: f32,
): collections.CollectionSearchResultObject[] {
  for (let i = 0; i < objs.length; i++) {
    const starRes = collections.getText(
      consts.productStarCollection,
      objs[i].key,
    )
    const stars = parseFloat(starRes)

    objs[i].score *= stars * 0.1
  }

  objs.sort((a, b) => (a.score < b.score ? -1 : a.score > b.score ? 1 : 0))

  const filteredResults: collections.CollectionSearchResultObject[] = []
  for (let i = 0; i < objs.length; i++) {
    const starRes = collections.getText(
      consts.productStarCollection,
      objs[i].key,
    )
    const stars = parseFloat(starRes)
    if (stars >= thresholdStars) {
      filteredResults.push(objs[i])
    }
  }

  return filteredResults
}

​

Deploying the change

1. Once you’ve updated the function, commit the changes to your repo.
2. Any commit to the main branch automatically triggers a Hypermode deployment.
3. After deployment, when you query the searchProducts endpoint again, it ranks products solely based on their star rating.

​

Step 4: Testing your functions

​

Test in the console IDE

​

Run the frontend locally

HYPERMODE_API_TOKEN = YOUR_API_TOKEN
HYPERMODE_API_ENDPOINT = YOUR_API_ENDPOINT

Note: Both of these values are available in the Hypermode console