AI Elements Persona बनाम कस्टम Rive कैरेक्टर

AI Elements Persona component क्या करता है?

AI Elements, AI interfaces के लिए Vercel की React components library है, जिसे AI SDK के साथ इस्तेमाल करने के लिए बनाया गया है। Persona इसका अवतार वाला हिस्सा है। Docs इसे ऐसा component बताते हैं जो "displays an animated AI visual that responds to different conversational states", यानी बातचीत के अलग-अलग स्टेट पर प्रतिक्रिया देने वाला एनिमेटेड AI visual दिखाता है (AI Elements: Persona)।

अंदर से यह WebGL2 पर Rive के साथ render करता है, इसलिए स्टेट बदलने पर clips के बीच cut होने के बजाय smooth blend होता है। यह React की एक ऐसी बारीकी को भी संभालता है जिससे अक्सर खुद बनाए गए WebGL components टूट जाते हैं: docs एक built-in guard का ज़िक्र करते हैं जो WebGL2 initialization को एक फ़्रेम के लिए टाल देता है, ताकि Strict Mode के अस्थायी development mount के दौरान कोई context न बने।

दूसरे AI Elements components की तरह, Persona को किसी बंद package की तरह install करने के बजाय source code के रूप में आपके project में जोड़ा जाता है:

npx ai-elements@latest add persona

"use client";

import { Persona } from "@/components/ai-elements/persona";

export function AssistantVisual({ state }: { state: "idle" | "listening" | "thinking" | "speaking" | "asleep" }) {
  return <Persona state={state} className="size-24" />;
}

क्योंकि यह browser APIs का इस्तेमाल करता है, इसे Next.js App Router में किसी client component से render करें। variant न देने पर आपको डिफ़ॉल्ट Obsidian look मिलता है।

यह कौन-से स्टेट और variants सपोर्ट करता है?

इसके documentation के अनुसार Persona बातचीत के पाँच स्टेट और छह visual variants सपोर्ट करता है (AI Elements: Persona):

ये पाँच स्टेट assistants के व्यवहार से मेल खाते हैं, और ज़्यादातर अवतार गाइड के तरीकों से भी: यूज़र बोले तो सुनना, model काम करे तो सोचना, जवाब दे तो बोलना, और session निष्क्रिय हो तो सो जाना।

जो इस सूची में नहीं है, वह जानना भी उतना ही ज़रूरी है। इसमें success या error जैसे वन-शॉट रिएक्शन (एक बार चलने वाले रिएक्शन) नहीं हैं, और thinking से अलग कोई "loading" स्टेट भी नहीं है। अगर आपके product को किसी पूरे हुए काम की खुशी मनानी हो या किसी गड़बड़ी को visually दिखाना हो, तो वह आपको UI में कहीं और दिखाना होगा।

AI SDK से mapping छोटी है। useChat के साथ submitted thinking बनता है, streaming speaking बनता है और बाकी सब idle (useChat reference):

const personaState = status === "submitted" ? "thinking" : status === "streaming" ? "speaking" : "idle";

क्या मैं Persona में अपना कैरेक्टर इस्तेमाल कर सकता हूँ?

किसी documented तरीके से नहीं। Persona के docs ऊपर दिए गए props और छह built-in variants बताते हैं; उनमें अपनी .riv फ़ाइल पास करने या नया variant जोड़ने के बारे में कुछ नहीं है (AI Elements: Persona)। अक्टूबर 2026 तक, Persona को पहले से बने abstract visuals का एक सेट मानें।

क्योंकि component आपके codebase में copy होता है, आप पढ़ सकते हैं कि यह अपनी Rive फ़ाइलें कैसे लोड करता है और उन पर क्या सेट करता है। सिद्धांत रूप में इसे edit करके किसी दूसरी फ़ाइल पर point करना संभव है, लेकिन यह documented नहीं है, आपकी फ़ाइल को ठीक वही inputs या properties देनी होंगी जिन्हें component चलाता है, और बाद में component को अपडेट करने पर आपके बदलाव overwrite हो जाएँगे।

ज़्यादा साफ़ तरीका है अपना एक छोटा component, जो उसी state prop को ले। आपका chat logic "idle" | "listening" | "thinking" | "speaking" | "asleep" बनाता रहता है, और render के समय आप तय करते हैं कि यह Persona को जाए या आपके कैरेक्टर को। Rive का अपना React runtime कुछ ही lines में फ़ाइल संभाल लेता है, जैसा अगले section में दिखाया गया है; setup की जानकारी के लिए React और Next.js में Rive देखें।

Persona के स्टेट 10 मूड वाले कैरेक्टर से कैसे मैप होते हैं?

नंबर वाले मूड वाला कैरेक्टर Persona के पाँचों स्टेट कवर करता है और रिएक्शन के लिए भी जगह छोड़ता है। इन गाइड में इस्तेमाल हुए दस मूड वाले layout के साथ mapping सीधी है:

"use client";

import { useEffect } from "react";
import { useRive, useViewModelInstanceNumber } from "@rive-app/react-webgl2";

export type PersonaState = "idle" | "listening" | "thinking" | "speaking" | "asleep";

const MOOD: Record<PersonaState, number> = { idle: 0, listening: 6, thinking: 3, speaking: 7, asleep: 8 };

export function CharacterPersona({ state, className }: { state: PersonaState; className?: string }) {
  const { rive, RiveComponent } = useRive({
    src: "/character.riv",
    stateMachine: "CharacterViewModelMachine",
    autoplay: true,
    autoBind: true,
  });
  const { setValue: setMood } = useViewModelInstanceNumber("mood", rive?.viewModelInstance);

  useEffect(() => {
    setMood(MOOD[state]);
  }, [state, setMood]);

  return (
    <div aria-hidden="true" className={className}>
      <RiveComponent />
    </div>
  );
}

ये hooks Rive के React data binding API से आते हैं (Rive React data binding)। क्योंकि props एक जैसे हैं, <Persona state={s} /> और <CharacterPersona state={s} /> के बीच बदलना सिर्फ़ एक line का बदलाव है। इसके बाद आप useViewModelInstanceTrigger("success", ...) से वे रिएक्शन जोड़ सकते हैं जो Persona में नहीं हैं।

Persona या custom कैरेक्टर के साथ loading और errors कैसे संभालें?

दोनों विकल्पों में कुछ भी दिखने से पहले एक Rive runtime और एक .riv फ़ाइल डाउनलोड होती है, इसलिए शुरुआती पलों और failure दोनों की योजना बनाएँ। Persona इसके लिए lifecycle callbacks देता है, जिनमें onLoad, onReady और onLoadError शामिल हैं (AI Elements: Persona)। Custom component को यही जानकारी useRive से मिलती है: फ़ाइल लोड होने तक rive instance null रहता है।

• जगह पहले से तय करें। Wrapper को एक fixed साइज़ दें ताकि canvas दिखने पर chat layout न उछले।
• पहले एक still image दिखाएँ। Canvas के पीछे idle pose की एक static image रखने से धीमे connection पर खाली box नहीं दिखता।
• चुपचाप fallback करें। अगर loading fail हो जाए, तो still image रहने दें और आगे बढ़ें। Assistant को अपने अवतार के बिना भी काम करना चाहिए।
• Status को text में भी रखें। Visual चाहे orb हो या मैस्कॉट, "Thinking" जैसा label सभी को बताता है कि क्या हो रहा है, screen reader इस्तेमाल करने वालों को भी।

Offscreen होने पर pause करने, मोशन कम करें और canvas remount के नियम दोनों के लिए एक जैसे हैं; accessible और तेज़ AI अवतार एनिमेशन देखें।

ब्रांड मैस्कॉट कब abstract orb से बेहतर होता है?

आम तौर पर कोई भी बेहतर नहीं है। दोनों अलग-अलग संदेश देते हैं।

Persona तब चुनें जब आप prototype बना रहे हों, जब assistant किसी बड़े टूल के अंदर एक utility हो, या जब आपको orb जैसा न्यूट्रल, ambient एहसास चाहिए। कैरेक्टर तब चुनें जब assistant ही प्रोडक्ट हो, जब आपके पास पहले से ऐसा मैस्कॉट या लोगो हो जिसे लोग पहचानते हैं, या जब आपको पाँच स्टेट से आगे के रिएक्शन चाहिए, जैसे पूरी हुई booking का जश्न मनाना।

लागत का अंतर कम हो गया है। Charmotion किसी मौजूदा कैरेक्टर या लोगो को कुछ ही मिनटों में 17 एनिमेशन वाले सेट में बदल देता है, ऊपर बताए दस मूड और छह ट्रिगर एक .riv में (पेड प्लान, $20/माह से), साथ में उन जगहों के लिए MP4, GIF और ट्रांसपेरेंट WebM/MOV एक्सपोर्ट जहाँ कैनवस नहीं जा सकता। आप जो भी चुनें, स्टेट लॉजिक को विज़ुअल से अलग रखें, जैसा ऊपर के रैपर में है, ताकि फ़ैसला बदला जा सके।

अक्सर पूछे जाने वाले सवाल

AI Elements का Persona component कौन-से स्टेट सपोर्ट करता है?

Persona पाँच स्टेट सपोर्ट करता है: idle, listening, thinking, speaking और asleep। यह WebGL2 पर Rive से render होता है और छह variants में आता है: Obsidian (डिफ़ॉल्ट), Mana, Opal, Halo, Glint और Command। Documented props हैं state, variant, className और onLoad व onLoadError जैसे lifecycle callbacks।

क्या मैं Persona में अपनी custom .riv फ़ाइल लोड कर सकता हूँ?

Persona के documentation में अपनी .riv लोड करने या नए variants जोड़ने का तरीका नहीं बताया गया है। चूँकि component का source आपके project में copy होता है, इसलिए उसे edit करना तकनीकी रूप से संभव है, पर यह documented नहीं है। ब्रांडेड कैरेक्टर इस्तेमाल करने के लिए एक छोटा Rive component, जो वही state prop लेता हो, ज़्यादा आसानी से maintain होने वाला तरीका है।

क्या Persona React Strict Mode के साथ काम करता है?

हाँ। इसके docs में एक built-in guard बताया गया है जो WebGL2 initialization को एक फ़्रेम के लिए टाल देता है, ताकि Strict Mode के throw-away development mount के दौरान कोई context न बने। अगर आप अपना Rive avatar लिखते हैं, तो remount की समस्याओं से बचने के लिए useRive और RiveComponent को एक ही स्थिर component में रखें।

इस गाइड से झटपट जवाब

• AI Elements का Persona component कौन-से स्टेट सपोर्ट करता है?

स्रोत

• Persona component, Vercel AI Elements
• useChat reference, AI SDK by Vercel
• React runtime: Data binding, Rive
• React runtime: Best practices, Rive