Building an AI Agent to Generate Apple Logo Animations: From ReAct Loops to Harness Engineering

Why ChatGPT’s Raw Output Fails

When asked to draw an Apple logo animation using only HTML and SVG, ChatGPT produces a crude result that looks far from acceptable for 2026 AI standards.

To improve quality, the author first copies a clean SVG logo from an icon library and feeds that to the model, which yields a much better animation.

Automating the Process with a Wrapper Site

The author builds a website that wraps the ChatGPT API and adds a backend function to search for icons on iconfont automatically.

The workflow for generating a logo animation becomes four steps:

Send the user’s prompt and inform the AI that a logo‑search tool is available.

The AI decides it needs a logo, calls the search tool with the parameter "Apple logo".

The backend executes the search and returns a suitable SVG.

The site sends the SVG together with the original prompt to the AI, which finally creates the animation.

ReAct: Reasoning and Acting Loop

The AI follows a simple three‑stage cycle:

Think : Analyze the request and decide which tool to use.

Act : Invoke the chosen tool with appropriate parameters.

Observe : Receive the tool’s output and decide the next action.

This loop repeats until the AI judges the result satisfactory.

Memory Limitations and Context Management

Large language models have no persistent memory; each turn must include the full conversation history. As the dialogue grows, it eventually exceeds the model’s context window.

To keep the conversation within limits, the system performs context compression : it summarizes earlier exchanges into a short paragraph and replaces the original text, sacrificing some detail.

Multi‑Agent Collaboration

For complex tasks—e.g., an animation showing Apple’s logo evolution, product timeline, and global store distribution—the author proposes splitting work among several AIs.

A "project manager" AI parses the overall requirement, breaks it into sub‑tasks, and assigns each to a dedicated worker AI (logo search, data retrieval, map generation, timeline creation, final composition). Each worker has its own context window, avoiding the single‑agent explosion problem.

Common Pitfalls and Defensive Measures

Format errors : The AI may prepend explanatory text or wrap JSON in markdown, causing parsing failures. The backend must strip the extra text before JSON.parse. JSON.parse Parameter misuse : The AI might fill tool arguments with natural‑language phrases instead of the required strict format (e.g., city name "Apple first flagship store"). A validation layer checks that parameters meet expected types and ranges, returning errors for correction.

Prompt‑injection attacks : Users may ask the model to reveal system prompts. An input‑filter scans prompts for suspicious commands and blocks them.

Repeated mistakes : The AI may keep using a white background despite instructions. The system adds a post‑processing script that scans generated SVGs for #FFFFFF and replaces it with a darker color.

#FFFFFF → #1A1A1A

Harness: The Protective Framework

All the layers—input filtering, format cleaning, parameter validation, tool execution, visual verification, output filtering, error‑retry loops, and code‑level safeguards—form a "harness" that keeps the AI’s actions reliable and secure.

In summary, the progression from a naïve ChatGPT that only talks, to a fully engineered AI agent that thinks, acts, observes, remembers, collaborates, and operates safely, is achieved through ReAct loops, context management, multi‑agent design, and the Harness engineering framework.