> ## Documentation Index
> Fetch the complete documentation index at: https://docs.vizochok.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Quickstart

> Get your AI shopping assistant running in 5 minutes. Install the widget, connect to the API, and start chatting.

Get VIZOCHOK up and running in your storefront in just a few minutes.

## Prerequisites

* A VIZOCHOK tenant account with API keys (contact us or use the admin panel)
* A web page or storefront where you want to embed the widget

<Steps>
  <Step title="Get Your API Keys">
    Log into the [VIZOCHOK Admin Panel](https://app.vizochok.com) and navigate to **Settings > API Keys**.

    You'll need two keys:

    * **Public key** (`pk_...`), used in the widget, safe to expose in frontend code
    * **Secret key** (`sk_...`), used for server-to-server API calls, keep this private

    <Warning>
      Never expose your secret key (`sk_...`) in client-side code. The secret key is for backend-to-backend communication only.
    </Warning>
  </Step>

  <Step title="Install the Widget">
    Choose your preferred installation method:

    <CodeGroup>
      ```bash npm theme={null}
      npm install @vizochok/widget
      ```

      ```html CDN theme={null}
      <script src="https://cdn.jsdelivr.net/npm/@vizochok/widget@latest/dist/vizochok-widget.umd.js"></script>
      ```
    </CodeGroup>
  </Step>

  <Step title="Initialize the Widget">
    Add the following code to your page:

    <CodeGroup>
      ```javascript npm / ES Module theme={null}
      import { VizochokWidget } from '@vizochok/widget';

      const widget = new VizochokWidget({
        apiKey: 'pk_your_public_key',
        apiBase: 'https://api.vizochok.com',
        userId: 'customer-123',       // your customer's unique ID
        language: 'uk',                 // 'uk' or 'en'
      });

      widget.mount();
      ```

      ```html CDN / Script Tag theme={null}
      <script>
        const widget = new VizochokWidget({
          apiKey: 'pk_your_public_key',
          apiBase: 'https://api.vizochok.com',
          userId: 'customer-123',
          language: 'uk',
        });

        widget.mount();
      </script>
      ```
    </CodeGroup>

    <Info>
      The `userId` should be a stable identifier for the customer (e.g., their account ID). This enables per-user rate limiting and conversation history.
    </Info>
  </Step>

  <Step title="Upload Your Product Catalog">
    The AI assistant needs product data to search and recommend products. Upload your catalog using the REST API:

    ```bash theme={null}
    curl -X PUT https://api.vizochok.com/api/v1/catalog/products \
      -H "Authorization: Bearer sk_your_secret_key" \
      -H "Content-Type: application/json" \
      -d '{
        "products": [
          {
            "sku": "milk-001",
            "name": "Milk 2.5% Lactel",
            "category": "Dairy",
            "unit": "pcs"
          }
        ]
      }'
    ```

    For full details on catalog format and bulk uploads, see the [Catalog Upload guide](/guides/catalog-upload).

    <Info>
      Without a catalog, the assistant will respond with "no catalog data available" when users ask about products.
    </Info>
  </Step>

  <Step title="Test It Out">
    Open your page in a browser. You should see the VIZOCHOK chat button in the bottom-right corner.

    Click it and try asking:

    * "What milk do you have?"
    * "Find me something for breakfast"
    * "Add 2 bottles of water to my cart"

    <Tip>
      If you haven't uploaded a product catalog yet, the assistant will let you know there's no catalog data available. Head to the [Catalog Upload guide](/guides/catalog-upload) to load your products.
    </Tip>
  </Step>
</Steps>

## What's Next?

<CardGroup cols={2}>
  <Card title="Upload Your Catalog" icon="upload" href="/guides/catalog-upload">
    Load your product data so the AI can search and recommend products.
  </Card>

  <Card title="Set Up Webhooks" icon="webhook" href="/webhooks/overview">
    Connect your backend for real-time prices, stock, and cart operations.
  </Card>

  <Card title="Customize the Widget" icon="palette" href="/guides/customization">
    Match the widget's look and feel to your brand.
  </Card>

  <Card title="Widget Configuration" icon="gear" href="/widget/configuration">
    Explore all available configuration options.
  </Card>
</CardGroup>