AI-Assisted Development

Use AI coding tools (Cursor / Claude Code / Copilot / Codex, etc.) + SDK Helper Skill to build interactive classroom projects with @tencent-classroom/sdk (Tencent Cloud Low-Code Interactive Classroom, UI-less SDK) through conversational development.

You don't need to read through all API docs or understand the entire integration flow. Just tell the AI what interactive classroom project you want to build — it writes code, queries docs, and catches errors for you.

Install Skill

Auto-detects and installs to AI tools:

npx skills add InteractiveClassroom/skills --skill tcic-sdk-helper

Update:

npx skills update

What It Does

This Skill injects full knowledge of the Tencent Cloud Low-Code Interactive Classroom UI-less SDK into your AI agent, including:

1. Code Generation — Generates runnable code by role (teacher / student / assistant / supervisor) and scenario, handling lifecycle ordering, error handling, permission checks, and resource cleanup — so you don't have to build from scratch.

2. Documentation Query — Answers specific questions about API parameters, enum values, State/Event details.

3. Code Diagnosis — Identifies common errors in developer-provided code: incorrect subscription timing, unreleased resources, unauthorized operations, etc.

Development Flow

Step 1: Create Project & Get Parameters

Ask the AI:

"I want to integrate TCIC SDK, what do I need to prepare?"

The AI will check if you have the SDK installed and guide you to obtain schoolId, classId, userId, token and other integration parameters.

If you don't have a token yet, the AI will provide Tencent Cloud API documentation links, guiding you to obtain one via server-side RegisterUser + LoginUser calls.

Step 2: Generate Integration Code

Tell the AI your role and requirements:

"Write a student-side integration with hand-raise stage access and chat"

"Write a complete teacher-side integration with class start, audio/video, and whiteboard"

"I need an assistant-side that only manages members and chat"

The AI will output complete runnable code, including:

• Instance creation and initialization
• Event listeners (registered before joinClass)
• Room entry and error handling
• stageList$-driven remote stream binding
• Audio/video streaming (after going on stage)
• Resource cleanup (leaveClass + destroy)

Step 3: Extend Features by Scenario

Incrementally add features on top of the base code:

"Add screen sharing"

"Add IM chat messaging"

"Add quiz functionality"

"Add whiteboard and courseware"

The AI will generate the corresponding scenario code snippets with proper resource lifecycle handling.

Step 4: Query API Details

Ask directly when you encounter specific questions:

"What is the third parameter of bindRemoteView?"

"What does TResultCode error code 1010 mean?"

"What values does classStatus$ have? What does each state represent?"

"What's the difference between stageList$ and memberList$?"

The AI will answer.

Step 5: Diagnose and Fix

After writing code, let the AI check it:

"Help me figure out why other members are on stage but I can't see their video" + provide your code

The AI will analyze based on business logic and the actual scenario, providing the cause and solution.

Example: Build a Student Client from Scratch

Here's a complete conversation flow:

You: I want to build a student page that shows the teacher's video, allows hand-raise to go on stage, and has chat. Vue 3 project.

AI: (checks environment → confirms role → generates complete code)

import { TencentClassroom, TEvent, StreamType } from '@tencent-classroom/sdk';
import type { MemberInfo, ViewBinding } from '@tencent-classroom/sdk';

// classId / userId / token obtained from server-side Tencent Cloud API
// See: https://www.tencentcloud.com/document/api/1168/52788
const classroom = new TencentClassroom({ schoolId: YOUR_SCHOOL_ID });

await classroom.init();

// Register events (must be before joinClass)
classroom.on(TEvent.KICK_OUT, (reason) => { /* handle kick */ });
classroom.on(TEvent.CLASS_END, () => { /* class ended */ });

const result = await classroom.joinClass({ classId, userId, token, role: 'student' });
if (!result.ok) { console.error(result.message); return; }

// stageList$-driven remote stream binding
const bindings = new Map<string, ViewBinding>();
classroom.state.stageList$.subscribe((members) => {
  // ... diff bind/unbind logic
});

// Hand raise to request stage access
await classroom.handUp();

// Start audio/video after going on stage
classroom.state.stageStatus$.subscribe((status) => {
  if (status === 'active') {
    classroom.startCamera(localVideoDom);
    classroom.startMicrophone();
  }
});

// IM messages
classroom.state.messageList$.subscribe((msgs) => { /* render */ });
await classroom.sendTextMessage('Hello');

// Cleanup on leave
classroom.leaveClass();
classroom.destroy();

You: How do I do diff binding with stageList$?

AI: (outputs diff logic)

You: Help me check why students can't see other students' video

AI: (runs diagnosis)