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
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);
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}")
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());
}
}
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}");
}
}
Configuration Parameters
string
required
Name of the explainers component
string
required
Must be
"explainers"object
required
Explainers configuration object
Show Configuration Properties
Show Configuration Properties
array
required
Array of material IDs for visual explanation context
array
Array of folder IDs containing materials
string
required
Title of the explainer video
string
default:"educational"
Visual style of the explainer:
professional- Clean, corporate stylecasual- Relaxed, conversational approacheducational- Traditional teaching styleanimated- Fun, cartoon-style animations
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)
string
default:"gpt-4o-mini-2024-07-18"
AI model to use for generating the explainer content
boolean
default:"true"
Enable searching for relevant images to include in the explainer
boolean
default:"true"
Enable web search for additional information and context
boolean
default:"false"
Create video in vertical format (9:16) for mobile viewing
Response
{
"_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
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
});
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
)
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);
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}");
}
}
Explainer-Specific Embedding Features
boolean
default:"true"
Display web search sources used in the explanation
boolean
default:"true"
Display sources for images and diagrams used in the video
boolean
default:"true"
Display synchronized subtitles/transcript below the video player
boolean
default:"true"
Show video chapters and topic outline for easy navigation
Embed in Your HTML
<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>