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

# Quickstart

> Get your first moderation workflow running in 5 minutes

## Overview

This guide will help you set up Pixel Patrol and moderate your first piece of content in just a few minutes.

## Prerequisites

Before you begin, you'll need:

* A Pixel Patrol account ([Sign up here](https://app.pixelpatrol.net/auth))
* Your API credentials (found in your dashboard)
* Node.js 16+ or any HTTP client

## Step 1: Create Your First Site

Sites represent your applications or projects that need moderation.

<Steps>
  <Step title="Navigate to Sites">
    Go to the [Sites page](https://app.pixelpatrol.net/protected/sites) in your
    dashboard
  </Step>

  <Step title="Create a New Site">
    Click "Create Site" and fill in: - **Name**: Your application name - **URL**:
    Your application URL - **Description**: Brief description of your site
  </Step>

  <Step title="Save Your Site ID">
    After creation, copy your Site ID - you'll need this for API calls
  </Step>
</Steps>

## Step 2: Set Up Moderation Rules

Configure how content should be moderated for your site.

<Tabs>
  <Tab title="Quick Setup">
    Use our pre-configured rule templates:

    1. Go to **Rule Groups** → **Create Rule Group**
    2. Select a template (e.g., "Social Media Platform")
    3. Adjust thresholds as needed
    4. Assign to your site
  </Tab>

  <Tab title="Custom Rules">
    Create custom rules from scratch:

    ```javascript theme={null}
    // Example rule configuration
    {
      "name": "Block Explicit Content",
      "type": "ai_moderation",
      "conditions": {
        "categories": ["explicit", "violence"],
        "threshold": 0.8
      },
      "action": "block"
    }
    ```
  </Tab>
</Tabs>

## Step 3: Submit Your First Media

Now let's submit content for moderation using the API.

<CodeGroup>
  ```bash cURL theme={null}
  curl -X POST https://api.pixelpatrol.net/functions/v1/submit-media \
    -H "Content-Type: application/json" \
    -d '{
      "api_key": "site_xxxxxxxxxxxxxxxxxxxx",
      "content_url": "https://example.com/image.jpg",
      "app_media_id": "user-upload-123",
      "metadata": {
        "user_id": "user123",
        "context": "profile_photo"
      }
    }'
  ```

  ```javascript JavaScript theme={null}
  const response = await fetch(
    "https://api.pixelpatrol.net/functions/v1/submit-media",
    {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        api_key: "site_xxxxxxxxxxxxxxxxxxxx",
        content_url: "https://example.com/image.jpg",
        app_media_id: "user-upload-123",
        metadata: {
          user_id: "user123",
          context: "profile_photo",
        },
      }),
    }
  );

  const result = await response.json();
  console.log("Media ID:", result.id);
  console.log("Status:", result.status);
  ```

  ```python Python theme={null}
  import requests

  response = requests.post(
      'https://api.pixelpatrol.net/functions/v1/submit-media',
      headers={
          'Content-Type': 'application/json'
      },
      json={
          'api_key': 'site_xxxxxxxxxxxxxxxxxxxx',
          'content_url': 'https://example.com/image.jpg',
          'app_media_id': 'user-upload-123',
          'metadata': {
              'user_id': 'user123',
              'context': 'profile_photo'
          }
      }
  )

  result = response.json()
  print(f"Media ID: {result['id']}")
  print(f"Status: {result['status']}")
  ```
</CodeGroup>

## Step 4: Check Moderation Results

You can check the moderation results in two ways:

### Option 1: Polling

Check the status of your submitted media:

```javascript theme={null}
const checkStatus = async (mediaId) => {
  const response = await fetch(
    "https://api.pixelpatrol.net/functions/v1/get-media-status",
    {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        api_key: "site_xxxxxxxxxxxxxxxxxxxx",
        media_id: mediaId,
      }),
    }
  );

  const result = await response.json();

  if (result.status === "completed") {
    console.log("Moderation result:", result.moderationResult);
    console.log("Action:", result.action); // 'approve', 'block', or 'review'
  }
};
```

### Option 2: Webhooks (Recommended)

Set up a webhook endpoint to receive real-time notifications:

1. Go to your site settings
2. Add your webhook URL
3. Save the webhook secret for verification

```javascript theme={null}
// Example webhook handler
app.post("/webhook/moderation", (req, res) => {
  // Verify webhook signature
  const signature = req.headers["x-pixelpatrol-signature"];
  if (!verifyWebhookSignature(req.body, signature, WEBHOOK_SECRET)) {
    return res.status(401).send("Invalid signature");
  }

  const { mediaId, status, moderationResult, action } = req.body;

  // Handle the moderation result
  if (action === "block") {
    // Remove or hide the content
    blockContent(mediaId);
  } else if (action === "review") {
    // Flag for manual review
    flagForReview(mediaId);
  }

  res.status(200).send("OK");
});
```

## Step 5: View Dashboard Analytics

Monitor your moderation activity in the dashboard:

<CardGroup cols={2}>
  <Card title="Queue Page" icon="list" href="https://app.pixelpatrol.net/protected/queue">
    View all submitted media and their moderation status
  </Card>

  <Card title="Media Details" icon="magnifying-glass" href="https://app.pixelpatrol.net/protected/media-detail">
    Detailed view of individual media items with AI analysis
  </Card>

  <Card title="Site Analytics" icon="chart-line" href="https://app.pixelpatrol.net/protected/sites">
    Track moderation statistics and webhook performance
  </Card>

  <Card title="Usage Tracking" icon="gauge" href="https://app.pixelpatrol.net/protected/subscription">
    Monitor your API usage and limits
  </Card>
</CardGroup>

## Next Steps

<Card title="API Reference" icon="code" href="/api-reference/introduction">
  Explore the complete API documentation
</Card>

<Card title="Integration Guides" icon="puzzle" href="/guides/nextjs-integration">
  Framework-specific integration tutorials
</Card>

<Card title="Advanced Features" icon="rocket" href="/features/ai-moderation">
  Learn about AI providers, batch processing, and more
</Card>

<Card title="Best Practices" icon="lightbulb" href="/guides/moderation-strategies">
  Optimize your moderation workflow
</Card>

## Support

Need help? We're here for you:

* 📧 Email: [support@pixelpatrol.net](mailto:hello@pixelpatrol.net)
* 💬 Discord: [Join our community](https://discord.gg/pixelpatrol)
* 📚 GitHub: [Report issues](https://github.com/pixelpatrol/issues)
