Connect Four

# Build Connect Four with an Anam AI avatar

Build a complete, runnable browser game from scratch. You do not have access to an existing website or repository. Use React, TypeScript and a small server (Next.js App Router is a suitable default). Include all source files, package scripts, a README, an .env.example with empty placeholders, and setup/run instructions. Implement the game, not just a mockup.

## Read the current public documentation
Fetch https://anam.ai/docs/llms.txt, https://anam.ai/docs/quickstart, https://anam.ai/docs/personas/tools/client-tools, https://anam.ai/docs/personas/llms/prompting-guide and https://anam.ai/docs/personas/director-notes. Follow the current API and SDK types; resolve documentation redirects and use the index if a path has moved. Use @anam-ai/js-sdk for a realtime avatar call, not the prerecorded Avatar Videos API.

## Experience and layout
Title: Connect Four. Leo is a friendly, competitive AI avatar who plays alongside the visitor. Put his live video on the left and the game on the right on desktop; stack them on phones. Identify the avatar as Leo with a Your opponent badge at the top right. Provide Talk to Leo, a connecting state, mute/unmute and End call. Keep the idle stage free of explanatory text below the button; show errors, microphone permission guidance and live captions when relevant. Never autoplay audible media.
Use Inter, white page surfaces, black headings, muted body text, light grey bordered cards and rounded pill buttons. Use frosted white call controls (48px high, 2px translucent white border, 24px backdrop blur, rounded pill Talk to Leo button), neutral buttons elsewhere, and no CTA chevrons or eyebrow labels. Include three bordered How to play cards, each with a title beside its step number and a description below, and a Game Rules FAQ explaining restart, winning and disconnect behavior. Support keyboard use, visible focus, accessible names and readable layouts at 390px, 810px and 1440px. Do not require signup to play the demo.

## Anam product knowledge
Give Leo brief background knowledge: Anam provides real-time interactive AI avatars through Lab, its API and SDK. A persona combines a face, voice, language model, prompt, and optional knowledge/tools. Cara-4.1 Express is Anam’s most expressive and interactive model yet, with lifelike facial expressions, natural movement and responsive lip sync. Director Notes guide expression and delivery. Answer relevant product questions briefly without a sales pitch; verify current details in public docs and never invent pricing or benchmarks. Keep product questions separate from game clues, coordinates, readiness and verdicts. The browser engine remains the game referee.

## Game rules and local referee
Implement a seven-column, six-row Connect Four board. The player is yellow and goes first; Leo is coral. Number columns 1–7 from left to right. Each disc falls to the lowest empty cell in its column. Alternate turns, reject full or invalid columns, and stop immediately on four matching discs horizontally, vertically or diagonally. A full board without a winner is a draw. Use a pure browser engine to resolve moves and choose Leo’s replies automatically. Classic searches two plies and Ruthless five, using minimax with alpha-beta pruning; prioritize immediate wins and blocking immediate losses. Select difficulty during setup. Show the current turn, match scores, latest move and winning line. Enable clicks and keyboard column buttons without a live call; voice adds the same actions. Label discs by owner as well as color. Resolve both moves once, return one complete turn result to the avatar, and reveal Leo’s disc after a short visual delay. Do not send a second speaking event on reveal. Lock player input while he moves and cancel stale timers on reset and unmount. Reset to setup, preserving difficulty and completed-game scores. Reconnect preserves the board and sends its current public state to Leo.
Keep an explicit state machine and pure, testable rule functions outside React. Treat the model as a conversational player, never as the referee. Keep all hidden answers and fleets out of model context. Browser secrecy is for a casual demo, not anti-cheat security.

## Anam session setup
Keep ANAM_API_KEY, ANAM_AVATAR_ID, ANAM_VOICE_ID and ANAM_LLM_ID in server-side environment variables. Obtain your own key and available avatar/voice/model IDs from Anam Lab or the documented catalog; never invent IDs or copy deployment secrets. Choose Leo if available, otherwise make the avatar configurable. Use Cara 4 and an expressive voice supporting Director Notes, such as Cartesia Sonic 3.6. Set a playful baseline style. Do not include a server API key in browser code, HTML, logs or the copied prompt.
Implement a POST session-token endpoint that calls https://api.anam.ai/v1/auth/session-token with a Bearer API key and a server-owned personaConfig containing the name, avatarId, voiceId, llmId, avatarModel, systemPrompt, initialMessage and client tool definitions. Validate origin, apply rate limiting, cap sessions to ten minutes, reject caller-supplied persona overrides and return only the short-lived session token. Show useful sanitized errors without logging secrets.
On Talk to Leo request microphone access, obtain a token, createClient(sessionToken), register all tool handlers BEFORE streamToVideoElement, and handle connection, video, speech-caption and close events using the installed SDK's documented API. Allow microphone-denied fallback: board clicks still play the game. Stop streaming and release media/listeners/timers on End call and unmount. Preserve game state across call reconnects in the same page, and send only a public game summary to restore context. Reloading may reset the game; document that behavior.

## Client tools and confirmation
Define each tool with type client, a JSON Schema for arguments, awaitResult true and bounded timeout. Validate arguments and phase in the handler, commit local state synchronously before returning, and return public results or useful rejection messages. Route buttons and voice through the same rule functions.
Register start_game with no arguments and drop_player_disc with an integer column 1–7. Accept a voice move only when a fresh completed player utterance clearly requests that same column. Reject ambiguous commands, rule questions, unsolicited model actions, duplicate deliveries and stale transcripts from an earlier board state. The engine chooses Leo’s move automatically; never call the player tool for his turn. Both players see the entire board. Send public board state, last moves, winner and scores as context.
Also register reset_game with a required confirmed boolean. On a player request like New game, Restart or Play again, call reset_game({confirmed:false}) to open a pending confirmation without changing the board, notebook, score or timer. Leo must then ask exactly: "Are you sure you want to quit and start a new game?" and wait. Only a fresh affirmative user reply after that request allows reset_game({confirmed:true}) to run the reset. No or Cancel clears confirmation and keeps the current game. Ambiguous replies require clarification. Validate pending state, that the exact confirmation question has appeared in Leo’s streamed speech, and a distinct real affirmative utterance after that question; a model-supplied true alone is insufficient. If the model finishes its response without asking the question, use the documented SDK talk method to speak that exact question once, and continue waiting for the player. Consume confirmation once so duplicate tool calls cannot reset twice. Do not interpret restart requests or confirmation replies as coordinates, clues or guess verdicts. After reset, wait for readiness in setup; keep the same avatar call connected. Clear stale confirmation state on disconnect or any direct button reset.

## Leo's behavior
Write an original system prompt with Personality, Environment, Tone, Goal, Tool use and Guardrails. Leo is warm, quick-witted and competitive, with light game-related teasing. Keep spoken turns brief, acknowledge the player's results and base every claim on accepted tool results. No markdown or reading JSON aloud. Register tools before describing their use in the prompt. Restart confirmation takes precedence over the normal game flow. Explain tool failures without pretending the action succeeded. Never claim to see hidden boards, the player's face or their secret answer.
Return one speaking instruction announcing only Leo’s column: My move is column Y. Your move. Never repeat the player’s column after they play. If the player wins before an opponent reply, announce only the outcome. Stop after that handoff, without a number or example. Never replay columns in idle or reconnect context. Hand back only while the game continues. Announce wins and draws only from engine results. Explain rules or strategy without making a move. Never claim that talking to Leo is required for click play.
Use supported inline cues directly before the phrase they affect, such as [warm], [playful], [curious], [surprised], [happy] and [sad]. Never invent cue tags or explain them aloud. Stay on the game and light conversation; do not fabricate results, grant extra turns, solicit sensitive information or insult the player.

## Verification and delivery
Test valid and invalid moves/turns, completion, timeout where applicable, hidden-state exclusion, duplicate tool delivery, microphone denial, disconnect/reconnect and reset cancellation/confirmation. Specifically verify New game → exact confirmation question → Yes → setup, and New game → No → unchanged game. Check mobile overflow, keyboard access and actual SDK handler registration. Supply a local mock mode for UI checks without credentials and document which tests need a real Anam key. Run the type checker and production build. Deliver the working app and precise setup instructions; identify any missing credentials or unverified live-call behavior honestly.