### Copy Environment File

Source: https://github.com/muxinc/stream.new/blob/main/README.md

Copies the example environment file to a local file that can be modified. This file is typically ignored by Git to prevent sensitive information from being committed.

```bash
cp .env.local.example .env.local
```

--------------------------------

### Webhook Responses for Workflow Status Updates

Source: https://context7.com/muxinc/stream.new/llms.txt

Shows example JSON responses from Mux indicating the start of moderation and summarization workflows. These responses include a success message, the asset ID, and a workflow ID, useful for tracking the status of background processing tasks.

```json
{
  "message": "Moderation workflow started",
  "asset_id": "xYzAbCdEfGhIjKlM",
  "workflow_id": "wf_abc123"
}

```

```json
{
  "message": "Summarization workflow started",
  "asset_id": "xYzAbCdEfGhIjKlM",
  "track_id": "track123",
  "workflow_id": "wf_def456"
}

```

--------------------------------

### Get oEmbed Metadata for Video URL

Source: https://context7.com/muxinc/stream.new/llms.txt

Provides oEmbed metadata for video URLs, facilitating rich embeds in compatible applications. The response includes dimensions, provider information, and the HTML for an embeddable iframe.

```bash
# Get oEmbed data for a video
curl "https://stream.new/api/oembed?url=https://stream.new/v/pLaYbAcKiD123456"

# Response
{
  "title": "Video uploaded to stream.new",
  "type": "video",
  "height": 720,
  "width": 1280,
  "version": "1.0",
  "provider_name": "stream.new",
  "provider_url": "https://stream.new",
  "thumbnail_height": 720,
  "thumbnail_width": 1280,
  "thumbnail_url": "https://image.mux.com/pLaYbAcKiD123456/thumbnail.jpeg?width=480",
  "html": "<iframe width=\"1280\" height=\"720\" src=\"https://stream.new/v/pLaYbAcKiD123456/embed\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture\" allowfullscreen></iframe>"
}
```

--------------------------------

### Get Mux Asset Details by ID

Source: https://context7.com/muxinc/stream.new/llms.txt

Fetches details for a Mux asset, including its status and playback ID. This is useful for confirming if video processing is complete and obtaining the playback ID required for streaming.

```bash
# Get asset details
curl https://stream.new/api/assets/xYzAbCdEfGhIjKlM

# Response - Asset ready
{
  "asset": {
    "id": "xYzAbCdEfGhIjKlM",
    "status": "ready",
    "errors": null,
    "playback_id": "pLaYbAcKiD123456"
  }
}

# Response - Asset still processing
{
  "asset": {
    "id": "xYzAbCdEfGhIjKlM",
    "status": "preparing",
    "errors": null,
    "playback_id": "pLaYbAcKiD123456"
  }
}
```

--------------------------------

### Browser Recording with MediaRecorder API (TypeScript/React)

Source: https://context7.com/muxinc/stream.new/llms.txt

Client-side video recording from camera or screen capture using the MediaRecorder API. This snippet demonstrates starting camera/screen share, recording, and stopping the recording, with support for audio monitoring and chunked recording.

```tsx
import { useRef, useState } from 'react';

function RecordingComponent() {
  const [isRecording, setIsRecording] = useState(false);
  const streamRef = useRef<MediaStream | null>(null);
  const recorderRef = useRef<MediaRecorder | null>(null);
  const mediaChunks = useRef<Blob[]>([]);

  const startCamera = async () => {
    const stream = await navigator.mediaDevices.getUserMedia({
      video: true,
      audio: true,
    });
    streamRef.current = stream;
    // Display preview in video element
    document.querySelector('video').srcObject = stream;
  };

  const startScreenShare = async () => {
    const stream = await navigator.mediaDevices.getDisplayMedia({
      video: true,
    });
    // Optionally add microphone audio
    const audioStream = await navigator.mediaDevices.getUserMedia({
      audio: true,
    });
    stream.addTrack(audioStream.getAudioTracks()[0]);
    streamRef.current = stream;
  };

  const startRecording = () => {
    const options = { mimeType: 'video/webm;codecs=vp9' };
    recorderRef.current = new MediaRecorder(streamRef.current, options);

    recorderRef.current.ondataavailable = (e) => {
      mediaChunks.current.push(e.data);
    };

    recorderRef.current.onstop = () => {
      const blob = new Blob(mediaChunks.current, { type: 'video/webm' });
      const file = new File([blob], 'recording.webm', { type: blob.type });
      // Upload file using MuxUploader or fetch to /api/uploads
    };

    recorderRef.current.start(2000); // 2 second chunks
    setIsRecording(true);
  };

  const stopRecording = () => {
    recorderRef.current?.stop();
    streamRef.current?.getTracks().forEach(track => track.stop());
    setIsRecording(false);
  };

  return (
    <div>
      <video autoPlay muted />
      <button onClick={startCamera}>Start Camera</button>
      <button onClick={startScreenShare}>Share Screen</button>
      <button onClick={isRecording ? stopRecording : startRecording}>
        {isRecording ? 'Stop' : 'Record'}
      </button>
    </div>
  );
}

```

--------------------------------

### Get Asset Details

Source: https://context7.com/muxinc/stream.new/llms.txt

Retrieves asset information including playback ID and status. Use this to check if video processing is complete and get the playback ID for streaming.

```APIDOC
## GET /api/assets/{id}

### Description
Retrieves details for a Mux asset.

### Method
GET

### Endpoint
/api/assets/{id}

### Parameters
#### Path Parameters
- **id** (string) - Required - The ID of the asset.

#### Query Parameters
None

#### Request Body
None

### Request Example
```bash
curl https://stream.new/api/assets/xYzAbCdEfGhIjKlM
```

### Response
#### Success Response (200)
- **asset** (object)
  - **id** (string) - The asset ID.
  - **status** (string) - The status of the asset (e.g., "ready", "preparing").
  - **errors** (array | null) - Any errors associated with the asset.
  - **playback_id** (string) - The playback ID for the asset.

#### Response Example - Asset ready
```json
{
  "asset": {
    "id": "xYzAbCdEfGhIjKlM",
    "status": "ready",
    "errors": null,
    "playback_id": "pLaYbAcKiD123456"
  }
}
```

#### Response Example - Asset still processing
```json
{
  "asset": {
    "id": "xYzAbCdEfGhIjKlM",
    "status": "preparing",
    "errors": null,
    "playback_id": "pLaYbAcKiD123456"
  }
}
```
```

--------------------------------

### Environment Configuration (Bash)

Source: https://context7.com/muxinc/stream.new/llms.txt

Required and optional environment variables for running the application with full functionality. This includes Mux API credentials and optional settings for webhook verification and Mux Data analytics.

```bash
# Required - Mux API credentials
MUX_TOKEN_ID=your_mux_token_id
MUX_TOKEN_SECRET=your_mux_token_secret

# Optional - Webhook signature verification
MUX_WEBHOOK_SIGNATURE_SECRET=your_webhook_secret

# Optional - Mux Data analytics
NEXT_PUBLIC_MUX_ENV_KEY=your_mux_env_key

```

--------------------------------

### AI Summarization Workflow (TypeScript)

Source: https://context7.com/muxinc/stream.new/llms.txt

Background workflow for generating AI-powered video summaries with titles, descriptions, and tags, along with custom Q&A answers. This snippet utilizes @mux/ai for both summarization and question answering.

```typescript
import { getSummaryAndTags, askQuestions } from '@mux/ai/workflows';

async function processSummaryAndQuestions(assetId: string) {
  const [summaryResult, questionsResult] = await Promise.all([
    getSummaryAndTags(assetId, {
      provider: 'openai',
      tone: 'neutral',
      includeTranscript: true,
    }),
    askQuestions(assetId, [
      { question: "Is this professionally produced content?" },
      { question: "Does this video contain offensive language?" },
      { question: "Is this appropriate for all audiences?" },
    ], {
      provider: 'openai',
      includeTranscript: true,
    }),
  ]);

  // summaryResult contains:
  // - title: string
  // - description: string
  // - tags: string[]

  // questionsResult contains:
  // - answers: Array<{ question: string, answer: string }>

  return { summaryResult, questionsResult };
}

```

--------------------------------

### Mux AI Webhook Handler

Source: https://context7.com/muxinc/stream.new/llms.txt

Handles Mux webhooks for AI-powered content moderation and summarization. Processes `video.asset.ready` events to trigger moderation and `video.asset.track.ready` events to trigger summarization when subtitles are generated.

```APIDOC
## POST /api/webhooks/mux-ai

### Description
Handles Mux webhooks for AI-powered content moderation and summarization.

### Method
POST

### Endpoint
/api/webhooks/mux-ai

### Parameters
#### Query Parameters
None

#### Request Body
- The request body will contain Mux webhook event data. Refer to Mux documentation for specific event structures.

### Request Example
```bash
# Configure webhook in Mux dashboard pointing to:
# POST https://stream.new/api/webhooks/mux-ai
```

### Response
#### Success Response (200)
- Typically returns a 200 OK status to acknowledge receipt of the webhook.

#### Response Example
(No specific JSON response is detailed, but a 200 OK is expected for successful processing.)
```

--------------------------------

### Handle Mux AI Webhooks for Video Events

Source: https://context7.com/muxinc/stream.new/llms.txt

A webhook handler designed to process incoming Mux webhooks related to AI features. It manages `video.asset.ready` events for content moderation and `video.asset.track.ready` events for video summarization based on subtitle generation.

```bash
# Configure webhook in Mux dashboard pointing to:
# POST https://stream.new/api/webhooks/mux-ai

```

--------------------------------

### Create Mux Direct Upload URL and Upload Video

Source: https://context7.com/muxinc/stream.new/llms.txt

Generates a Mux direct upload URL for client-side uploads. It configures the upload for public playback, basic quality, and automatic subtitle generation. After obtaining the URL, a video file can be uploaded using a PUT request.

```bash
# Create a new upload URL
curl -X POST https://stream.new/api/uploads

# Response
{
  "id": "aAbBcCdDeEfFgGhH",
  "url": "https://storage.googleapis.com/video-storage-gcs-us-east1-uploads/..."
}

# Upload a video file to the returned URL
curl -X PUT \
  -H "Content-Type: video/mp4" \
  --data-binary @video.mp4 \
  "https://storage.googleapis.com/video-storage-gcs-us-east1-uploads/..."
```

--------------------------------

### Webhook Payload: video.asset.ready

Source: https://context7.com/muxinc/stream.new/llms.txt

This webhook is triggered when a video asset is ready for playback and processing.

```APIDOC
## Webhook Payload: video.asset.ready

### Description
This webhook is triggered when a video asset is ready for playback and processing.

### Method
POST

### Endpoint
`/webhooks`

### Request Body
- **type** (string) - Required - The type of webhook event, should be `video.asset.ready`.
- **data** (object) - Required - Contains details about the asset.
  - **id** (string) - Required - The unique identifier for the asset.
  - **playback_ids** (array) - Required - A list of playback IDs associated with the asset.
    - **id** (string) - Required - The playback ID.
  - **duration** (number) - Optional - The duration of the video in seconds.

### Request Example
```json
{
  "type": "video.asset.ready",
  "data": {
    "id": "xYzAbCdEfGhIjKlM",
    "playback_ids": [{"id": "pLaYbAcKiD123456"}],
    "duration": 120.5
  }
}
```

### Response
#### Success Response (200)
- **message** (string) - A confirmation message indicating the workflow has started.
- **asset_id** (string) - The ID of the asset for which the workflow was started.
- **workflow_id** (string) - The ID of the initiated workflow.

#### Response Example
```json
{
  "message": "Moderation workflow started",
  "asset_id": "xYzAbCdEfGhIjKlM",
  "workflow_id": "wf_abc123"
}
```
```

--------------------------------

### Webhook Payloads for Video Asset and Subtitle Track Events

Source: https://context7.com/muxinc/stream.new/llms.txt

Illustrates the JSON structure of webhook payloads received from Mux for 'video.asset.ready' and 'video.asset.track.ready' events. These payloads contain information about the video asset and its associated tracks, such as IDs, duration, and track details.

```json
{
  "type": "video.asset.ready",
  "data": {
    "id": "xYzAbCdEfGhIjKlM",
    "playback_ids": [{"id": "pLaYbAcKiD123456"}],
    "duration": 120.5
  }
}

```

```json
{
  "type": "video.asset.track.ready",
  "data": {
    "type": "text",
    "text_type": "subtitles",
    "text_source": "generated_vod",
    "asset_id": "xYzAbCdEfGhIjKlM",
    "id": "track123"
  }
}

```

--------------------------------

### Webhook Payload: video.asset.track.ready

Source: https://context7.com/muxinc/stream.new/llms.txt

This webhook is triggered when a new track (e.g., subtitles) is ready for a video asset.

```APIDOC
## Webhook Payload: video.asset.track.ready

### Description
This webhook is triggered when a new track (e.g., subtitles) is ready for a video asset.

### Method
POST

### Endpoint
`/webhooks`

### Request Body
- **type** (string) - Required - The type of webhook event, should be `video.asset.track.ready`.
- **data** (object) - Required - Contains details about the track and asset.
  - **type** (string) - Required - The type of the track (e.g., `text`).
  - **text_type** (string) - Optional - The specific type of text track (e.g., `subtitles`).
  - **text_source** (string) - Optional - The source of the text track (e.g., `generated_vod`).
  - **asset_id** (string) - Required - The ID of the associated asset.
  - **id** (string) - Required - The unique identifier for the track.

### Request Example
```json
{
  "type": "video.asset.track.ready",
  "data": {
    "type": "text",
    "text_type": "subtitles",
    "text_source": "generated_vod",
    "asset_id": "xYzAbCdEfGhIjKlM",
    "id": "track123"
  }
}
```

### Response
#### Success Response (200)
- **message** (string) - A confirmation message indicating the workflow has started.
- **asset_id** (string) - The ID of the asset associated with the track.
- **track_id** (string) - The ID of the newly ready track.
- **workflow_id** (string) - The ID of the initiated workflow.

#### Response Example
```json
{
  "message": "Summarization workflow started",
  "asset_id": "xYzAbCdEfGhIjKlM",
  "track_id": "track123",
  "workflow_id": "wf_def456"
}
```
```

--------------------------------

### oEmbed Endpoint

Source: https://context7.com/muxinc/stream.new/llms.txt

Returns oEmbed metadata for video URLs, enabling rich embeds in applications that support the oEmbed standard. Includes thumbnail dimensions and embed iframe HTML.

```APIDOC
## GET /api/oembed

### Description
Returns oEmbed metadata for a given video URL.

### Method
GET

### Endpoint
/api/oembed

### Parameters
#### Query Parameters
- **url** (string) - Required - The URL of the video to get oEmbed data for.

#### Request Body
None

### Request Example
```bash
curl "https://stream.new/api/oembed?url=https://stream.new/v/pLaYbAcKiD123456"
```

### Response
#### Success Response (200)
- **title** (string) - The title of the video.
- **type** (string) - The type of embed, usually "video".
- **height** (integer) - The height of the embed player.
- **width** (integer) - The width of the embed player.
- **version** (string) - The oEmbed version.
- **provider_name** (string) - The name of the provider.
- **provider_url** (string) - The URL of the provider.
- **thumbnail_height** (integer) - The height of the thumbnail.
- **thumbnail_width** (integer) - The width of the thumbnail.
- **thumbnail_url** (string) - The URL of the video thumbnail.
- **html** (string) - The HTML embed code for the video player.

#### Response Example
```json
{
  "title": "Video uploaded to stream.new",
  "type": "video",
  "height": 720,
  "width": 1280,
  "version": "1.0",
  "provider_name": "stream.new",
  "provider_url": "https://stream.new",
  "thumbnail_height": 720,
  "thumbnail_width": 1280,
  "thumbnail_url": "https://image.mux.com/pLaYbAcKiD123456/thumbnail.jpeg?width=480",
  "html": "<iframe width=\"1280\" height=\"720\" src=\"https://stream.new/v/pLaYbAcKiD123456/embed\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture\" allowfullscreen></iframe>"
}
```
```

--------------------------------

### Create Direct Upload

Source: https://context7.com/muxinc/stream.new/llms.txt

Creates a new Mux direct upload URL for clients to upload video files directly to Mux. The upload is configured with public playback policy, basic video quality, and automatic subtitle generation.

```APIDOC
## POST /api/uploads

### Description
Creates a new Mux direct upload URL.

### Method
POST

### Endpoint
/api/uploads

### Parameters
#### Query Parameters
None

#### Request Body
None

### Request Example
```bash
curl -X POST https://stream.new/api/uploads
```

### Response
#### Success Response (200)
- **id** (string) - The ID of the upload.
- **url** (string) - The URL to which the video file should be uploaded.

#### Response Example
```json
{
  "id": "aAbBcCdDeEfFgGhH",
  "url": "https://storage.googleapis.com/video-storage-gcs-us-east1-uploads/..."
}
```

### Uploading a Video File

Once you have the upload URL, you can upload a video file using a PUT request.

#### Request Example
```bash
curl -X PUT \
  -H "Content-Type: video/mp4" \
  --data-binary @video.mp4 \
  "https://storage.googleapis.com/video-storage-gcs-us-east1-uploads/..."
```
```

--------------------------------

### Video Playback with MuxPlayer

Source: https://context7.com/muxinc/stream.new/llms.txt

React component for video playback using Mux Player with automatic quality selection, analytics, and customizable accent colors.

```APIDOC
## Video Playback with MuxPlayer

### Description
React component for video playback using Mux Player with automatic quality selection, analytics, and customizable accent colors.

### Method
GET

### Endpoint
`/v/pLaYbAcKiD123456` (Example playback URL)

### Parameters
#### Query Parameters
- **time** (number) - Optional - Start playback at a specific timestamp in seconds.
- **color** (string) - Optional - Custom accent color (hex code without the '#').

### Request Example (Component Usage)
```tsx
import MuxPlayer from '@mux/mux-player-react/lazy';

function VideoPlayer({ playbackId, poster, aspectRatio, blurDataURL }) {
  return (
    <MuxPlayer
      playbackId={playbackId}
      poster={poster}
      placeholder={blurDataURL}
      envKey={process.env.NEXT_PUBLIC_MUX_ENV_KEY}
      accentColor="#f97316"
      startTime={0}
      style={{
        aspectRatio: `${aspectRatio}`,
        maxWidth: '100%',
        maxHeight: '100%',
      }}
      metadata={{
        video_id: playbackId,
        video_title: playbackId,
        player_name: 'stream.new',
      }}
    />
  );
}
```

### Request Example (URL Customization)
`https://stream.new/v/pLaYbAcKiD123456?time=10&color=f97316`

### Response
This component renders a video player. The actual video stream is served via Mux's infrastructure.

#### Success Response (200)
(Video player interface)

#### Response Example
(No direct JSON response, renders an interactive video player)
```

--------------------------------

### Submit Video Abuse Report

Source: https://context7.com/muxinc/stream.new/llms.txt

Submits an abuse report for a specific video, identified by its playback ID. Reports are forwarded to Airtable and Slack for moderation review, including the reason and any additional comments.

```bash
# Report a video for abuse
curl -X POST https://stream.new/api/report \
  -H "Content-Type: application/json" \
  -d '{
    "playbackId": "pLaYbAcKiD123456",
    "reason": "inappropriate content",
    "comment": "Contains explicit material"
  }'

# Response
{
  "message": "thank you"
}
```

--------------------------------

### Check Mux Upload Status by ID

Source: https://context7.com/muxinc/stream.new/llms.txt

Retrieves the status of a Mux upload using its unique ID. The response includes the upload status, the storage URL, and the associated asset ID once video processing has commenced.

```bash
# Check upload status
curl https://stream.new/api/uploads/aAbBcCdDeEfFgGhH

# Response - Upload in progress
{
  "upload": {
    "status": "waiting",
    "url": "https://storage.googleapis.com/...",
    "asset_id": null
  }
}

# Response - Upload complete, asset created
{
  "upload": {
    "status": "asset_created",
    "url": "https://storage.googleapis.com/...",
    "asset_id": "xYzAbCdEfGhIjKlM"
  }
}
```

--------------------------------

### Report Abuse

Source: https://context7.com/muxinc/stream.new/llms.txt

Submits an abuse report for a video. Reports are sent to Airtable (if configured) and Slack for moderation review.

```APIDOC
## POST /api/report

### Description
Submits an abuse report for a video.

### Method
POST

### Endpoint
/api/report

### Parameters
#### Query Parameters
None

#### Request Body
- **playbackId** (string) - Required - The playback ID of the video to report.
- **reason** (string) - Required - The reason for the abuse report.
- **comment** (string) - Optional - Additional comments about the abuse.

### Request Example
```bash
curl -X POST https://stream.new/api/report \
  -H "Content-Type: application/json" \
  -d '{
    "playbackId": "pLaYbAcKiD123456",
    "reason": "inappropriate content",
    "comment": "Contains explicit material"
  }'
```

### Response
#### Success Response (200)
- **message** (string) - A confirmation message.

#### Response Example
```json
{
  "message": "thank you"
}
```
```

--------------------------------

### AI Moderation Workflow (TypeScript)

Source: https://context7.com/muxinc/stream.new/llms.txt

Background workflow using @mux/ai for automatic content moderation. This snippet shows concurrent execution of OpenAI and Hive AI moderation and optional auto-deletion of flagged content.

```typescript
import { getModerationScores } from '@mux/ai/workflows';
import Mux from '@mux/mux-node';

const mux = new Mux();

async function processModeration(assetId: string) {
  // Run both moderation providers concurrently
  const [openaiResult, hiveResult] = await Promise.all([
    getModerationScores(assetId, {
      provider: 'openai',
      thresholds: { sexual: 0.9, violence: 0.9 },
      maxSamples: 5,
    }),
    getModerationScores(assetId, {
      provider: 'hive',
      thresholds: { sexual: 0.9, violence: 0.9 },
      maxSamples: 5,
    }),
  ]);

  // Check if either service flags content
  const shouldDelete = openaiResult.exceedsThreshold || hiveResult.exceedsThreshold;

  if (shouldDelete && process.env.AUTO_DELETE_ENABLED === '1') {
    const asset = await mux.video.assets.retrieve(assetId);
    const playbackId = asset.playback_ids?.[0]?.id;
    await mux.video.assets.deletePlaybackId(assetId, playbackId);
  }

  return {
    openaiResult,
    hiveResult,
    autoDeleted: shouldDelete,
  };
}

```

--------------------------------

### Client-Side Video Upload with MuxUploader

Source: https://context7.com/muxinc/stream.new/llms.txt

React component for client-side video uploads using the Mux Uploader component. Handles file selection, drag-and-drop, upload progress, and automatic redirect to playback page.

```APIDOC
## Client-Side Video Upload with MuxUploader

### Description
React component for client-side video uploads using the Mux Uploader component. Handles file selection, drag-and-drop, upload progress, and automatic redirect to playback page.

### Method
POST

### Endpoint
`/api/uploads` (for creating upload URL)

### Parameters
#### Request Body (for `/api/uploads`)
This endpoint does not expect a request body.

### Request Example (Client-side interaction)
```tsx
import MuxUploader from '@mux/mux-uploader-react';
import { useState } from 'react';
import { useRouter } from 'next/navigation';
import useSwr from 'swr';

function UploadPage() {
  const router = useRouter();
  const [uploadId, setUploadId] = useState('');
  const [isPreparing, setIsPreparing] = useState(false);

  // Poll for upload status when preparing
  const { data } = useSwr(
    isPreparing ? `/api/uploads/${uploadId}` : null,
    (url) => fetch(url).then(res => res.json()),
    { refreshInterval: 5000 }
  );

  // Redirect when asset is ready
  if (data?.upload?.asset_id) {
    router.push(`/assets/${data.upload.asset_id}`);
  }

  const createUpload = async () => {
    const res = await fetch('/api/uploads', { method: 'POST' });
    const { id, url } = await res.json();
    setUploadId(id);
    return url;
  };

  return (
    <MuxUploader
      endpoint={createUpload}
      onUploadStart={() => console.log('Upload started')}
      onSuccess={() => setIsPreparing(true)}
      onUploadError={(e) => console.error('Upload failed:', e.detail.message)}
    />
  );
}
```

### Response
#### Success Response (200) from `/api/uploads`
- **id** (string) - The unique identifier for the upload.
- **url** (string) - The URL to which the file should be uploaded.

#### Response Example (from `/api/uploads`)
```json
{
  "id": "upload123",
  "url": "https://uploads.mux.com/upload123"
}
```

#### Success Response (200) from polling `/api/uploads/{uploadId}`
- **upload** (object) - Contains upload status details.
  - **asset_id** (string) - The ID of the asset once it's ready, if applicable.

#### Response Example (from polling `/api/uploads/{uploadId}`)
```json
{
  "upload": {
    "asset_id": "xYzAbCdEfGhIjKlM"
  }
}
```
```

--------------------------------

### Delete Asset

Source: https://context7.com/muxinc/stream.new/llms.txt

Deletes a Mux asset. Requires the slack moderator password for authorization. Used by the Slack moderation integration for content removal.

```APIDOC
## DELETE /api/assets/{id}

### Description
Deletes a Mux asset.

### Method
DELETE

### Endpoint
/api/assets/{id}

### Parameters
#### Path Parameters
- **id** (string) - Required - The ID of the asset to delete.

#### Query Parameters
None

#### Request Body
- **slack_moderator_password** (string) - Required - The password for Slack moderator authorization.

### Request Example
```bash
curl -X DELETE https://stream.new/api/assets/xYzAbCdEfGhIjKlM \
  -H "Content-Type: application/json" \
  -d '{"slack_moderator_password": "your-moderator-password"}'
```

### Response
#### Success Response (200)
- Returns a success message string.

#### Response Example - Success
```
"Deleted xYzAbCdEfGhIjKlM"
```

#### Error Response (401)
- **Unauthorized** - If the slack_moderator_password is missing or invalid.

#### Response Example - Unauthorized
```
HTTP 401 Unauthorized
```
```

--------------------------------

### Client-Side Video Upload with MuxUploader in React

Source: https://context7.com/muxinc/stream.new/llms.txt

A React component that utilizes the Mux Uploader to handle client-side video uploads. It includes functionality for file selection, drag-and-drop, monitoring upload progress, and automatically redirecting the user to the playback page once the asset is ready. It depends on `@mux/mux-uploader-react` and `next/navigation`.

```tsx
import MuxUploader from '@mux/mux-uploader-react';
import { useState } from 'react';
import { useRouter } from 'next/navigation';
import useSwr from 'swr';

function UploadPage() {
  const router = useRouter();
  const [uploadId, setUploadId] = useState('');
  const [isPreparing, setIsPreparing] = useState(false);

  // Poll for upload status when preparing
  const { data } = useSwr(
    isPreparing ? `/api/uploads/${uploadId}` : null,
    (url) => fetch(url).then(res => res.json()),
    { refreshInterval: 5000 }
  );

  // Redirect when asset is ready
  if (data?.upload?.asset_id) {
    router.push(`/assets/${data.upload.asset_id}`);
  }

  const createUpload = async () => {
    const res = await fetch('/api/uploads', { method: 'POST' });
    const { id, url } = await res.json();
    setUploadId(id);
    return url;
  };

  return (
    <MuxUploader
      endpoint={createUpload}
      onUploadStart={() => console.log('Upload started')}
      onSuccess={() => setIsPreparing(true)}
      onUploadError={(e) => console.error('Upload failed:', e.detail.message)}
    />
  );
}

```

--------------------------------

### Delete Mux Asset with Authorization

Source: https://context7.com/muxinc/stream.new/llms.txt

Deletes a Mux asset. This operation requires the 'slack_moderator_password' for authorization and is typically used by the Slack moderation integration for content removal.

```bash
# Delete an asset
curl -X DELETE https://stream.new/api/assets/xYzAbCdEfGhIjKlM \
  -H "Content-Type: application/json" \
  -d '{"slack_moderator_password": "your-moderator-password"}'

# Response - Success
"Deleted xYzAbCdEfGhIjKlM"

# Response - Unauthorized (missing or invalid password)
HTTP 401 Unauthorized
```

--------------------------------

### Check Upload Status

Source: https://context7.com/muxinc/stream.new/llms.txt

Retrieves the current status of an upload by its ID. Returns the upload status, URL, and associated asset ID once processing begins.

```APIDOC
## GET /api/uploads/{id}

### Description
Retrieves the status of an upload by its ID.

### Method
GET

### Endpoint
/api/uploads/{id}

### Parameters
#### Path Parameters
- **id** (string) - Required - The ID of the upload to check.

#### Query Parameters
None

#### Request Body
None

### Request Example
```bash
curl https://stream.new/api/uploads/aAbBcCdDeEfFgGhH
```

### Response
#### Success Response (200)
- **upload** (object)
  - **status** (string) - The status of the upload (e.g., "waiting", "asset_created").
  - **url** (string) - The upload URL.
  - **asset_id** (string | null) - The ID of the associated Mux asset, if available.

#### Response Example - Upload in progress
```json
{
  "upload": {
    "status": "waiting",
    "url": "https://storage.googleapis.com/...",
    "asset_id": null
  }
}
```

#### Response Example - Upload complete, asset created
```json
{
  "upload": {
    "status": "asset_created",
    "url": "https://storage.googleapis.com/...",
    "asset_id": "xYzAbCdEfGhIjKlM"
  }
}
```
```

--------------------------------

### Video Playback with MuxPlayer in React

Source: https://context7.com/muxinc/stream.new/llms.txt

A React component for embedding and playing videos using Mux Player. It supports features like automatic quality selection, analytics, customizable accent colors, and poster images. The component can be configured via props and accepts a playback ID to identify the video asset. It depends on `@mux/mux-player-react/lazy`.

```tsx
import MuxPlayer from '@mux/mux-player-react/lazy';

function VideoPlayer({ playbackId, poster, aspectRatio, blurDataURL }) {
  return (
    <MuxPlayer
      playbackId={playbackId}
      poster={poster}
      placeholder={blurDataURL}
      envKey={process.env.NEXT_PUBLIC_MUX_ENV_KEY}
      accentColor="#f97316"
      startTime={0}
      style={{
        aspectRatio: `${aspectRatio}`,
        maxWidth: '100%',
        maxHeight: '100%',
      }}
      metadata={{
        video_id: playbackId,
        video_title: playbackId,
        player_name: 'stream.new',
      }}
    />
  );
}

// Video URL with query parameters for customization
// https://stream.new/v/pLaYbAcKiD123456?time=10&color=f97316
// - time: Start playback at specific timestamp (seconds)
// - color: Custom accent color (hex without #)

```

--------------------------------

### Add Secrets to Vercel CLI

Source: https://github.com/muxinc/stream.new/blob/main/README.md

Adds Mux API access token ID and secret as secrets to your Vercel project using the Vercel CLI. These secrets are used by the deployed application to authenticate with Mux services.

```bash
vercel secrets add stream_new_token_id <MUX_TOKEN_ID>
vercel secrets add stream_new_token_secret <MUX_TOKEN_SECRET>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.