Get Started with Browser Mode AI

Learn how to work with QuickAI API right from your front-end application.

It's a simple way to get started with QuickAI API.

All API methods are available in the browser mode thanks to our variable authentication strategy.

Each project has a two API keys that you can use to authenticate your requests.

  • Secret Key - This is the key you can use to authenticate your requests in server-to-server mode.
  • Public Key - The key you can use in your frontend code. It only works for requests coming from domains (origins) that you have pre-approved in the keys settings.

You can find these keys in the project page in dashboard.

Prerequisites

  1. Your website has a https connection.
  2. You have a API Public Key.
  3. You have added the domain of your frontend application to the keys settings.

For local development, do not forget to add localhost to the list of allowed origins.

How to use

To use the browser mode, you need to pass the Public Key as a client_id query parameter:


const userInput = document.getElementById('userInput').value;

fetch('https://api.quickai.work/api/v1/checkContextInput?client_id=cli_test_1234567890', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
    },
    body: JSON.stringify({
        "context": 'Specialist appointment site, new service title',
        "prompt": userInput
    })
})
.then(response => response.json())
.then(data => {
    if (data.accepted === false) {
        // The input is rejected, you should not proceed
        // data.reason contains the detailed reason why the input was rejected
        throw new HTTPException(400, data.reason);
    }

    // The input is accepted, you can proceed
})

If the request comes from an approved origin, the API will return a JSON response 🎉.

Explore API Reference Documentation

Security Considerations

The Public Key used in browser mode has inherent security limitations. While our API server implements origin validation to reject unauthorized requests, malicious actors could potentially:

  1. Extract your public key from client-side code
  2. Spoof the origin header
  3. Make unauthorized API calls

To mitigate these risks:

  • Implement regular key rotation
  • Monitor API usage for suspicious patterns
  • Consider using server-to-server mode

This guide is intended to get you started quickly and assumes you’re familiar with programming, correctly handling errors, adequately securing, etc.