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
Name of the explainers component
Must be
"explainers"Explainers configuration object
Show Configuration Properties
Show Configuration Properties
Array of material IDs for visual explanation context
Array of folder IDs containing materials
Title of the explainer video
Visual style of the explainer:
professional- Clean, corporate stylecasual- Relaxed, conversational approacheducational- Traditional teaching styleanimated- Fun, cartoon-style animations
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)
AI model to use for generating the explainer content
Enable searching for relevant images to include in the explainer
Enable web search for additional information and context
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
Display web search sources used in the explanation
Display sources for images and diagrams used in the video
Display synchronized subtitles/transcript below the video player
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>