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

# Explainers

> Visual explanations with animations and diagrams

## Overview

The Explainers component creates engaging video explanations that combine visual elements like diagrams, animations, and charts with AI narration. Perfect for complex topics that benefit from visual learning.

## Creating an Explainers Component

<CodeGroup>
  ```javascript JavaScript theme={null}
  import StudyfetchSDK from '@studyfetch/sdk';

  const client = new StudyfetchSDK({
    apiKey: 'your-api-key',
    baseURL: 'https://studyfetchapi.com',
  });

  const explainerComponent = await client.v1.components.create({
    name: 'Cell Biology Explainer',
    type: 'explainers',
    config: {
      materials: ['mat-123', 'mat-456'],
      folders: ['folder-789'],
      title: 'Understanding Cell Structure and Function',
      style: 'educational',
      targetLength: 300,
      model: 'gpt-4o-mini-2024-07-18',
      imageSearch: true,
      webSearch: true,
      verticalVideo: false
    }
  });

  console.log('Explainer component created:', explainerComponent._id);
  ```

  ```python Python theme={null}
  from studyfetch_sdk import StudyfetchSDK

  client = StudyfetchSDK(
      api_key="your-api-key",
      base_url="https://studyfetchapi.com",
  )

  explainer_component = client.v1.components.create(
      name="Cell Biology Explainer",
      type="explainers",
      config={
          "materials": ["mat-123", "mat-456"],
          "folders": ["folder-789"],
          "title": "Understanding Cell Structure and Function",
          "style": "educational",
          "targetLength": 300,
          "model": "gpt-4o-mini-2024-07-18",
          "imageSearch": True,
          "webSearch": True,
          "verticalVideo": False
      }
  )

  print(f"Explainer component created: {explainer_component._id}")
  ```

  ```java Java theme={null}
  import com.studyfetch.javasdk.client.StudyfetchSdkClient;
  import com.studyfetch.javasdk.client.okhttp.StudyfetchSdkOkHttpClient;
  import com.studyfetch.javasdk.models.v1.components.ComponentResponse;
  import com.studyfetch.javasdk.models.v1.components.ComponentCreateParams;

  public class CreateExplainersComponent {
      public static void main(String[] args) {
          StudyfetchSdkClient client = StudyfetchSdkOkHttpClient.builder()
              .fromEnv()
              .baseUrl("https://studyfetchapi.com")
              .build();

          ComponentCreateParams params = ComponentCreateParams.builder()
              .name("Cell Biology Explainer")
              .type(ComponentCreateParams.Type.EXPLAINERS)
                      .config(ComponentCreateParams.Config.ExplainersConfigDto.builder()
              .materials(List.of("mat-123", "mat-456"))
              .folders(List.of("folder-789"))
              .title("Understanding Cell Structure and Function")
              .style("educational")
              .targetLength(300)
              .model("gpt-4o-mini-2024-07-18")
              .imageSearch(true)
              .webSearch(true)
              .verticalVideo(false)
              .build())
              .build();

          ComponentResponse component = client.v1().components().create(params);
          System.out.println("Explainer component created: " + component._id());
      }
  }
  ```

  ```csharp C# theme={null}
  using StudyfetchSDK;
  using StudyfetchSDK.Models.V1.Components;
  using System;
  using System.Collections.Generic;
  using System.Threading.Tasks;
  public class CreateExplainersComponent
  {
      public static async Task CreateExplainer()
      {
          var client = new StudyfetchSDKClient()
          {
              APIKey = Environment.GetEnvironmentVariable("STUDYFETCH_API_KEY"),
              BaseUrl = new Uri("https://studyfetchapi.com")
          };

          var explainerComponent = await client.V1.Components.Create(new()
          {
              Name = "Cell Biology Explainer",
              Type = StudyfetchSDK.Models.V1.Components.ComponentCreateParamsProperties.Type.Explainers,
              Config = new StudyfetchSDK.Models.V1.Components.ComponentCreateParamsProperties.ConfigProperties.ExplainersConfigDto()
              {
                  Materials = new List<string> { "mat-123" }
              }
          });

          Console.WriteLine($"Explainer component created: {explainerComponent._ID}");
      }
  }
  ```
</CodeGroup>

## Configuration Parameters

<ParamField body="name" type="string" required>
  Name of the explainers component
</ParamField>

<ParamField body="type" type="string" required>
  Must be `"explainers"`
</ParamField>

<ParamField body="config" type="object" required>
  Explainers configuration object

  <Expandable title="Configuration Properties">
    <ParamField body="materials" type="array" required>
      Array of material IDs for visual explanation context
    </ParamField>

    <ParamField body="folders" type="array">
      Array of folder IDs containing materials
    </ParamField>

    <ParamField body="title" type="string" required>
      Title of the explainer video
    </ParamField>

    <ParamField body="style" type="string" default="educational">
      Visual style of the explainer:

      * `professional` - Clean, corporate style
      * `casual` - Relaxed, conversational approach
      * `educational` - Traditional teaching style
      * `animated` - Fun, cartoon-style animations
    </ParamField>

    <ParamField body="targetLength" type="integer" default="300">
      Target video length in seconds:

      * `120` - 2 minutes (quick overview)
      * `300` - 5 minutes (standard)
      * `600` - 10 minutes (detailed)
      * `900` - 15 minutes (comprehensive)
      * `1200` - 20 minutes (in-depth)
    </ParamField>

    <ParamField body="model" type="string" default="gpt-4o-mini-2024-07-18">
      AI model to use for generating the explainer content
    </ParamField>

    <ParamField body="imageSearch" type="boolean" default="true">
      Enable searching for relevant images to include in the explainer
    </ParamField>

    <ParamField body="webSearch" type="boolean" default="true">
      Enable web search for additional information and context
    </ParamField>

    <ParamField body="verticalVideo" type="boolean" default="false">
      Create video in vertical format (9:16) for mobile viewing
    </ParamField>
  </Expandable>
</ParamField>

## Response

```json theme={null}
{
  "_id": "comp_303pqr",
  "name": "Cell Biology Explainer",
  "type": "explainers",
  "status": "processing",
  "config": {
    "materials": ["mat-123", "mat-456"],
    "folders": ["folder-789"],
    "title": "Understanding Cell Structure and Function",
    "style": "educational",
    "targetLength": 300,
    "model": "gpt-4o-mini-2024-07-18",
    "imageSearch": true,
    "webSearch": true,
    "verticalVideo": false
  },
  "createdAt": "2024-01-15T10:00:00Z",
  "updatedAt": "2024-01-15T10:00:00Z",
  "organizationId": "org_456def",
  "video": {
    "url": null,
    "thumbnailUrl": null,
    "duration": null
  }
}
```

## Embedding This Component

Once you've created an Explainers component, you can embed it on your website using the embedding API.

### Generate Embed URL

<CodeGroup>
  ```javascript JavaScript theme={null}
  const embedResponse = await client.v1.components.generateEmbed(explainerComponent._id, {
    // User tracking
    userId: 'user-456',
    studentName: 'Jane Smith',  // Student name for display
    groupIds: ['class-101', 'class-102'],
    sessionId: 'session-789',
    
    // Explainer-specific features
    features: {
      enableWebSearchSources: true,
      enableImageSources: true,
      enableTranscript: true,
      enableOutline: true
    },
    
    // Dimensions
    width: '100%',
    height: '600px',
    
    // Token expiry
    expiryHours: 24
  });
  ```

  ```python Python theme={null}
  embed_response = client.v1.components.generateEmbed(
      component_id=explainer_component._id,
      userId="user-456",
      student_name="Jane Smith",  # Student name for display
      groupIds=["class-101", "class-102"],
      sessionId="session-789",
      features={
          "enableWebSearchSources": True,
          "enableImageSources": True,
          "enableTranscript": True,
          "enableOutline": True
      },
      width="100%",
      height="600px",
      expiryHours=24
  )
  ```

  ```java Java theme={null}
  import com.studyfetch.javasdk.client.StudyfetchSdkClient;
  import com.studyfetch.javasdk.client.okhttp.StudyfetchSdkOkHttpClient;
  import com.studyfetch.javasdk.models.v1.components.ComponentGenerateEmbedParams;
  import com.studyfetch.javasdk.models.v1.components.ComponentGenerateEmbedResponse;

  StudyfetchSdkClient client = StudyfetchSdkOkHttpClient.builder()
      .fromEnv()
      .baseUrl("https://studyfetchapi.com")
      .build();

  ComponentGenerateEmbedParams params = ComponentGenerateEmbedParams.builder()
      .id(explainerComponent._id())
      // User tracking
      .userId("user-456")
      .studentName("Jane Smith")  // Student name for display
      .groupIds(List.of("class-101", "class-102"))
      .sessionId("session-789")
      
      // Explainer-specific features
      .features(ComponentGenerateEmbedParams.Features.builder()
          .enableWebSearchSources(true)
          .enableImageSources(true)
          .enableTranscript(true)
          .enableOutline(true)
          .build())
      
      // Dimensions
      .width("100%")
      .height("600px")
      
      // Token expiry
      .expiryHours(24)
      .build();

  ComponentGenerateEmbedResponse embedResponse = client.v1().components()
      .generateEmbed(params);
  ```

  ```csharp C# theme={null}
  using StudyfetchSDK;
  using StudyfetchSDK.Models.V1.Components;
  using System;
  using System.Collections.Generic;
  using System.Threading.Tasks;

  public class GenerateExplainersEmbed
  {
      public static async Task GenerateEmbed()
      {
          var client = new StudyfetchSDKClient()
          {
              APIKey = Environment.GetEnvironmentVariable("STUDYFETCH_API_KEY"),
              BaseUrl = new Uri("https://studyfetchapi.com")
          };

          var embedResponse = await client.V1.Components.GenerateEmbed(new()
          {
              ID = "component_123abc", // Replace with your component ID
              UserID = "user-456",
              StudentName = "Jane Smith",  // Student name for display
              GroupIDs = new List<string> { "class-101", "class-102" },
              Width = "100%",
              Height = "600px"
          });

          Console.WriteLine($"Embed URL: {embedResponse.EmbedURL}");
          Console.WriteLine($"Token: {embedResponse.Token}");
      }
  }
  ```
</CodeGroup>

### Explainer-Specific Embedding Features

<ParamField body="features.enableWebSearchSources" type="boolean" default="true">
  Display web search sources used in the explanation
</ParamField>

<ParamField body="features.enableImageSources" type="boolean" default="true">
  Display sources for images and diagrams used in the video
</ParamField>

<ParamField body="features.enableTranscript" type="boolean" default="true">
  Display synchronized subtitles/transcript below the video player
</ParamField>

<ParamField body="features.enableOutline" type="boolean" default="true">
  Show video chapters and topic outline for easy navigation
</ParamField>

### Embed in Your HTML

```html theme={null}
<iframe 
  src="https://embed.studyfetch.com/component/comp_303pqr?token=..."
  width="100%"
  height="600px"
  frameborder="0"
  allowfullscreen
  style="border: 1px solid #e5e5e5; border-radius: 8px;">
</iframe>
```