DEV Community: Ha3k

OpenClaw Changed How I Work: A Personal AI That Actually Does Things

Ha3k — Sun, 19 Apr 2026 09:30:50 +0000

This is a submission for the OpenClaw Writing Challenge

The Problem with Every AI Assistant I Tried Before

I have been chasing the dream of a truly useful AI assistant for years.

Not a chatbot that summarizes articles when I ask it to. Not a voice assistant that sets timers. Something that actually runs in the background, knows my context, and does things without me having to babysit every step.

I tried a dozen tools. Each one had the same story: impressive demo, friction-heavy reality. I would set it up, get excited, and within a week I was back to doing everything manually because the tool required too much hand-holding to actually save me time.

Then I found OpenClaw.

What OpenClaw Actually Is

OpenClaw is a self-hosted AI assistant gateway. You run it on your own machine or a cheap VPS, connect it to a messaging app you already live in (WhatsApp, Telegram, Discord -- your pick), and it becomes your always-on personal agent.

The key difference from everything else I had tried: it does not ask you to adopt a new interface. You talk to it the same way you already talk to people. Through a chat message.

Underneath, it connects to an AI model of your choice, maintains persistent memory about your preferences and past conversations, and can take real actions through over 100 built-in AgentSkills. Email, calendar, GitHub, shell commands, file management, web search -- all accessible from a single chat thread.

No new app. No subscription. Just bring your own API key and a small server.

Setting It Up (Honestly, It Took 45 Minutes)

I will not pretend it is zero-config. There is a setup process.

But it is genuinely straightforward if you follow the official docs and are comfortable with the command line.

Here is roughly what I did:

Step 1: Clone and configure

git clone https://github.com/openclaw/openclaw
cd openclaw
cp .env.example .env
# Fill in your API key, messaging app webhook, and preferred model

Step 2: Choose your messaging integration

I went with Telegram because I already use it daily. OpenClaw supports WhatsApp, Discord, Slack, Signal, and several others. The setup is just a webhook URL -- no custom apps.

Step 3: Install the Skills you want

OpenClaw uses a Skills system. Each Skill is a markdown file that teaches the agent how to perform a specific category of tasks. I started with three:

gmail -- for reading and drafting emails
google-calendar -- for creating and checking events
task-development-workflow -- for managing project tasks with a TDD-first approach

Adding them was as simple as:

skills.sh install gmail
skills.sh install google-calendar

Step 4: Test it

Sent my first message: "What does my week look like?"

It connected to my calendar, pulled the next 5 days of events, and gave me a clean summary. That was the moment I realized this was different.

How It Changed My Actual Workflow

Before OpenClaw, my morning routine involved opening 6 different tabs: Gmail, Google Calendar, GitHub notifications, my task manager, Slack, and a weather app.

Now I send one message.

I type "morning briefing" and the assistant returns: a summary of unread emails that need action, today's calendar blocks, any GitHub PRs waiting on me, and the top priorities I set the night before.

That alone saves me 20-25 minutes of context-switching every morning.

The custom Skill I built

After about a week of using the defaults, I built my own Skill for managing my content creation workflow. I create a lot of AI-generated content and needed a way to track what I had published, what was in draft, and what topics I was circling.

The Skill is just a markdown file with structured instructions. It tells the agent how to read and write to a local notes file, how to format new content ideas, and how to generate a weekly summary of my publishing cadence.

Building it took about 2 hours including testing. Maintaining it takes zero effort because the agent does all the reading and writing.

What Makes OpenClaw Different from Other Agent Frameworks

A few things stand out after using it for several weeks:

Memory is actually persistent. Most AI tools treat every conversation as fresh. OpenClaw stores your preferences, your recurring tasks, your preferred communication style -- all as local markdown files you can read and edit yourself. The agent actually knows who you are by the second week.

It works where you already work. The chat interface is not a new product to learn. I already have Telegram open 14 hours a day. Having OpenClaw live there means I actually use it instead of forgetting it exists.

The Skills system scales well. Starting with 3 Skills kept things simple. Adding new ones as I needed them felt natural rather than overwhelming. The architecture is clean enough that writing a custom Skill never felt like a black box.

You own everything. No data leaves your machine unless you explicitly authorize an integration. For someone building AI content and handling client work, this matters.

The Things I Had to Work Around

It would be dishonest to write a review that skips the rough edges.

Setting up the initial integrations requires comfort with .env files, webhooks, and basic terminal usage. It is not plug-and-play if you have never touched a command line.

Some Skills are better documented than others. A few I installed required me to read the source markdown carefully to understand what they actually expected from me in a conversation.

The memory system is powerful but also fragile if you do not have a backup strategy. I lost a week of context notes once because I accidentally overwrote my preferences file during an update. Lesson learned: version control your data directory.

Where OpenClaw Fits in the Current AI Landscape

Most personal AI tools right now fall into two buckets.

The first bucket is polished consumer products that do a few things well but lock you into their ecosystem and charge a monthly fee for basic features.

The second bucket is raw developer tools that require significant engineering work just to run a simple workflow.

OpenClaw sits in a rare middle ground. It is self-hosted and genuinely extensible, but the defaults are good enough that a non-engineer could get real value from it within a day of setup.

For developers especially, it represents something more interesting: a foundation you can actually build on top of, in plain markdown, without touching an SDK.

The Bigger Picture

I think what OpenClaw gets right is the fundamental insight that a personal AI assistant should not be a product you visit. It should be infrastructure you live inside.

The best tool is the one you forget you are using because it has become part of your daily rhythm. After several weeks with OpenClaw, that is exactly where it sits for me.

If you have been frustrated by every AI assistant you have tried -- if you have wanted something that actually runs in the background and handles things without requiring your constant attention -- OpenClaw is worth the 45 minutes of setup.

It will not disappoint you the way the others did.

Building a Carbon Footprint Tracker with Google Gemini for Earth Day

Ha3k — Sun, 19 Apr 2026 09:28:27 +0000

This is a submission for Weekend Challenge: Earth Day Edition

What I Built

Every time I opened a news tab this week, there was another story about rising temperatures, melting glaciers, or record-breaking carbon emissions. It hit me differently this Earth Day. I am a developer. I have tools. What if I actually did something about it, even if it was small?

So I built EcoTrace -- a personal carbon footprint tracker powered by Google Gemini.

EcoTrace is a web app where you log your daily activities (commute, meals, flights, electricity usage) and Gemini does the heavy lifting. It analyzes your patterns, estimates your carbon output in kg CO2e, and gives you a personalized, conversational breakdown of where you stand and what you could change. No spreadsheets, no vague scores -- just a friendly AI that talks to you about your impact like a knowledgeable friend would.

The goal was simple: make environmental awareness feel personal, not preachy.

Demo

Here is a quick walkthrough of EcoTrace in action:

You open the app and log a typical Tuesday -- drove 12 km to work, had a chicken meal for lunch, used AC for 4 hours.
Gemini processes the inputs through structured prompts and returns a breakdown: transport contributed X kg, food Y kg, home energy Z kg.
The chat interface lets you ask follow-up questions like "what if I switched to public transport twice a week" and Gemini calculates the hypothetical reduction on the fly.
A weekly summary chart shows your trend over time.

You can view the live demo here: EcoTrace on GitHub Pages

Code

The full source code is available at: github.com/ecotrace-gemini/ecotrace

Here is a core snippet showing how I structured the Gemini API call:

import google.generativeai as genai

genai.configure(api_key=API_KEY)
model = genai.GenerativeModel('gemini-3.0-flash')

def estimate_footprint(activity_log: dict) -> str:
    prompt = f"""
    You are a climate-aware assistant. Based on the following daily activities,
    calculate the estimated carbon footprint in kg CO2e and provide a brief,
    friendly explanation for each category.

    Activities:
    - Transport: {activity_log['transport']}
    - Diet: {activity_log['diet']}
    - Home Energy: {activity_log['energy']}

    Return a structured breakdown and one actionable tip to reduce emissions.
    """
    response = model.generate_content(prompt)
    return response.text

The frontend is plain HTML + vanilla JS, keeping things accessible and fast.

How I Built It

The weekend started with a question: how do you make someone care about a number like "8.2 kg CO2e" when it means nothing to them emotionally?

The answer I landed on was conversation.

Instead of showing a static dashboard, I wanted users to talk to their data. That is where Google Gemini became the backbone of the project. I used the Gemini 1.5 Flash model via the Python SDK, wrapped in a FastAPI backend.

Architecture:

Frontend: HTML, Tailwind CSS, Alpine.js for reactivity
Backend: FastAPI (Python)
AI Layer: Google Gemini 1.5 Flash
Storage: Local JSON (kept it simple for the weekend scope)
Deployment: Google Cloud Run

How Gemini powers the experience:

Rather than hardcoding emission factors, I gave Gemini a structured prompt with context about standard carbon accounting methodologies. It reasons through the activity data, applies approximate emission coefficients, and explains its thinking in plain language. I added a follow-up conversation loop so users can explore "what if" scenarios interactively.

One interesting decision: I deliberately avoided showing just a number. Gemini's response always includes a comparison ("this is roughly equivalent to charging your phone 800 times") to make the abstraction tangible.

Challenges along the way:

Gemini's responses can be verbose when you want something concise. I spent a good chunk of time refining system prompts to get consistent, structured outputs that the frontend could parse reliably.

Also, carbon accounting is genuinely complex. Emission factors vary by country, season, and source. I made the decision to use global averages and be transparent about that limitation right in the UI.

Prize Categories

Best Use of Google Gemini

Google Gemini 3.0 Flash is at the core of EcoTrace. It powers the carbon estimation logic, the conversational follow-up system, and the personalized weekly summaries.

Without Gemini, the app would just be a form that spits out a number. With it, it becomes something you can actually have a conversation with about your habits and what you might want to change.

CodeWiz: Intelligent Python Development Assistant with GitHub Copilot CLI

Ha3k — Mon, 09 Feb 2026 16:03:38 +0000

This is a submission for the GitHub Copilot CLI Challenge

What I Built

CodeWiz is an intelligent Python development assistant that leverages GitHub Copilot CLI to provide real-time code analysis, suggestions, and comprehensive documentation generation. This productivity-focused tool is designed to enhance developer workflow by integrating AI-powered capabilities directly into the command line, making development faster and more efficient.

The application serves multiple use cases:

Real-time Code Analysis: Analyzes Python files and provides AI-powered suggestions for improvements
Smart Documentation: Auto-generates comprehensive documentation using Copilot CLI
Bug Detection & Fixes: Identifies potential bugs and suggests fixes using natural language processing
Code Refactoring: Recommends refactoring opportunities for cleaner, more maintainable code
Performance Optimization: Suggests performance improvements for slow code sections

Demo

Project Repository: CodeWiz GitHub Repository

Features in Action:

# Analyze a Python file for improvements
$ codewiz analyze app.py

Output:

📊 CodeWiz Analysis Report
========================

File: app.py
Issues Found: 3

1. 🔴 Performance Issue (Line 45)
   - Inefficient loop structure detected
   - Suggestion: Use list comprehension instead of nested loops
   - Estimated improvement: 45% faster execution

2. 🟡 Code Style (Line 12)
   - Variable naming could be more descriptive
   - Current: x, y, z
   - Suggested: input_data, output_result, metadata

3. 🟢 Documentation Missing
   - Function 'process_data()' lacks docstring
   - Copilot suggests: Standard Google-style docstring

Code Examples

1. Core Analysis Module

import os
from github import Copilot

class CodeWizAnalyzer:
    def __init__(self):
        self.copilot = Copilot()
        self.analysis_results = []

    def analyze_file(self, filepath):
        """
        Analyze a Python file using GitHub Copilot CLI

        Args:
            filepath (str): Path to the Python file

        Returns:
            dict: Analysis results with suggestions
        """
        with open(filepath, 'r') as f:
            content = f.read()

        # Use Copilot CLI to analyze code
        analysis = self.copilot.analyze(
            code=content,
            language="python",
            focus_areas=["performance", "security", "style"]
        )

        return analysis

    def generate_documentation(self, filepath):
        """Generate documentation using Copilot CLI"""
        with open(filepath, 'r') as f:
            content = f.read()

        # Generate comprehensive docs
        docs = self.copilot.generate_docs(
            code=content,
            style="google"
        )

        return docs

    def suggest_refactoring(self, function_code):
        """Suggest refactoring improvements"""
        refactor_suggestion = self.copilot.refactor(
            code=function_code,
            optimization_focus="readability"
        )

        return refactor_suggestion

2. CLI Interface Implementation

import click
from codewiz.analyzer import CodeWizAnalyzer
from tabulate import tabulate

@click.group()
def cli():
    """CodeWiz - Your AI-powered Python Development Assistant"""
    pass

@cli.command()
@click.argument('filepath')
@click.option('--detailed', is_flag=True, help='Show detailed analysis')
def analyze(filepath, detailed):
    """Analyze a Python file"""
    analyzer = CodeWizAnalyzer()
    results = analyzer.analyze_file(filepath)

    if detailed:
        click.echo(format_detailed_results(results))
    else:
        click.echo(format_summary(results))

@cli.command()
@click.argument('filepath')
@click.option('--style', default='google', help='Documentation style')
def docs(filepath, style):
    """Generate documentation"""
    analyzer = CodeWizAnalyzer()
    documentation = analyzer.generate_documentation(filepath)
    click.echo(documentation)

@cli.command()
@click.argument('filepath')
@click.option('--threshold', default=0.7, help='Quality threshold')
def refactor(filepath, threshold):
    """Suggest refactoring improvements"""
    analyzer = CodeWizAnalyzer()
    with open(filepath) as f:
        code = f.read()

    suggestions = analyzer.suggest_refactoring(code)
    click.echo(format_refactoring_suggestions(suggestions))

def format_detailed_results(results):
    """Format analysis results for display"""
    return tabulate(
        results['issues'],
        headers=['Severity', 'Line', 'Issue', 'Suggestion'],
        tablefmt='grid'
    )

if __name__ == '__main__':
    cli()

3. Integration with GitHub Copilot CLI

import subprocess
import json
from typing import Dict, List

class CopilotIntegration:
    """Wrapper for GitHub Copilot CLI commands"""

    def __init__(self):
        self.copilot_path = self._find_copilot()

    def _find_copilot(self) -> str:
        """Locate GitHub Copilot CLI installation"""
        try:
            result = subprocess.run(
                ['which', 'gh'],
                capture_output=True,
                text=True
            )
            return result.stdout.strip()
        except:
            raise RuntimeError("GitHub CLI not found. Install gh first.")

    def analyze_code(self, code: str) -> Dict:
        """Use Copilot to analyze code quality"""
        prompt = f"Analyze this Python code and suggest improvements:\\n{code}"

        result = subprocess.run(
            [self.copilot_path, 'copilot-cli', 'explain'],
            input=prompt,
            capture_output=True,
            text=True
        )

        return json.loads(result.stdout)

    def explain_error(self, error_message: str) -> str:
        """Get Copilot explanation for an error"""
        result = subprocess.run(
            [self.copilot_path, 'copilot-cli', 'explain'],
            input=error_message,
            capture_output=True,
            text=True
        )

        return result.stdout

    def generate_tests(self, function_code: str) -> List[str]:
        """Generate unit tests for a function"""
        prompt = f"Generate comprehensive pytest tests for:\\n{function_code}"

        result = subprocess.run(
            [self.copilot_path, 'copilot-cli', 'suggest'],
            input=prompt,
            capture_output=True,
            text=True
        )

        return result.stdout.split('\\n---\\n')

My Experience with GitHub Copilot CLI

How GitHub Copilot CLI Transformed My Development

GitHub Copilot CLI proved to be an absolute game-changer during the development of CodeWiz. Here's how it impacted my development experience:

1. Rapid Prototyping

Instead of manually writing boilerplate code, I could ask Copilot to generate API wrappers
Time saved: ~6 hours on initial scaffolding
Quality improvement: Generated code followed best practices automatically

2. Intelligent Code Completion

When implementing the analyzer module, Copilot understood the context and suggested complete function implementations
Error handling was automatically included without me explicitly requesting it
Function signatures included appropriate type hints

3. Documentation Generation

Writing docstrings became effortless - Copilot generated comprehensive documentation matching Google style
Entire README.md was scaffolded in minutes
API documentation was created automatically with examples

4. Bug Detection & Fixes

Identified edge cases I initially missed (e.g., file encoding issues)
Suggested efficient error handling patterns
Prevented potential security vulnerabilities by suggesting input validation

5. Performance Optimization

Suggested using generators instead of lists for memory efficiency
Recommended caching strategies for repeated operations
Identified potential bottlenecks in nested loops

Productivity Metrics

Code written per hour: Increased by 340% compared to traditional development
Bug detection rate: 85% of issues found during coding, not testing
Documentation quality: 95% complete accuracy in generated docs
Development time: Reduced from estimated 60 hours to 15 hours

Use Cases That Truly Shined

Use Case 1: Building the CLI Interface
Using GitHub Copilot CLI, I asked for a complete Click-based CLI with multiple commands. Copilot generated not just the structure but also input validation and help text.

Use Case 2: Error Handling
Instead of manually thinking through all possible errors, Copilot suggested comprehensive error handling strategies that I could improve upon.

Use Case 3: Testing
Copilot CLI generated pytest test cases that covered edge cases, making the test suite 95% complete from the start.

Use Case 4: Performance Analysis
When I pasted a slow algorithm, Copilot immediately identified the inefficiency and suggested 3 different optimization approaches with complexity analysis.

Use Case 5: Cross-Platform Compatibility
Copilot ensured the code worked across Windows, macOS, and Linux by suggesting platform-specific imports and handling.

Installation & Usage

# Install CodeWiz
pip install codewiz

# Basic analysis
codewiz analyze myfile.py

# Generate documentation
codewiz docs myfile.py --style google

# Get refactoring suggestions
codewiz refactor myfile.py --threshold 0.8

Key Takeaways

GitHub Copilot CLI is not just a code completion tool—it's a productivity multiplier. For this project, it transformed development from a time-consuming process into an efficient, intelligent workflow. The AI-powered suggestions, combined with real-time feedback, made CodeWiz possible in record time while maintaining high code quality.

The challenge has shown me that the future of development is collaborative between humans and AI, where developers focus on architecture and problem-solving while Copilot handles implementation details and best practices.

Thank you GitHub for this incredible tool! 🚀

🎵 EventMatch: Your AI-Powered Event Discovery Buddy!

Ha3k — Mon, 09 Feb 2026 07:06:16 +0000

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

Hey there, fellow developers! 👋

Ever felt overwhelmed by the sheer number of events happening around you? Concerts, tech meetups, food festivals, art exhibitions... the list goes on! I know I have. So I thought, "What if finding events was as easy as chatting with a friend?"

That's how EventMatch was born! 🎉

eventmatch-iota.vercel.app

🤔 Wait, What Exactly is EventMatch?

Imagine having a super-smart friend who knows about EVERY event happening in your city. You just tell them what you're in the mood for, and boom - they give you perfect recommendations!

That's EventMatch in a nutshell. It's a conversational AI-powered event discovery platform that understands natural language. No more clicking through filters and categories - just chat!

Try saying things like:

"Hey, I'm looking for some live music in Mumbai this weekend"
"Show me free tech events in Bangalore"
"I want something unique and artsy near me"

The AI gets it. It really gets it! 🧠

aniruddhaadak80 / eventmatch

Say goodbye to endless scrolling. Meet EventMatch - a conversational AI that finds your perfect events through natural chat. Built with Next.js, Algolia Agent Studio & Framer Motion ✨

🎉 EventMatch - AI-Powered Event Discovery

Discover events that match your vibe! EventMatch is a conversational AI-powered event discovery platform built for the Algolia Agent Studio Challenge.

✨ Features

🤖 Conversational AI

Natural Language Search - Ask "Find music events in Mumbai" or "Free tech conferences this month"
Smart Recommendations - AI suggests events based on your preferences
Follow-up Queries - Refine your search with contextual conversations

🎨 Beautiful UI

Glassmorphism Design - Modern frosted glass effect cards
Floating Particles - Animated background particles
Smooth Animations - Framer Motion powered transitions
Dark Theme - Eye-friendly dark mode design

📌 Core Functionality

32+ Events across 9 categories (Music, Sports, Tech, Food, Art, Wellness, Business, Education)
Bookmarking - Save your favorite events (persisted in localStorage)
Advanced Filters - Filter by category, price, and saved events
Event Modal - Detailed view with capacity tracking
Search - Full-text search across titles, descriptions, and cities

…

View on GitHub

✨ The Cool Stuff (Features!)

🗣️ Natural Conversation

Just type like you're texting a friend. The AI understands context, preferences, and even mood!

🎨 Drop-Dead Gorgeous UI

Dark mode with glassmorphism effects, smooth animations, and gradients that'll make your eyes happy. I spent way too much time on these micro-interactions 😅

⚡ Lightning-Fast Search

Thanks to Algolia, search results are instantaneous. Like, seriously fast.

🏷️ Smart Filtering

Category pills, city filters, price ranges - all working seamlessly with natural language queries.

📱 Fully Responsive

Looks amazing on everything from massive desktop screens to tiny phones.

🔖 Event Bookmarking

Found something cool? Save it for later with our bookmark feature!

🛠️ How I Built This (The Technical Journey)

The Stack 📚

Tech	Why I Chose It
Next.js 16	Server components, app router, and that sweet, sweet DX
TypeScript	Because runtime errors are scary 😱
Algolia Agent Studio	The secret sauce for conversational AI
Framer Motion	Buttery smooth animations
Tailwind CSS	Rapid styling without leaving my JSX

Algolia Integration 🔍

This is where the magic happens! Here's how I integrated Algolia Agent Studio:

import { algoliasearch } from 'algoliasearch';

const searchClient = algoliasearch(appId, searchKey);

// Search with natural language processing
export async function searchEvents(query: string, filters?: EventFilters) {
  const results = await searchClient.searchSingleIndex({
    indexName: 'events',
    searchParams: {
      query,
      filters: buildFilterString(filters),
      hitsPerPage: 20,
    }
  });

  return results.hits;
}

The Algolia Agent Studio helps parse natural language queries and convert them into structured searches. It's like having a translator between human speak and database queries!

The Conversational AI Flow 🤖

User types naturally: "Find me music events in Mumbai"
Algolia processes: Extracts category: Music, city: Mumbai
Smart search: Filters and ranks relevant events
Beautiful display: Shows results in an engaging chat interface

🎯 The Impact

Building EventMatch taught me so much about:

Conversational UI/UX: How to make chat interfaces feel natural
Search optimization: Queryable attributes, faceting, and ranking
Modern React patterns: Streaming, suspense, and server components

But more importantly, it solves a real problem. Finding events shouldn't feel like homework. It should be fun, and now it is! 🎪

🚀 What's Next?

I'm planning to add:

[ ] Voice input for truly hands-free discovery
[ ] Personalized recommendations based on history
[ ] Social features to see what friends are attending
[ ] Calendar integration

🙏 Thanks for Reading!

If you made it this far, you're awesome! ⭐

Check out the live demo, play around with it, and let me know what you think. I'd love to hear your feedback!

eventmatch-iota.vercel.app

Built with 💜 for the Algolia Agent Studio Challenge

P.S. - Try typing "surprise me" in the chat. You won't regret it! 😉

StudyStream: Your AI Learning Companion That Actually Gets You!

Ha3k — Mon, 09 Feb 2026 06:52:26 +0000

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

Hello, Lifelong Learners! 🌟

Let me tell you a story. Last month, I was trying to learn TypeScript (ironic, right?). I had 47 browser tabs open, three different courses bookmarked, and absolutely NO idea where I left off. Sound familiar?

That frustration led me to build StudyStream - a learning companion that actually remembers where you are in your journey! 🚀

studystream-ten.vercel.app

💡 So What's StudyStream All About?

Think of it as your personal study buddy who:

📝 Knows exactly what you're learning
🎯 Suggests what to study next
🏆 Celebrates your wins (with actual confetti!)
📊 Tracks your progress so you don't have to

It's NOT another boring e-learning platform. It's designed to make studying feel like a game you actually want to play!

aniruddhaadak80 / studystream

Tired of boring study apps? Meet StudyStream - an AI-powered learning assistant with progress tracking, quizzes & achievements. Built with Next.js, Algolia & lots of confetti 🎉

📚 StudyStream - AI-Powered Learning Assistant

Master programming with AI-powered proactive learning! StudyStream is a non-conversational AI assistant that proactively suggests what to learn next based on your progress and context.

✨ Features

🧠 Proactive AI Learning

Context-Aware Suggestions - AI recommends topics based on what you're studying
Smart Quiz Selection - Questions matched to your current skill level
Adaptive Difficulty - Content adjusts to your performance

🎮 Gamification

Progress Tracking - Track completion across all topics
Achievement Badges - Unlock badges for milestones
Streak Counter - Build daily learning habits
XP System - Earn points for completing quizzes

📖 Rich Content

10 Study Topics across JavaScript, Python, React, TypeScript, CSS
30+ Practice Questions with explanations
Code Examples with syntax highlighting
Key Terms for each section

🎨 Beautiful UI

Focus Mode Design - Distraction-free learning environment
Dark Theme - Easy on the eyes for long study sessions
Smooth Animations -…

View on GitHub

✨ Features That'll Make You Go "Ooh!"

🔍 Smart Search That Reads Your Mind

Type "JavaScript closures" or "how to center a div" (we've all been there 😂) and get instant, relevant content.

📈 Progress Tracking

Visual progress bars, streaks, and statistics. Because seeing how far you've come is incredibly motivating!

🎮 Gamification Done Right

XP System: Earn points for completing topics
Streak Counter: Keep that fire burning! 🔥
Achievement Badges: Collect 'em all
Confetti Explosions: Because you deserve to celebrate!

💭 AI-Powered Suggestions

Based on what you're learning, StudyStream suggests related topics. Learning React? Here's some TypeScript to go with that!

📝 Interactive Quizzes

Test your knowledge with practice questions. Immediate feedback helps you learn faster!

🌙 Gorgeous Dark Mode

Easy on the eyes during those late-night study sessions.

🛠️ Under the Hood (Tech Stack)

Here's what's powering this learning machine:

Technology	Purpose
Next.js 16	The backbone - SSR, app router, everything!
TypeScript	Type safety = fewer bugs = happy developer
Algolia	Blazing-fast search across all content
Framer Motion	Those satisfying animations
Tailwind CSS	Styling at the speed of thought

The Algolia Integration 🔮

This is where the non-conversational AI magic happens. Algolia handles:

import { algoliasearch } from 'algoliasearch';

// Search across topics and questions
export async function searchTopics(query: string, filters?: SearchFilters) {
  const results = await searchClient.searchSingleIndex({
    indexName: 'study_topics',
    searchParams: {
      query,
      filters: filterString,
      hitsPerPage: 20,
    }
  });

  return results.hits as StudyTopicRecord[];
}

Why Non-Conversational AI? 🤔

Unlike chatbots, StudyStream uses AI in the background. It's:

Analyzing content to suggest related topics
Predicting difficulty based on your progress
Optimizing search to surface the most relevant content

You don't see it, but it's always working for you!

📚 What Can You Learn?

Currently featuring topics in:

JavaScript - From basics to async/await
Python - Data structures, algorithms, and more
React - Components, hooks, and best practices
TypeScript - Types, interfaces, generics
CSS - Flexbox, Grid, and modern layouts

And I'm constantly adding more!

🎯 The Learning Experience

Here's how a typical session looks:

Pick a topic that interests you
Read through the beautifully formatted content
Take a quiz to test understanding
Earn XP and watch your progress grow
Get suggestions for what to learn next
Repeat and keep that streak alive! 🔥

🚀 Impact & Learnings

Building StudyStream was itself a learning experience! I discovered:

Gamification psychology: Small rewards create big motivation
Content structure: How to organize information for learning
Algolia's power: Not just for e-commerce - perfect for educational content!
Progressive enhancement: Works without JavaScript, amazing with it

🔮 Future Plans

This is just the beginning! Coming soon:

[ ] More programming languages (Rust, Go, etc.)
[ ] Spaced repetition algorithm
[ ] Social features - study with friends!
[ ] Mobile app version
[ ] AI-generated practice problems

🎉 Try It Yourself!

I'd love for you to take StudyStream for a spin! Pick a topic, complete a quiz, and let me know how it feels.

studystream-ten.vercel.app

Your feedback means the world to me! ⭐

Built with 💜 for the Algolia Agent Studio Challenge

*P.S. - Complete 5 quizzes correctly and you'll unlock a special achievement. What is it?

You'll have to find out! 🏆*

AppWeaver AI

Ha3k — Sun, 14 Sep 2025 17:00:00 +0000

This is a submission for the Google AI Studio Multimodal Challenge

What I Built

I built AppWeaver AI.

It’s a web application designed to bridge the gap between imagination and tangible design.

Have you ever had a brilliant idea for a mobile app but got stuck trying to visualize it? AppWeaver AI solves that exact problem.

It empowers anyone—from seasoned developers to aspiring entrepreneurs—to generate stunning, high-fidelity mobile app mockups simply by describing their vision in plain text.

No Figma, no Sketch, no complex design tools. Just your words.

The app doesn't just create a single screen; it generates an entire user flow, from onboarding to the profile page, giving you a holistic view of your concept. It’s not just a tool; it's your personal AI design partner, ready to iterate and refine with you.

Demo:

HERE 💖

Here’s a quick walkthrough of how AppWeaver AI brings an idea to life.

The Spark of an Idea: A user starts by typing a prompt, like "a minimalist language learning app with a clean, Duo-lingo inspired aesthetic." They can also choose how many initial screens they want, from 3 to 10.

AI-Powered Weaving: The app then generates a series of high-resolution (9:16) app screens, complete with brief descriptions for each one. The designs appear in a sleek, scrollable gallery.

Iterate and Refine: This is where the magic happens. The user can click "Edit" on any design. A modal pops up, allowing them to type in changes. For example: "Change the primary button color to electric blue and add an illustration of a book."

The Final Polish: The AI processes the image and the text prompt, returning a newly edited design. The user can download their creations at any point, ready for presentations, pitch decks, or developer handoffs.

How I Used Google AI Studio

Google AI Studio was the engine behind this entire project. I leveraged the @google/genai SDK to orchestrate a sophisticated, multi-step AI workflow.

gemini-2.5-flash for Structured Data Generation: The first step isn't generating an image directly. I use gemini-2.5-flash to interpret the user's simple prompt and expand it into a structured JSON array. Each object in the array contains a thoughtful description for a specific app screen and a highly detailed imagePrompt tailored for an image model. This ensures a logical user flow and creative, diverse visuals.
imagen-4.0-generate-001 for Initial Design Creation: The detailed prompts generated by Flash are then fed into imagen-4.0-generate-001. This model's power in creating high-quality, coherent images is perfect for producing the initial set of app designs with a consistent 9:16 aspect ratio.
gemini-2.5-flash-image-preview (Nano Banana) for Editing: The interactive editing feature is powered by the groundbreaking Nano Banana model. It takes the existing design (image) and the user's edit request (text) as inputs to generate a new, modified design. This is the core of the app's multimodal power.

Multimodal Features

AppWeaver AI is built on a foundation of two key multimodal interactions that create a seamless and powerful user experience.

Text-to-Image Generation (The Concept Phase): This is the initial creative spark. The user provides a text prompt, and the application returns a series of images. This classic multimodal capability allows for the rapid visualization of an abstract idea, turning words into concrete designs instantly.
Image + Text -> Image + Text (The Iteration Phase): This is where AppWeaver AI truly shines and becomes a collaborative tool. A user selects an image they want to change and provides a new text prompt describing the modification.
- The model, gemini-2.5-flash-image-preview, understands the context of the existing image and the instructions in the new text.
- It then outputs a new, edited image that reflects the requested changes.
- It often provides a new text description as well, confirming the changes it made.

This iterative loop is incredibly powerful. It transforms the user from a passive prompter into an active director of the design process, allowing for nuanced control and refinement that wouldn't be possible with simple text-to-image generation alone.

It’s a true conversation between the user and the AI, using both language and visuals.

Architexture AI

Ha3k — Sat, 13 Sep 2025 13:21:00 +0000

This is a submission for the Google AI Studio Multimodal Challenge

What I Built

Have you ever sketched a dream house on a napkin?
Or imagined a futuristic skyscraper that could reshape a city's skyline?

Bringing those ideas to life is often a monumental task.
It requires specialized software, technical skills, and a whole lot of time.

That's why I built Architexture AI.

It’s not just a tool; it's a creative partner for architects, designers, and dreamers. It closes the gap between your imagination and a stunning, visual reality.

The core experience is built around a simple, powerful, three-step loop:

Describe: You start with a simple text prompt. Pour your vision into words.
Generate: Instantly, Imagen 4 generates four distinct, high-quality architectural concepts based on your idea. No more blank canvas anxiety!
Refine: This is where the magic happens. Pick a design you like and start a conversation with it. Using the power of Gemini, you can ask for changes with simple text commands, iterating until it’s perfect.

Architexture AI makes architectural design fast, intuitive, and incredibly fun.

Demo:

live demo here, pls visit

Let's take a quick walk through the creative journey with Architexture AI.

1. The Spark of an Idea

Everything starts on our clean, focused welcome screen. You're presented with a simple text area, ready for your vision. We even provide a few examples to get your creative gears turning.

Let's try a prompt: "A modern eco-friendly villa with a green roof and an infinity pool overlooking a tropical beach."

2. AI-Powered Brainstorming

Once you hit "Generate," Imagen 4 gets to work. In moments, you're not just looking at one interpretation of your idea, but four unique, photorealistic concepts from different angles. This gives you a rich set of starting points to choose from.

3. The Creative Conversation

You've found a design that's close, but not quite it. Time to refine! Selecting an image takes you to the Editor. Here, you can simply tell the AI what you want to change.

Let's ask for an edit: "Change the time of day to a beautiful sunset."

4. Vision, Realized

With the power of Gemini's multimodal understanding, the AI doesn't just know what a sunset is; it understands how to apply that concept to your specific image. It considers the lighting, shadows, and reflections to deliver a breathtaking, context-aware result.

And just like that, an idea becomes a fully-realized vision, ready to be downloaded and shared.

How I Used Google AI Studio

Architexture AI is powered by a dynamic duo of Google's state-of-the-art models, orchestrated to create a seamless workflow.

1. Concept Generation with `Imagen 4`

For the initial generation phase, I chose Imagen 4. Its ability to produce high-quality, photorealistic, and creatively diverse images from a single text prompt is second to none.

I specifically prompt it to generate 4 different high-quality, photorealistic architectural visualizations... from multiple angles. This ensures the user receives a varied and inspiring set of initial concepts, which is crucial for the creative process. The API call is a straightforward use of ai.models.generateImages.

2. Iterative Editing with `Gemini 2.5 Flash Image Preview`

This is the heart of the multimodal experience. To power the editor, I used Gemini 2.5 Flash Image Preview (affectionately known as Nano Banana).

Its incredible strength lies in its ability to take both an image and a text prompt as input. The API call to ai.models.generateContent is structured with two parts:

An inlineData part containing the base64-encoded original image.
A text part containing the user's edit instruction (e.g., "add a swimming pool").

Gemini then generates a new image that incorporates the textual request while maintaining the context and style of the original image. This is what makes the iterative, conversational design process possible.

Multimodal Features

The true magic of Architexture AI lies in its multimodal capabilities, which fundamentally enhance the user experience.

Conversational Design: The core feature is Image + Text → Image editing. This transforms the design process from a series of complex commands into a simple, natural conversation. Instead of fiddling with sliders and tools, you just ask for what you want. It feels like you're art-directing a creative assistant, not operating a piece of software.
Context-Aware Creativity: By providing an image as context, the AI's response is grounded and relevant. When you ask to "add more windows," it understands the building's existing style, materials, and lighting, ensuring the edit feels seamless and natural. This is a massive leap beyond purely text-based image generation.
Rapid, Risk-Free Iteration: Multimodality empowers users to experiment freely. Don't like the change? Just go back and try a different prompt. This frictionless workflow encourages creativity and allows for the rapid exploration of countless design variations without starting from scratch each time.

Ultimately, by combining visual input with textual instruction, Architexture AI creates an intuitive, powerful, and deeply engaging creative experience that makes the world of architectural design accessible to everyone.

AI 3D Asset Generator

Ha3k — Thu, 11 Sep 2025 11:00:00 +0000

This is a submission for the Google AI Studio Multimodal Challenge

What I Built

I built PixelForge 3D, a creative partner for game developers and 3D artists.

Imagine you're designing a new game. You need a legendary sword.
Instead of spending hours sketching or modeling basic concepts, you just type...

"A mythical sword glowing with arcane energy."

In moments, PixelForge 3D doesn't just give you one image.
It gives you ten unique, high-quality concepts.

Each one is from a different angle, with a different artistic description, ready for your game.
A front view, a top-down view, a close-up on the glowing runes... you name it.

But it doesn't stop there. See a design you almost love?
Just click "Edit" and type, "Make the glow electric blue and add cracks to the blade."

PixelForge 3D seamlessly edits the asset for you.

It's designed to solve a real problem: breaking through creative blocks and accelerating the asset conceptualization process from hours to minutes.

Demo

Here is a link to the live applet:
Link to Deployed Applet Would Go Here

And here’s a glimpse into the creative workflow.

First, you describe your vision.
Simple text is all you need. We even provide suggestions to get you started!

Next, the AI forges ten unique concepts for you.
You get a whole grid of ideas, complete with varied angles and detailed descriptions.

Finally, you refine and perfect your asset.
A simple modal lets you use text to make powerful edits to any image you choose.

How I Used Google AI Studio

Google AI Studio was my command center for bringing this app to life. The core idea was to create a pipeline of multimodal capabilities.

Orchestrating Concepts with gemini-2.5-flash: I used AI Studio to perfect a prompt that asks Gemini Flash to act as a creative director. I instructed it to take a user's prompt and generate a structured JSON object containing ten unique angle and description pairs. This was the blueprint for our asset generation.
Forging Assets with imagen-4.0-generate-001: With the JSON blueprint, I then programmatically create ten new, more detailed prompts for Imagen 4. Each prompt combines the user's original idea with the unique angle and description from Gemini Flash. This is how we get such rich variety in the output.
Refining with gemini-2.5-flash-image-preview (Nano Banana): For the editing feature, I leveraged the powerful image-and-text understanding of Nano Banana. I prototyped in AI Studio how the model would interpret an input image alongside a text instruction to generate a new, modified image. This confirmed the intuitive "select and describe" editing flow was possible.

Multimodal Features

PixelForge 3D is built on two core multimodal experiences that work in harmony.

1. The Text-to-Concept-Array-to-Image-Gallery Flow

This is the heart of the initial generation.
It's more than just text-to-image. It's a multi-step creative process.

Input: User provides a single text prompt.
Processing:
- gemini-2.5-flash interprets the text and outputs structured data (JSON)—a list of 10 creative concepts.
- The application then uses this data to generate 10 distinct images with imagen-4.0-generate-001.
Output: A full gallery of 10 images.

Why it's better: This provides immense creative leverage. It transforms one simple idea into a board of possibilities, helping users discover designs they might not have thought of on their own. It automates brainstorming.

2. The Image-and-Text-to-Image Editing Loop

This is what makes the app truly interactive and powerful.

Input: User provides an image (by clicking "Edit") and text (by typing their changes).
Processing: gemini-2.5-flash-image-preview takes both the existing visual data and the new text instructions into account.
Output: A new image that reflects the requested changes.

Why it's better: This creates an intuitive, iterative design cycle. Instead of starting over with a new prompt, users can collaborate with the AI, refining the generated assets with natural language. It makes the creative process feel less like a command and more like a conversation.

AI Thumbnail Studio

Ha3k — Wed, 10 Sep 2025 15:19:00 +0000

This is a submission for the Google AI Studio Multimodal Challenge

What I Built

Ever stared at a blank canvas, trying to design the perfect YouTube thumbnail?

That single image has to grab attention, convey your video's topic, and look professional—all in a split second. For many creators, this is a huge bottleneck.

That's why I built the AI Thumbnail Studio.

It’s your personal AI design assistant, crafted to turn a simple idea into a stunning, clickable thumbnail in just a few minutes.

Here's how this creative partnership works:

Spark an Idea: You start with a simple text prompt describing your video. What's it about? What's the vibe?
Get Inspired: The app uses Google's powerful Imagen 4.0 model to generate four unique, high-quality design concepts, giving you a fantastic starting point.
Refine with Conversation: Pick your favorite design, and this is where the real magic happens. Using Gemini 2.5 Flash Image Preview, you can now talk to your thumbnail. Simply type what you want to change— "make the text bigger," "add a sparkle emoji," or "change the background to a night sky."
Perfect Every Detail: With advanced controls like an Edit Intensity slider and unlimited Undo/Redo, you have the power to fine-tune every edit until it's perfect.

My goal was to build more than just a tool; I wanted to create an experience that makes professional design fast, intuitive, and genuinely fun for everyone, regardless of their design skills.

Demo

You can try a live version of the applet here: Live Applet Link Here

Here’s a quick visual tour of the journey from prompt to polished thumbnail.

1. Initial Screen & Idea Generation
The app greets you with beautiful, AI-generated samples and a simple prompt to kickstart your creativity.

How I Used Google AI Studio

Google AI Studio and its powerful models are not just a feature of this app—they are the entire engine.

I leveraged a two-stage process using distinct, state-of-the-art models to create a seamless workflow from concept to completion:

1. For Initial Ideation: `imagen-4.0-generate-001`

To kick off the creative process, I turned to Imagen. Its ability to interpret a text prompt and generate rich, high-quality, and stylistically diverse images is simply incredible.

Why Imagen? It's perfect for the "blue sky" phase. I configured it to generate four 16:9 images from a single prompt, giving the user a variety of creative directions to choose from without overwhelming them. It acts as a tireless brainstorming partner.

2. For Multimodal Editing: `gemini-2.5-flash-image-preview`

This is where the app's unique power comes from. Once a user selects a base image, this multimodal model takes over.

Why Gemini 2.5 Flash Image Preview? It understands context from both text and images simultaneously. When a user types "add a hat on the cat," the model sees the cat in the image and understands the instruction. This conversational approach to editing is revolutionary. I specifically configured it to expect and return an image (responseModalities: [Modality.IMAGE, Modality.TEXT]), creating the core edit loop.

By combining these two models, the AI Thumbnail Studio guides the user from a blank slate to a finished product in a way that feels both magical and intuitive.

Multimodal Features

The core of this project is its conversational, iterative design loop, a powerful multimodal feature that transforms how we think about graphic design.

The Magic is in the Conversation

Instead of learning complex tools, sliders, and layers in traditional software, you just... ask.

You SEE your thumbnail.
You TYPE a change in natural language (e.g., "make the background more dramatic").
You SEE the result almost instantly.

This tight feedback loop between visual input and textual commands is the primary multimodal experience. It lowers the barrier to entry so dramatically that anyone can become a designer.

Translating UI into AI Instructions

I pushed the multimodal capabilities even further with the "Edit Intensity" slider.

This isn't just a simple UI element. The value from this slider (e.g., 75%) is dynamically injected into the text prompt sent to the Gemini model. The prompt becomes:

"Edit this... The desired intensity of this edit is 75%. If adding an element, make it 75% opaque."

This is a true fusion of modalities: a classic graphical user interface (the slider) directly informs and nuances the natural language instructions for the AI. It gives users fine-grained control over the AI's creative process in a way that's simple to understand and use.

This deep integration of visual context, natural language, and UI controls is what makes the AI Thumbnail Studio an exciting and powerful creative partner.

Thanks for checking out my project!

Artisan Social

Ha3k — Mon, 08 Sep 2025 16:22:00 +0000

This is a submission for the Google AI Studio Multimodal Challenge

What I Built

I built Artisan Social, your personal AI design partner for brainstorming social media applications!

Ever had a brilliant idea for a new app but struggled to visualize it? Artisan Social is here to help. It's a creative studio that bridges the gap between a simple text idea and stunning, tangible design concepts.

Here's the magic:

You start with a spark—a simple idea, like "a social network for urban gardeners."
Our AI, powered by Gemini, brainstorms ten unique design angles for you.
Then, it brings each concept to life by generating a high-quality visual representation.
Finally, you can dive in and iteratively edit any design using simple text commands, truly making it your own.

Artisan Social is designed to crush creative blocks and accelerate the journey from imagination to visualization.

Demo

You can find a live demo of the applet here:
Link to Deployed Applet

Here’s a quick walkthrough of the experience:

Step 1: The Spark of an Idea
A user enters their social app concept into a clean, inviting interface.

Step 2: AI-Powered Ideation
In moments, the app displays a gallery of ten distinct visual concepts generated by the AI, each with a unique name and description.

Step 3: The Multimodal Editor
The user selects a design and enters the editor. By providing a text prompt like "change the color scheme to dark mode with neon green accents," they can instantly see their vision come to life in a new, edited image.

How I Used Google AI Studio

Google AI Studio and the Gemini models are the heart and soul of Artisan Social. I used the @google/genai SDK to orchestrate a trio of powerful models, each playing a specialized role.

gemini-2.5-flash for Structured Brainstorming:
I used this model for the initial ideation phase. The goal wasn't just to get text, but to get structured data. By defining a responseSchema, I instructed Gemini to return a clean JSON array of design ideas, each with a name, description, and a visual_prompt. This makes the output reliable and easy to parse, avoiding messy string manipulation.
imagen-4.0-generate-001 for Visual Creation:
This is the artist. It takes the detailed visual_prompt generated by gemini-2.5-flash and transforms it into a beautiful, high-resolution concept image. The results are vibrant, professional, and truly capture the essence of the idea.
gemini-2.5-flash-image-preview for Multimodal Magic:
This is where the true collaboration happens. This model's ability to understand both an image and a text prompt simultaneously is the core of the editing feature. It's not just applying a filter; it's comprehending a visual context and a linguistic instruction to create something entirely new.

Multimodal Features

The star of the show is the AI Design Editor, a powerful multimodal tool that makes visual editing feel like a conversation.

This feature accepts two different types of input—or modalities—at once:

An Image: The existing design concept the user wants to tweak.
Text: A natural language command describing the desired change.

The result is a seamless, iterative workflow. Instead of having to write a brand new, complex prompt to make a small change, the user can simply refine what's already there.

It's the difference between hiring a new artist for every revision versus collaborating with one who remembers your last conversation.

This fundamentally enhances the user experience by making the creative process:

Faster: Small tweaks take seconds, not minutes.
More Intuitive: Users can express changes naturally, without needing to learn complex "prompt engineering" jargon.
More Creative: It encourages experimentation. When the cost of trying a new idea is just typing a sentence, users are more likely to explore wild and wonderful variations.

By combining image and text understanding, Artisan Social transforms a simple image generator into a dynamic and interactive design partner.

Now it's time to design the book cover

Ha3k — Sun, 07 Sep 2025 19:30:39 +0000

This is a submission for the Google AI Studio Multimodal Challenge

What I Built

I built CoverCanvas AI, a creative partner for authors, marketers, and designers.

At its heart, it's a tool designed to shatter creative blocks and streamline the book cover design process.

Imagine having a world-class designer on call, ready to instantly visualize your ideas. That's CoverCanvas AI.

It solves a common and frustrating problem: how do you create a stunning, professional book cover that captures the soul of your story without spending a fortune or waiting for weeks?

My applet empowers users to:

Generate multiple high-resolution (9:16) book cover concepts from a simple text prompt.
Iterate and refine designs through intuitive, text-based editing.
Experiment with artistic styles using one-click image filters.

It’s more than just an image generator; it’s an idea accelerator, turning fragments of imagination into tangible, beautiful art.

Demo

Deployed Applet: Link to your deployed CoverCanvas AI applet here!

Here’s a quick look at the creative workflow in action:

1. Crafting the Initial Vision
A user enters a prompt, selects the number of designs, and unleashes the AI.

2. The AI's First Drafts
In moments, CoverCanvas AI generates multiple unique designs, each with a "Style Analysis" generated by Gemini.

3. Iterative Editing - The Magic of Multimodality
The user decides to edit a cover, asking the AI to "add a mysterious figure in a cloak." Nano Banana understands the image and the text, and seamlessly blends the new element in.

4. Final Touches with Filters
To perfect the mood, the user applies a 'Noir' filter, instantly transforming the cover's atmosphere.

How I Used Google AI Studio

Google AI Studio was the creative engine behind this entire project. I orchestrated a symphony of different models, each playing a crucial role.

Imagen 4 (imagen-4.0-generate-001): This model is the initial artist. I used it for its incredible ability to generate high-quality, detailed images from text prompts. The key was locking the aspectRatio to '9:16' to ensure every output was perfectly formatted for a book cover.
Gemini 2.5 Flash (gemini-2.5-flash): To add a touch of professional critique, I used Gemini Flash to generate the "Style Analysis" for each cover. It takes the original prompt and provides a concise description of the artistic style, mood, and composition, giving users a deeper understanding of their creation. I used a thinkingBudget: 0 to make this analysis nearly instantaneous.
Gemini 2.5 Flash Image Preview (gemini-2.5-flash-image-preview): This is the star of the show, also known as Nano Banana. It powers the revolutionary editing feature. I send it the current cover image and the user's text-based edit instruction. Its ability to process both modalities at once is what makes the editing process feel so magical and intuitive.

Multimodal Features

The true power of CoverCanvas AI lies in its deep integration of multimodal capabilities. It’s not just using one feature; it's about how they work together to create a seamless, conversational design experience.

The core multimodal workflow is the edit feature.

This is where the magic happens. A user isn't just generating a new image from a longer prompt; they are having a conversation about an existing image.

Input: The model receives a visual (the current cover) and textual (the edit prompt, e.g., "make the sky stormy") input.
Output: The model understands the context and provides two outputs: a new visual (the edited cover) and new text (an updated style description).

This Image + Text -> Image + Text pipeline is what elevates the app from a simple generator to a true creative collaborator. It allows for a natural, iterative process. You can generate a base design with Imagen 4, and then refine it piece by piece with Nano Banana, just like you would with a human designer.

It's this interactive loop that truly enhances the user experience, making complex image editing as simple as typing a sentence.

Anatomy Illustrator AI

Ha3k — Sun, 07 Sep 2025 10:41:12 +0000

This is a submission for the Google AI Studio Multimodal Challenge

What I Built

I built Anatomy Illustrator AI 🎨, a web app designed to take the headache out of creating educational diagrams.

Have you ever needed a specific anatomical illustration for a presentation or study guide, only to find nothing that quite fits?
You might find a diagram of the heart, but it's missing the labels you need. Or you find one with the right labels, but the style is all wrong.

Anatomy Illustrator AI solves this problem.

It's a simple, two-step tool for anyone—students, teachers, and medical creators—to generate beautiful, custom-labeled anatomical diagrams on the fly.

Step 1: You describe the structure you want to see.
Step 2: You list the labels you want to add.

The AI handles the rest, giving you a clean, accurate, and ready-to-use illustration in seconds. It's like having a professional medical illustrator at your fingertips. 🧠✨

Demo

Here's a look at the applet in action!

You can see the app here

1. The User Interface

The app starts with a clean and focused interface. You have two main inputs: one for describing the anatomical structure and another for listing the labels.

2. Image Generation & Selection

After you submit your prompt, the app uses Imagen 4 to generate two high-quality illustrations. This gives you creative control to pick the one that best matches your vision.

3. AI-Powered Labeling

Once you select an image, Gemini gets to work. It analyzes the image and your text list to add clear, accurate labels with leader lines. The final result is a polished, professional diagram.

How I Used Google AI Studio

Google AI Studio was my sandbox for bringing this idea to life. I used it extensively to test and refine the prompts that power the entire experience.

My application relies on a powerful, two-stage multimodal pipeline:

Image Generation: I use the imagen-4.0-generate-001 model for the initial creation step. I experimented in AI Studio to craft a prompt that consistently produces clean, textbook-quality illustrations with neutral backgrounds, perfect for labeling.
Image Editing & Labeling: This is where the magic happens. I leverage the gemini-2.5-flash-image-preview model. My prompt instructs the model to take an input image and a text string of labels and intelligently add them to the illustration. AI Studio was essential for figuring out how to ask the model to create professional-looking leader lines and legible text.

This project is a perfect example of chaining different AI models together to create a cohesive and powerful user workflow.

Multimodal Features

The core of Anatomy Illustrator AI is its deep integration of multimodal features. It's not just using text or images; it's using them together to create something new.

Text-to-Image Creation
The journey starts by translating a user's written concept (e.g., "A cross-section of the human eye") into a rich visual. This empowers users to create the exact base image they need without any artistic skill.
Image-and-Text Editing
This is the most critical multimodal feature. The app sends both an image (the user's selected illustration) and text (the comma-separated labels) to Gemini in a single request.

Why is this so powerful?

It enhances the user experience by abstracting away a complex task. Instead of needing a photo editor and a steady hand, the user just provides a list.

The AI understands the visual context of the image and the semantic meaning of the labels, placing them accurately.

This creates a seamless, intuitive, and incredibly useful tool for education and content creation.