e2:"ExplicitChatIdProvider" e3:I[903690,["$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$65","$66","$67","$68","$69"],"$e2"] e4:I[838238,["$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$65","$66","$67","$68","$69"],"SWRDataProvider"] e5:T31ee,[V0_FILE]plaintext:file=".editorconfig" root = true [*] indent_style = tab tab_width = 4 end_of_line = lf charset = utf-8 trim_trailing_whitespace = true insert_final_newline = true max_line_length = 200 [V0_FILE]plaintext:file=".gitignore" /node_modules/ /*.log* /.env* /*.tsbuildinfo /.next/ /next-env.d.ts /.vercel/ [V0_FILE]markdown:file="README.md" # Decart SDK Realtime Template [V0_FILE]css:file="app/globals.css" @import 'tailwindcss'; [V0_FILE]typescriptreact:file="app/layout.tsx" import { type Metadata } from 'next'; import { type ReactNode } from 'react'; import { Toaster } from 'sonner'; import './globals.css'; export const metadata: Metadata = { title: 'Decart Realtime Video-to-Video', description: "A template for working with Decart's realtime AI models", }; export default function ({ children }: { children: ReactNode }) { return ( {children} ); } [V0_FILE]typescriptreact:file="app/page.tsx" 'use client'; import { models, createDecartClient, type DecartSDKError, type RealTimeClient } from '@decartai/sdk'; import { useEffect, useMemo, useRef, useState, type ChangeEvent, type FormEvent } from 'react'; import { toast } from 'sonner'; const REALTIME_MODELS = ['mirage', 'lucy_v2v_720p_rt'] as const; type RealtimeModelId = (typeof REALTIME_MODELS)[number]; export default function () { const [connectionState, setConnectionState] = useState<'connected' | 'connecting' | 'disconnected'>('disconnected'); const [apiKey, setApiKey] = useState(''); const [selectedModel, setSelectedModel] = useState(REALTIME_MODELS[0]); const model = useMemo(() => models.realtime(selectedModel), [selectedModel]); const [promptText, setPromptText] = useState(''); const [isSendingPrompt, setIsSendingPrompt] = useState(false); const isLoadedRef = useRef(false); const promptInputRef = useRef(null); const inputVideoRef = useRef(null); const outputVideoRef = useRef(null); const localStreamRef = useRef(null); const realtimeClientRef = useRef(null); useEffect(() => { const savedKey = localStorage.getItem('decart-api-key'); if (savedKey) { setApiKey(savedKey); } }, []); const handleApiKeyChange = (e: ChangeEvent) => { const newKey = e.target.value; setApiKey(newKey); localStorage.setItem('decart-api-key', newKey); }; const handleConnect = async () => { setConnectionState('connecting'); try { localStreamRef.current = await navigator.mediaDevices.getUserMedia({ video: { frameRate: model.fps, width: model.width, height: model.height, }, }); if (inputVideoRef.current) { inputVideoRef.current.srcObject = localStreamRef.current; inputVideoRef.current.play().catch(() => {}); } const client = createDecartClient({ apiKey }); realtimeClientRef.current = await client.realtime.connect(localStreamRef.current, { model, onRemoteStream(remoteStream: MediaStream) { if (outputVideoRef.current) { outputVideoRef.current.srcObject = remoteStream; outputVideoRef.current.play().catch(() => {}); } }, }); console.info('Session ID:', realtimeClientRef.current.sessionId); setConnectionState(realtimeClientRef.current.getConnectionState()); } catch (error) { console.error('Failed to connect', error); setConnectionState('disconnected'); } }; const handleDisconnect = () => { realtimeClientRef.current?.disconnect(); realtimeClientRef.current = null; localStreamRef.current?.getTracks().forEach((t) => t.stop()); localStreamRef.current = null; if (inputVideoRef.current) { inputVideoRef.current.srcObject = null; } if (outputVideoRef.current) { outputVideoRef.current.srcObject = null; } setConnectionState('disconnected'); }; const handleConnectFormSubmit = (e: FormEvent) => { e.preventDefault(); if (connectionState === 'connected') { handleDisconnect(); } else if (connectionState === 'disconnected') { handleConnect(); } }; const handlePromptSubmit = (e: FormEvent) => { e.preventDefault(); const text = promptText.trim(); if (!text || connectionState !== 'connected' || !realtimeClientRef.current || isSendingPrompt) { return; } setIsSendingPrompt(true); toast.info(`Prompt: ${text}`); try { realtimeClientRef.current.setPrompt(text); } catch (error) { console.error(error); toast.error('Failed to send prompt'); } finally { setTimeout(() => setIsSendingPrompt(false), 1000); } }; useEffect(() => { if (!isLoadedRef.current) { isLoadedRef.current = true; return; } toast.dismiss(); switch (connectionState) { case 'connected': toast.success('Connected'); promptInputRef.current?.focus(); break; case 'connecting': toast.loading('Connecting…'); break; case 'disconnected': toast.info('Disconnected'); setPromptText(''); break; } if (!realtimeClientRef.current) { return; } realtimeClientRef.current.on('connectionChange', setConnectionState as any); const onError = (error: DecartSDKError) => { console.error(error); toast.error(error.message ?? 'Unknown error'); }; realtimeClientRef.current.on('error', onError as any); return () => { realtimeClientRef.current?.off('connectionChange', setConnectionState as any); realtimeClientRef.current?.off('error', onError as any); }; }, [connectionState]); return (

Decart Realtime Video-to-Video

Decart API key

Model

); } [V0_FILE]javascript:file="next.config.mjs" /** @type {import('next').NextConfig} */ export default { reactStrictMode: true, }; [V0_FILE]json:file="package.json" { "name": "decart-realtime-sdk-starter", "version": "1.0.0", "private": true, "scripts": { "build": "next build", "dev": "next dev", "start": "next start", "format": "prettier --write .", "format:check": "prettier --check ." }, "dependencies": { "@decartai/sdk": "^0.0.4", "next": "^15.5.5", "react": "^19.2.0", "react-dom": "^19.2.0", "sonner": "^2.0.7" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.14", "@types/node": "^24.7.2", "@types/react": "^19.2.2", "@types/react-dom": "^19.2.2", "postcss": "^8.5.6", "prettier": "^3.6.2", "tailwindcss": "^4.1.14", "typescript": "^5.9.3" } } [V0_FILE]javascript:file="postcss.config.mjs" export default { plugins: { '@tailwindcss/postcss': {}, }, }; [V0_FILE]javascript:file="prettier.config.mjs" /** @type {import('prettier').Config} */ export default { singleQuote: true, jsxSingleQuote: true, }; [V0_FILE]json:file="tsconfig.json" { "compilerOptions": { "target": "esnext", "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, "strict": true, "noEmit": true, "esModuleInterop": true, "module": "esnext", "moduleResolution": "bundler", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", "incremental": true, "allowImportingTsExtensions": true, "plugins": [ { "name": "next" } ], "paths": { "@/*": ["./*"] } }, "include": ["./next-env.d.ts", "./**/*.ts", "./**/*.tsx", ".next/types/**/*.ts"], "exclude": ["./node_modules/"] }dc:["$","$Le3",null,{"chatId":"fwwaz2F0bsr","children":["$","$Le4",null,{"data":{"@\"active-block\",\"fwwaz2F0bsr\",":{"id":"b_v7stLkZHncQ","messageId":"OLCamfrnDtPPRjaPB8f0y7BKOnexIkbe","source":"$e5","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"decart-sdk-template","type":"code-project","project":"decart-sdk-template"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"fwwaz2F0bsr\",":false},"children":"$Le6"}]}]

About

Tags

Share

About

Tags

Share

More Templates Like This

More Templates Like This