AI Models, Prompts, Agents, Avatars

Centralized AI operations layer: multi-provider LLM routing across 6 vendors (OpenAI, Gemini, Cloudflare AI, RunPod, Together AI, OpenRouter) with real-time utilization percentage assignment per use case, 3-step fallback chains, prompt versioning with history restore, dynamic prompt execution, AI agent lifecycle management, and direct HeyGen integration for AI avatar video creation with scene and camera-angle configuration.

import { useState } from 'react';
import { AiWidget, AiInput, AiTextarea, CardIcon } from '@cleen/cleen-components';
import { useAgentChain, usePrompts } from '@/hooks/useAi';

export function AIPromptStudio({ agentChainId }) {
  const { chain, steps, runStep } = useAgentChain(agentChainId);
  const { prompts } = usePrompts();
  const [input, setInput] = useState('');

  return (
    <div className="ai-studio">
      <h1>{chain?.name}</h1>
      <div className="ai-prompt-grid">
        {prompts.map((p) => (
          <CardIcon key={p.id} icon={p.icon} title={p.name} description={p.summary} />
        ))}
      </div>
      <AiWidget chain={chain} steps={steps} />
      <AiTextarea
        value={input}
        onChange={setInput}
        onSubmit={() => runStep({ stepId: chain.firstStepId, payload: input })}
      />
    </div>
  );
}

Flow of work

1. 01Configure models and platform
2. 02Allocate utilization % by use case
3. 03Author and version prompts
4. 04Execute and track outcomes
5. 05Manage agents
6. 06Create HeyGen avatars and scenes
7. 07Generate AI video

Subfeatures

• Model type filter/save
• Platform filter/save
• Utilization % save/assignment
• Provider fallback config
• Prompt CRUD
• Prompt version history
• Prompt restore
• Dynamic prompt run
• Outcome tracking
• Agent CRUD
• Execution diagnostics
• Avatar CRUD
• Avatar video create/sync
• Scene save/config
• Camera angle CRUD