DEV Community: Prakash Verma

Hive: Terminal Development Orchestration Tool

Prakash Verma — Mon, 16 Feb 2026 01:58:21 +0000

This is a submission for the GitHub Copilot CLI Challenge

What I Built

Hive is a terminal-native, multi-agent orchestration tool specifically designed to bring an entire development team to your command line. Built on the GitHub Copilot SDK, Hive coordinates a swarm of specialized AI agents—Scouts, Architects, Builders, Guardians, and Runners—that work in parallel to solve complex development tasks.

Instead of just "chatting" with an AI, Hive allows you to delegate entire workflows. You describe a task in natural language (or via voice), and the Hivemind decomposes it, plans the execution, and assigns work to agents that share a memory layer. It features a rich TUI (Text User Interface) that visualizes the entire process in real-time.

Key Features

🤖 Multi-Agent Swarm: A Directed Acyclic Graph (DAG) of specialized agents.
- Scout: Maps the codebase and finds relevant files.
- Architect: Creates implementation plans and identifies risks.
- Builder: Writes code and implements features.
- Guardian: Reviews code for bugs, security issues, and best practices.
- Runner: Executes tests and validates builds.
🔄 Auto-Fix Loop: A self-healing mechanism. If the Guardian finds critical issues, Hive automatically injects new "fix" and "verify" phases into the plan to correct mistakes before they reach you.
🎙️ Voice-Driven Control: Control the swarm with your voice. Pause, resume, or abort tasks using natural language commands.
📋 GitHub Issue Autopilot: Point Hive at a GitHub Issue URL, and it will automatically context-switch, plan, and implement the fix.
📹 Session Recording & Replay: Record your terminal sessions in asciinema format to share "proof of work" or debug agent behavior.
📊 Real-Time Cost Dashboard: Track token usage and estimated costs directly in the terminal as agents work.
🛠️ Custom YAML Presets: Define custom agent teams and workflows (e.g., "Deep Security Audit" or "Rapid Prototyping") using simple YAML configuration files.

Demo

Project Repository: https://github.com/prkshverma09/hive

Video Walkthrough:

My Experience with GitHub Copilot CLI

Building Hive with the GitHub Copilot CLI and SDK was a transformative experience. The SDK provided the essential building blocks to create a structured cognitive architecture rather than just a simple chatbot.

Here is how the Copilot CLI ecosystem enabled this project:

Agent Specialization: The SDK's flexibility allowed me to prompt-engineer specific personas (like the "Guardian" for security or "Architect" for planning) and orchestrate them programmatically.
Dev-Tool Integration: Because Copilot CLI is native to the development environment, integrating with local tools like grep, file system operations, and git felt natural and powerful.
Rapid Iteration: Using the CLI to generate boilerplate for the TUI components (using Ink) and the complex event-driven architecture saved hours of development time.
Dry-Run Testing: The ability to mock the Copilot adapter was crucial. It allowed me to build and test complex agent interactions (like the Auto-Fix loop) without incurring API costs or waiting for network latency, ensuring the orchestration logic was solid before connecting the real intelligence.

The most exciting part was watching the "Auto-Fix Loop" in action for the first time—seeing an agent write code, another agent reject it with a specific error, and the first agent acknowledging the feedback and fixing it, all without my intervention. It felt like pairing with a team that never sleeps.

Vibe Travel Planner Non-conversational

Prakash Verma — Mon, 09 Feb 2026 03:55:39 +0000

This is a submission for the Algolia Agent Studio Challenge: Consumer-Facing Non-Conversational Experiences

What I Built

Vibe Travel Planner is a travel discovery app that proactively assists users at every step of the trip planning workflow -- without requiring them to type a single message. While the app includes a conversational chat, the non-conversational features are where contextual intelligence truly shines.

Here's how the app injects smart assistance into the travel planning workflow:

Vibe-Coded Map Markers -- Every destination marker on the interactive map is color-coded by its primary vibe (adventure = orange, romantic = pink, cultural = purple, beach = teal, nightlife = gold, nature = green). The system automatically calculates each city's primary vibe from its Algolia index scores and vibe tags, so users can scan the map and instantly spot clusters of destinations that match their mood -- no search required.
Contextual Map Popups -- Clicking any marker surfaces a rich popup with the city image, top 3 vibe tags, culture and adventure scores, and a truncated description -- all retrieved from the Algolia index. Users get just enough context to decide whether to explore further, without navigating away from the map.
Smart Trip Setup Wizard -- When a user clicks "Plan My Trip" on a destination page, a guided 4-step wizard collects their dates, traveler count, budget level (budget/moderate/luxury), trip style preferences (Cultural Immersion, Adventure, Food & Culinary, Relaxation, Nightlife, etc.), pace, and interests. The wizard uses data from the Algolia index -- like the city's vibe tags and scores -- to generate a personalized itinerary at the end.
Score-Based Visual Indicators -- Every city card and detail page shows color-coded score badges (green for high, yellow for medium, red for low) across five dimensions: culture, adventure, nature, beach, and nightlife. Users can assess a destination's strengths at a glance without reading descriptions.
Silent Query Enhancement -- When a search doesn't return ideal results, the app automatically runs enhanced search behind the scenes -- expanding queries with vibe tag mapping, continent detection, and synonym matching. The user sees better results without knowing the enhancement happened.
Featured Destinations Grid -- The home page surfaces curated city cards with images, vibe tags, scores, and wishlist buttons, giving users an immediate browsing experience powered by Algolia-indexed data the moment they land on the page.
Multi-City Itinerary Builder -- Users can click "+ Add" on any map popup to build a multi-city trip. The map automatically draws route lines between stops, shows stop counts, and numbers the markers -- turning scattered exploration into a structured travel plan with zero typing.

Demo

Demo Video:

GitHub: github.com/prkshverma09/VibeTravelPlanner

Key Screens

Vibe-Coded Map with Legend -- Markers are automatically color-coded by primary vibe category. The legend shows all six vibe types. Users can visually scan for destination clusters that match their mood.

City Detail Page with Score Badges -- Rich destination pages surface vibe tags, color-coded score badges, LLM-generated descriptions, and a "Plan My Trip" wizard -- all powered by data from the Algolia index.

How I Used Algolia Agent Studio

Data Indexed

The Algolia travel_destinations index contains 200+ city records with rich, queryable attributes:

Vibe tags (array): semantic descriptors like "romantic," "bohemian," "hidden gem," "vibrant" -- generated by OpenAI during the data pipeline and used to calculate each city's primary vibe category
Five numeric scores (1-10): culture, adventure, nature, beach, nightlife -- these drive the color-coded score badges and the primary vibe calculation
Primary vibe (derived): the system runs calculatePrimaryVibe() which compares scores and checks vibe tags for keywords (e.g., "romantic," "honeymoon," "couples") to assign each city a dominant vibe category that determines its marker color on the map
Geolocation (_geoloc): latitude/longitude for map placement, clustering, and geo-search
Practical attributes: average cost per day, currency, safety rating, ideal trip length, language, timezone, cuisine variety, accessibility flags
LLM-enriched descriptions: 150-250 word atmospheric descriptions designed to capture each city's unique character

The data pipeline enriches raw city data through OpenAI, generates vibe tags and descriptions, then uploads to Algolia with 22 synonym sets for broader matching.

How Retrieval Enhances the Workflow

The non-conversational experience relies on Algolia retrieval at multiple touchpoints -- all invisible to the user:

Map Load -- On page load, the app fetches cities from the index and renders them as vibe-coded markers. The calculatePrimaryVibe() function uses each city's indexed scores and vibe tags to determine marker color. No user input needed.
Marker Click -- When a user clicks a marker, the popup renders data directly from the Algolia record: image, vibe tags (first 3), description (truncated to 100 chars), and score badges. The popup surfaces just enough indexed data to inform a decision.
City Detail Page -- Navigating to a city page triggers a fetch by objectID from the Algolia index. The full record powers the hero image, description, all vibe tags, all five score badges, and the "Plan My Trip" CTA.
Trip Wizard -- The wizard receives the city's Algolia data (vibe tags, scores, best time to visit) and uses it to contextualize the planning steps. The itinerary generation uses the city's score profile to theme each day.
Itinerary Building -- Adding cities to a trip via map popups triggers fetchCityById() from Algolia to get full city data for each stop, then renders numbered markers and route lines.
Query Enhancement -- When search results are sparse, the app silently enriches the query by mapping input to known vibe tags, detecting continent references (e.g., "European" adds a continent:Europe filter), and falling back through progressively broader search strategies -- all using the Algolia index's faceted attributes.

Targeted Prompting Approach

The Agent Studio system prompt is configured to support the non-conversational features by instructing the agent to:

Return structured city data that the frontend can render as visual components (cards, badges, markers) rather than prose
Include objectID references in results so the frontend can fetch full records for popups, detail pages, and trip planning
Respect the indexed score dimensions so that vibe-coded markers and score badges always reflect the authoritative Algolia data

The 22 synonym sets (e.g., "romantic" → "honeymoon, couples, love, anniversary"; "beach" → "coastal, tropical, seaside, island") ensure that even the non-conversational browsing experience benefits from broad query matching when the user does type a search.

Why Fast Retrieval Matters

In a non-conversational experience, the user isn't waiting for an AI to "think" -- they expect the interface to simply work. Every interaction that feels sluggish breaks the flow:

Map markers must appear instantly -- When the page loads, users see a world map with 200+ vibe-coded markers. Algolia's fast retrieval means the initial data fetch completes before the map tiles finish rendering. The markers are already there when the map appears.
Popups must feel native -- Clicking a map marker should open a rich popup (image, tags, scores, description) with zero perceived delay. Because the Algolia fetch resolves in under 100ms, the popup feels like it was always there -- not like it's loading remote data.
City detail pages must load complete -- Navigating to a destination page fetches the full Algolia record by objectID. Fast retrieval means the hero image, description, vibe tags, and score badges render in a single paint -- no progressive loading or skeleton states visible to the user.
Multi-city trip building must be fluid -- Adding multiple cities to an itinerary triggers individual Algolia fetches for each city. With sub-100ms response times, users can rapidly click "+ Add" on several markers and see the route update in real-time without waiting between stops.
Silent query enhancement must stay silent -- The fallback search strategy (vibe tag expansion → continent filtering → broader query) runs multiple Algolia searches in sequence. Because each search is fast, the entire multi-strategy pipeline completes before the user notices -- the enhanced results just appear.

The result is a travel planning workflow where Algolia-powered intelligence is everywhere but visible nowhere. Score badges, vibe-coded markers, contextual popups, and smart itinerary building all feel like native UI features -- not AI-powered lookups. That's the power of fast, contextual retrieval in a non-conversational experience.

Vibe Travel Planner

Prakash Verma — Mon, 09 Feb 2026 03:51:51 +0000

This is a submission for the Algolia Agent Studio Challenge: Consumer-Facing Conversational Experiences

What I Built

Vibe Travel Planner is an AI-powered travel discovery app that replaces traditional filter-based search with a conversational, vibe-driven experience. Instead of checking boxes for "beach" or "budget," users simply describe the feeling they want from their trip -- "a romantic European getaway with cobblestone streets and great wine" -- and the AI agent finds matching destinations by searching an Algolia index of cities scored across culture, adventure, nature, beach, and nightlife dimensions.

The app goes beyond simple search. Through a rich conversational interface, users can:

Discover destinations by vibe -- describe a mood, atmosphere, or experience and get matched destinations
Compare cities side-by-side -- ask the agent to compare options across scores, climate, and practical details
Check weather -- get real-time weather data and packing suggestions for any destination
Estimate budgets -- calculate trip costs based on duration, travel style (budget/moderate/luxury), and number of travelers
Generate itineraries -- get day-by-day trip plans tailored to interests and travel pace
Build trip plans -- add destinations to a multi-city trip plan with duration and notes
Save to wishlist -- bookmark destinations for future consideration

All of this is orchestrated through a single chat interface, with an interactive Mapbox-powered map that updates in real-time as the conversation progresses, showing destinations with clustering, popups, and route visualization.

Demo

Demo Video:

GitHub: github.com/prkshverma09/VibeTravelPlanner

Key Screens

Home Page -- Split-view with the AI chat on the left and an interactive map on the right. As users chat, the map updates to show recommended destinations.

City Detail Page -- Rich destination pages with hero images, vibe tags, score badges (culture, adventure, nature, beach, nightlife), and a Plan Trip wizard.

How I Used Algolia Agent Studio

Data Indexed

The Algolia travel_destinations index contains city records with:

Text fields: city name, country, continent, a vivid 150-250 word description, vibe tags (e.g., "romantic," "bustling," "hidden gem"), and searchable keywords
Numeric scores (1-10): culture, adventure, nature, beach, nightlife -- enabling the agent to reason about which destinations best match a user's vibe
Practical data: average cost per day, currency, safety rating, ideal trip length, language, timezone, accessibility flags (LGBTQ-friendly, family-friendly, solo-traveler-friendly, digital-nomad-friendly)
Geolocation: _geoloc for map visualization and geo-search
Seasonal data: best months to visit, cuisine variety, airport codes

The data pipeline (packages/data-pipeline/) generates city data enriched through OpenAI for atmospheric descriptions and vibe tags, then uploads to Algolia in batches with 22 synonym sets (e.g., "romantic" maps to "honeymoon, couples, love, anniversary") for broader query matching.

Retrieval-Enhanced Dialogue

The Agent Studio configuration connects the chat to the Algolia index so the agent can search and retrieve city data during conversation. The system prompt (configured in Agent Studio) positions the AI as a "travel concierge specializing in vibe-based destination discovery" with specific instructions to:

Extract vibe keywords from natural language (e.g., "romantic" expands to "romantic, couples, intimate")
Consider practical constraints -- budget, dates, group composition, duration
Provide rich contextual responses -- explain why each destination matches their vibe, not just list results

Targeted Prompting Approach

The system prompt is engineered with detailed tool-usage guidelines. For each of the 9 custom client-side tools, the prompt specifies:

When to use each tool (trigger conditions)
Example phrases that should activate each tool
Proactive suggestions -- after showing search results, the agent should offer to check weather, estimate budgets, or generate itineraries
Tool chaining -- combine weather + budget for trip planning, or comparison + itinerary when deciding between destinations
Context awareness -- if a user mentions dates, proactively offer weather info; if they mention budget concerns, offer estimates

The frontend implements custom layoutComponent renderers for the search results, displaying city cards with images, vibe tags, and score badges directly in the chat -- making the conversation visually rich rather than text-only.

Frontend Integration

The app uses Algolia's <Chat> component from react-instantsearch, wrapped in an InstantSearchProvider with Insights tracking enabled. Custom tools are registered client-side with onToolCall handlers and layoutComponent renderers. A city-card buffering system deduplicates results and syncs chat findings to the map in real-time.

Why Fast Retrieval Matters

In a conversational travel planning session, latency kills the vibe. When someone says "I want a romantic beach getaway in Europe with great food," they expect destinations immediately -- not after a loading spinner. Algolia's sub-100ms search latency means the agent can:

Search and respond in one conversational turn -- the agent retrieves matching cities, reasons about them, and presents recommendations without noticeable delay
Support multi-step tool chains smoothly -- a user asking to "compare Santorini and Amalfi Coast, then show me the budget for the cheaper one" triggers multiple Algolia lookups (fetch both cities, compare scores, fetch cost data). Fast retrieval keeps these chains feeling like a natural conversation rather than a series of loading states
Enable real-time map updates -- as the agent finds destinations, the map immediately reflects results with markers and clustering. Slow retrieval would create a jarring disconnect between the chat and map
Power fallback search gracefully -- when the agent's initial query doesn't yield ideal results, the app runs enhanced search with query expansion (vibe tag mapping, continent filtering, synonym matching). Fast retrieval makes this multi-strategy approach invisible to the user

The combination of Algolia's fast retrieval with rich faceting (22 synonym sets, numeric score filters, geo-search, continent filtering) means the conversational agent can perform sophisticated, contextual searches that feel effortless -- turning what would traditionally be a complex multi-filter search experience into a simple chat about travel vibes.

Spec-Logic: AI-powered PC building assistant

Prakash Verma — Fri, 06 Feb 2026 01:10:14 +0000

This is a submission for the Algolia Agent Studio Challenge: Consumer-Facing Non-Conversational Experiences

What I Built

Spec-Logic is an AI-powered PC building assistant that eliminates the compatibility nightmare of assembling custom computers. It leverages Algolia Agent Studio combined with InstantSearch to provide intelligent, context-aware component recommendations while enforcing technical compatibility constraints—all without requiring extensive back-and-forth dialogue.

The Problem

Building a PC involves navigating a complex web of interdependencies:

Socket Compatibility: AMD AM4 CPUs only work with AM4 motherboards
Memory Standards: DDR4 and DDR5 are incompatible and motherboard-dependent
Power Requirements: High-end GPUs like the RTX 4090 can spike to 2x their rated power
Physical Constraints: GPU length and cooler height must fit within case clearances

Current solutions like PCPartPicker require manual navigation and don't explain why components are incompatible. Generic chatbots lack the structured data needed to enforce hard compatibility rules.

The Solution

Spec-Logic combines Algolia's lightning-fast structured search with AI-powered explanations to:

Automatically filter incompatible options before showing them
Display visual compatibility badges (✅ Compatible, ⚠️ Warning, ❌ Incompatible)
Calculate power requirements with realistic safety margins for transient spikes
Provide AI assistance through an embedded chat widget for questions and recommendations

Key Features

Smart Compatibility Checking: When you select a CPU, only compatible motherboards appear
Advanced Filtering & Sorting: Filter components by brand, price range, and type-specific attributes (CPU socket, GPU VRAM, motherboard form factor). Sort by price for budget optimization
Visual Case Preview: Selected case displays with product imagery in the build summary sidebar
Real-time PSU Calculator: Accurate power calculations with 1.5x safety margins and transient spike handling
Physical Clearance Validation: GPU length and cooler height checks against case dimensions
Intelligent Chat Input: Combobox-style input with suggested queries and natural language processing
Export & Share: Export builds to PCPartPicker format, Reddit markdown, or shareable links

Demo

🔗 Live Demo: https://computer-spec-logic.vercel.app/

📦 GitHub Repository: https://github.com/prkshverma09/ComputerSpecLogic

🎥 Demo Video:

Screenshots

Homepage

Build Configuration with Compatibility Checking

Component Selection Modal

Filter & Sort Toolbar

Build Summary with Case Image

Compatibility Warnings (Tight Fit Alerts)

AI Chat Assistant with Combobox Input

Export Build (PCPartPicker, Reddit, JSON, Share Link)

How I Used Algolia Agent Studio

Data Indexed

I created a comprehensive PC components index containing 7 component types with rich structured data:

{
  "objectID": "cpu-amd-ryzen5-5600x",
  "component_type": "CPU",
  "brand": "AMD",
  "model": "Ryzen 5 5600X",
  "socket": "AM4",
  "tdp_watts": 65,
  "cores": 6,
  "threads": 12,
  "memory_type": ["DDR4"],
  "price_usd": 199,
  "performance_tier": "mid-range",
  "compatibility_tags": ["am4", "ddr4", "pcie4"]
}

The index includes:

CPUs: Socket type, TDP, core count, memory support
GPUs: Length (mm), TDP, VRAM, recommended PSU wattage
Motherboards: Socket, form factor, memory type support
RAM: DDR type, speed, capacity
PSUs: Wattage, efficiency rating
Cases: Max GPU length, max cooler height, form factor support, product images
Coolers: Height, socket support, TDP rating

Retrieval-Enhanced Workflow

The magic happens through proactive filtering based on build context. Here's the flow:

User selects a CPU (e.g., AMD Ryzen 5 5600X with AM4 socket)
Build state updates with active filters: socket: "AM4", memory_type: "DDR4"
Search results automatically filter to show only compatible components
Compatibility badges appear on every component showing fit status

This is "non-conversational intelligence" in action—the system guides users through contextual data retrieval without requiring dialogue.

Query Rules Configuration

I configured Algolia Query Rules to detect component patterns and apply automatic filtering:

{
  "pattern": "Ryzen 5 5|Ryzen 7 5|Ryzen 9 5|5600X|5800X|5900X",
  "consequence": {
    "params": {
      "filters": "socket:AM4",
      "userData": { "detected_socket": "AM4", "compatibility_mode": true }
    }
  }
}

When a user searches for "Ryzen 5 5600X", the system automatically:

Detects it's an AM4 CPU
Filters subsequent motherboard searches to AM4 socket
Passes compatibility context to the AI assistant

Targeted Prompting Approach

The Agent Studio system prompt enforces hard compatibility rules:

You are Spec-Logic, an expert PC building assistant.

## Core Rules (NEVER violate):

1. **CPU ↔ Motherboard**: socket MUST match exactly
   - AM4 CPUs → AM4 motherboards only
   - LGA1700 CPUs → LGA1700 motherboards only

2. **Memory ↔ Motherboard**: memory_type MUST match
   - DDR4 motherboards → DDR4 RAM only

3. **GPU ↔ Case**: gpu_length_mm MUST be < case.max_gpu_length_mm

4. **PSU Calculation**:
   - Calculate: (CPU TDP + GPU TDP + 100W base) × 1.5 safety margin
   - For RTX 4090/4080: add additional 150W for transient spikes

## Behavior:
- When a user selects a component, IMMEDIATELY update filters
- Always explain WHY a recommendation fits or doesn't fit
- Track the "Current Build" state throughout the conversation

This ensures the AI never recommends incompatible components and always provides context-aware suggestions.

Why Fast Retrieval Matters

PC building requires instant feedback. When a user clicks "Add to Build" on a CPU, they expect:

Immediate visual confirmation that it was added
Instant filtering of search results to compatible options
Real-time compatibility badges on all visible components
Updated power calculations in milliseconds

Algolia's sub-200ms search latency makes this possible. Here's why speed is critical for this use case:

The "Lock-In" Moment

The core UX pattern is what I call the "Lock-In":

User selects AMD Ryzen 5 5600X
     ↓
System locks: socket=AM4, memory=DDR4
     ↓
Motherboard search instantly filters to compatible AM4 boards
     ↓
User sees only valid options with green badges

This happens in under 200ms. Any perceptible delay would break the flow and make users question whether the filtering worked.

Real-Time Power Calculations

As components are added, the PSU calculator updates instantly:

// Power calculation runs on every component change
const totalDraw = basePower + cpuPower + gpuPower + transientBuffer;
const recommendedPsu = Math.ceil(totalDraw * 1.5 / 50) * 50;

The power meter in the sidebar animates smoothly because Algolia's fast retrieval means we can fetch component specs and recalculate without any loading states.

Compatibility Badge Performance

Every component card displays a compatibility badge. For a search returning 20 results, we need to:

Fetch component specs from the index
Compare against current build state
Determine compatibility status
Render appropriate badge

With Algolia's speed, this happens before the user even finishes processing the search results visually—creating the perception that the system "just knows" what's compatible.

Tech Stack

Layer	Technology
Frontend	Next.js 14, React 18, Tailwind CSS, shadcn/ui
Search	Algolia InstantSearch, Agent Studio
State	Zustand with localStorage persistence
Backend	Python ETL pipeline for data ingestion
Testing	Vitest (unit), Playwright (E2E), pytest (backend)
Hosting	Vercel

What's Next

Image Enrichment for All Components: Extend product imagery to CPUs, GPUs, motherboards, and other component types
Price Tracking: Alerts when build components drop in price
Benchmark Integration: Show estimated FPS for popular games based on CPU/GPU combination
Community Builds: Browse and fork popular configurations from other users
Build Comparison: Side-by-side comparison of multiple saved builds

Built with ❤️ for the Algolia Agent Studio Challenge 2026

AI Chart Animator

Prakash Verma — Mon, 15 Sep 2025 01:52:46 +0000

This is a submission for the Google AI Studio Multimodal Challenge

What I Built

I built the AI Chart Animator, a web application that breathes life into static data visualizations. The app solves a common problem for presenters, marketers, and data analysts: static charts are informative but often visually unengaging. Creating animated versions traditionally requires specialized software and significant manual effort.

AI Chart Animator streamlines this entire process. A user can upload an image of a standard bar or line chart, and through a sophisticated multimodal AI pipeline, the application automatically generates a stunning, futuristic animation of that chart. The result is a dynamic video that makes data more impactful and memorable.

The core workflow is a three-step process powered by AI:

Stylize: A Google Gemini model transforms the original chart into a high-tech, futuristic version, which serves as the animation's end frame.
Deconstruct: The same model then intelligently removes the data elements (the bars or lines) from the futuristic chart to create a clean, empty frame, which serves as the animation's start frame.
Animate: A third-party video generation model (Hailuo AI) is used to create a smooth animation that transitions between the start and end frames, showing the data appearing dynamically.

Demo

I couldn't deploy this app to cloud run, because my credits were over for Minimax API, and I didn't had credit card for cloud run deployment. But, here is the aistudio app link, through which you can see the app and its code: https://ai.studio/apps/drive/18mGw-J40Vjon-elGWBWBYyla-J5fMOIY. Anyone with this public link can access the app.

You can see the AI Chart Animator in action in this full walkthrough video:

Below is a visual representation of the app's three-step generation process:

Original Chart	Step 1: Futuristic End Frame	Step 2: Empty Start Frame
(Your uploaded chart image)	(AI-generated futuristic style)	(AI-generated empty frame)

How I Used Google AI Studio

I leveraged Google AI Studio's powerful multimodal capabilities as the core engine for the image processing pipeline. The entire image transformation process is powered by the gemini-2.5-flash-image-preview model. My implementation uses a chained, multi-step approach where the output of one multimodal prompt becomes the input for the next.

Step 1: Initial Transformation (Image + Text -> Image)

I send the user's uploaded chart image along with a detailed text prompt to Gemini. The prompt instructs the model to reimagine the chart with a futuristic aesthetic while critically preserving the original data.

Prompt for a Bar Chart:

"Transform this bar chart into a 3D futuristic masterpiece. Give it a sleek, dark theme with vibrant neon highlights and a high-tech feel. The bars should have a sense of depth and perspective. Keep the overall structure, data, and labels intact but render them in a matching 3D style."

Step 2: Content Removal (Image + Text -> Image)

The newly generated futuristic chart from Step 1 is then sent back to the Gemini model. This time, it's accompanied by a different text prompt that acts as a precise surgical instruction to deconstruct the image.

Prompt to remove bars from the futuristic chart:

"From this 3D futuristic bar chart image, perfectly remove only the colored bars. It is crucial to leave the 3D axes, axis labels, grid lines, title, and background completely intact, preserving their perspective and style. The output should be the empty 3D chart frame."

This two-step process, driven entirely by Gemini's ability to understand and manipulate image content based on text commands, is what creates the necessary start and end frames for the final animation.

Step 3: Animation Video Generation (Start Image + End Image -> Video)

I use the 2 images generated in the previous steps to generate a cool animation video using Minimax's Hailuo model. This is the step for which I need Minimax's API key, don't worry the API key is used only for 1 animation video generation and is not stored. The image generated from Step 2 is used as the starting frame, and the image generated from Step 1 is used as the ending frame.

Multimodal Features

The core of this project is its sophisticated use of Image + Text -> Image Generation to deconstruct and rebuild a data visualization for animation. This goes far beyond simple image generation and leverages Gemini's deep contextual understanding.

Context-Aware Stylization: The first multimodal feature is the ability to apply a complex artistic style (futuristic, neon) to a structured image (a chart) without corrupting the underlying information. The model successfully understands the prompt's intent to "keep the data intact," demonstrating a crucial comprehension of both the visual input and the text constraints. This enhances the user experience by transforming a mundane chart into something visually exciting and professional.
Intelligent Object Removal: The second, more advanced multimodal feature is the ability to selectively remove specific elements from an image based on a natural language command. Asking the model to "perfectly remove only the colored bars" or "remove the lines from the line graphs" requires it to identify what a "bar" or "line" is within the context of the chart, isolate it from the background and axes, and intelligently fill in the space behind it. This is a powerful capability that automates what would otherwise be a tedious manual task in an image editor, making the entire animation workflow feasible and fast for the end-user.