How to make an AI clone of your CEO for the world's biggest hackathon

type IConversation = {
  conversation_url: string; // direct link to join the conversation
  replica_id: string | null;
  persona_id: string | null;
  custom_greeting: string | null; // optional custom greeting
  // … other properties as per Tavus documentation
};

import { DailyProvider } from "@daily-co/daily-react";
import { createConversation} from "./api";


const Main = () => {
 const [conversation, setConversation] = useState<IConversation>();


 const handleStartConversation = async () => {
   const conversation = await createConversation();
   setConversation(conversation);
   // we also handle the loading and error states here
 };


 const StartCallButton = () => (
   <Button onClick={handleStartConversation}>
     Start AI Video Call
   </Button>
 );


 const CTABlock = () => (
   <div>
     <span>Need ideas? Brainstorm with Bolt CEO Eric Simons</span>
     <div>
       <StartCallButton />
       <Button onClick={dismiss}>Not now</Button>
     </div>
   </div>
 );

return (
   <DailyProvider>
     {conversation ? (
       <Call
         conversation={conversation}
       />
     ) : <CTABlock />}
   </DailyProvider>
 );
}

export const createConversation = async (): Promise<IConversation> => {
 try {
   const response = await fetch("/.netlify/functions/create-conversation", {
     method: "POST",
   });
   … // handling errors and return the response
};

fetch("https://tavusapi.com/v2/conversations", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    "x-api-key": TAVUS_API_KEY,
  },
  body: JSON.stringify({
    persona_id: ..., // replace with a valid persona ID
    replica_id: ..., // replace with a valid replica ID
    custom_greeting: GREETINGS[Math.floor(Math.random() * GREETINGS.length)],
    // picks a random personalized hackathon welcome message from the GREETINGS array
  }),
});

import {
 DailyAudio,
 useParticipantIds,
 useDaily,
} from "@daily-co/daily-react";


export const Call = ({ conversation }: Props) => {
 const daily = useDaily(); // returns current call object instance
 const remoteParticipantIds = useParticipantIds({ filter: "remote" }); // we need this to receive the participant id of our agent


 useEffect(() => {
   if (conversation && daily) {
     const { conversation_url } = conversation;
     daily.join({
       url: conversation_url, // join a conversation by URL
     });
   }
 }, [daily, conversation]);


 const AIAgentView = () => {
   return remoteParticipantIds.length > 0 ? (
     <Video id={remoteParticipantIds[0]} />
   ) : (
     <Spinner /> // if no participants, our AI agent wasn’t connected yet
   );
 };


  return (
     <>
       <AIAgentView />
       <DailyAudio /> // when enabled and call is configured, DailyAudio will automatically subscribe to the active speaker's audio track
     </>
   );
}

 const handleEndConversation = async () => {
   await endConversation(conversation.conversation_id);
   // handle the loading and error states here
 };


const ExitCallButton = () => (
   <Button onClick={handleEndConversation}>
     <div className="icon-exit" />
   </Button>
 );

const endConversation = async (conversationId: string) => {
 try {
   const response = await fetch(`/.netlify/functions/end-conversation`, {
     method: "POST",
     headers: {
       "Content-Type": "application/json",
     },
     body: JSON.stringify({ conversationId }),
   });


   … // handling errors and return the response
};

fetch(
   `https://tavusapi.com/v2/conversations/${conversationId}/end`,
   {
     method: "POST",
     headers: { "x-api-key": TAVUS_API_KEY },
   }
);

import { useLocalSessionId } from "@daily-co/daily-react";

const localSessionId = useLocalSessionId();


const SelfieView = () => {
   return remoteParticipantIds.length > 0 && localSessionId ? (
     <Video
       id={localSessionId}
     />
   ) : null; // don’t display anything until AI agent joins the call
 };

return (
   <>
     <AIAgentView />
     <SelfieView /> // add selfie view
     <DailyAudio />
   </>
 );

import {
 ...,
 useLocalSessionId,
 useAudioTrack,
 useActiveSpeakerId,
} from "@daily-co/daily-react";


const localSessionId = useLocalSessionId(); // need to track a user’s activity on their local device
const activeSpeakerId = useActiveSpeakerId(); // subscribe to the active speaker change event
const localAudio = useAudioTrack(localSessionId); // subscribe to information about the user’s audio track
const isMicEnabled = !localAudio.isOff;

<div onClick={toggleAudio}>
  {localSessionId === activeSpeakerId ? 
    <span>Speaking</span> 
    : 
    <span>Listening</span>
  }
</div>

const toggleAudio = useCallback(() => {
  daily.setLocalAudio(!isMicEnabled); // updates the local mic state
}, [isMicEnabled]);

<Button onClick={toggleAudio}>
  {isMicEnabled ? (
    <div className="icon-mic-on" />
  ) : (
    <div className="icon-mic-off" />
  )}
</Button>

const Timer = () => {
  const [timeLeft, setTimeLeft] = useState(() => {
    const sessionTime = getSessionTime();
    return TIME_LIMIT - sessionTime;
  }); // how much time is left for the current session 

  useEffect(() => {
    const interval = setInterval(() => {
      const sessionTime = getSessionTime();
      setTimeLeft(TIME_LIMIT - sessionTime);
    }, 1000); // we update the time counter every second
    return () => clearInterval(interval);
  }, []);

  return (
    <span>
      {formatTime(timeLeft)} // display formatted
    </span>
  );
};

// we store session times in cookies
import Cookies from "js-cookie";

const getSessionTime = () => {
  const sessionTime = Cookies.get("sessionTime");

  if (sessionTime) {
    const totalTimeInSeconds = Math.floor(
      JSON.parse(sessionTime).reduce(
        (total: number, session: { start: number; end: number }) =>
          total + (session.end - session.start) / 1000,
        0
      )
    );
    return totalTimeInSeconds;
  }

  return 0;
};

useEffect(() => {
   const interval = setInterval(() => {
     const time = getSessionTime();
     if (time === TIME_LIMIT - 10) {
       initTimeLimitPhrase();
     }
     if (time >= TIME_LIMIT) {
       endConversation();
       clearInterval(interval);
     } else {
       updateSessionEndTime(); // here we update "sessionTime" cookie with the current time
     }
   }, 1000);
   return () => clearInterval(interval);
 }, [remoteParticipantIds, start]);


const initTimeLimitPhrase = () => {
   daily?.sendAppMessage({
     message_type: "conversation",
     event_type: "conversation.echo",
     conversation_id: conversation?.conversation_id,
     properties: {
       modality: "text",
       text: TIME_LIMIT_MESSAGE,
     },
   }); // after invoking this method, our AI will say the phrase that we defined in TIME_LIMIT_MESSAGE
};

const handleStartConversation = async () => {
    const conversation = await createConversation();
    setConversation(conversation);
    setSessionStartTime();
    // ...
};


const setSessionStartTime = () => {
 const sessionTime = Cookies.get("sessionTime");
 const arr = sessionTime ? JSON.parse(sessionTime) : [];
 const currentTime = Date.now();
 const expirationMinutes = 60 * 6;
 arr.push({
   start: currentTime,
   end: currentTime,
   exp: (1 / 24 / 60) * expirationMinutes,
 });
 const exp = arr[0].exp;


 Cookies.set("sessionTime", JSON.stringify(arr), {
   expires: exp,
 });
}

const handleEndConversation = async () => {
    await endConversation(conversation.conversation_id);
    setConversation(undefined);
    Cookies.remove("sessionTime");
};

return (
   <>
    <Timer />
    <AIAgentView />
    <SelfieView />
    <DailyAudio />
   </>
);