Meet ArchiSprk, your personal Architect

This is a submission for the Google AI Studio Multimodal Challenge

What I Built

Ever stared at a blank whiteboard, overwhelmed by the challenge of designing a new application?

That initial spark of an idea is exciting, but translating it into a robust, scalable system architecture can be daunting. It’s a process filled with complex decisions, diagrams, and trade-offs.

My applet, ArchiSpark, is an AI-powered co-pilot designed to solve this very problem. It’s a creative partner for seasoned system architects, a guiding hand for developers, and an invaluable learning tool for students.

Here’s the core idea:

1. You provide a simple, high-level prompt, like "A video streaming service with AI-powered recommendations."
2. ArchiSpark’s AI engine brainstorms on your behalf, generating ten distinct and creative system architecture proposals in a matter of moments.
3. Each proposal comes with a professional diagram and a concise description of its approach, strengths, and ideal use case.

But it doesn't stop there. The true magic lies in iteration. With a single click, you can select any design and start refining it using the power of Nano Banana, editing the diagrams and descriptions with simple text commands.

My vision for ArchiSpark was to democratize system design, making it faster, more collaborative, and infinitely more creative.

Demo

Let's take a spin with ArchiSpark!

Link to Deployed Applet

The journey begins on our vibrant, futuristic homepage. You're greeted with a simple prompt box, helpful suggestions, and a gallery of sample architectures to get your creative juices flowing.

Once you type your prompt and hit 'Generate Designs', the AI gets to work. A sleek loader keeps you updated on its progress as it brainstorms concepts and then meticulously draws each diagram.

And voilà! A beautiful, responsive grid of ten unique architectures appears, each ready for inspection. You can explore a variety of approaches, from Microservices to Serverless to Event-Driven designs.

But what if a design is almost perfect?
You like the microservices approach, but you want to add a caching layer.

That's where the real magic happens. You click 'Edit with Nano Banana'.

You simply type your change: "Add a Redis caching layer between the API Gateway and the product service." The AI analyzes your original image and your text command to produce a revised architecture.

With ArchiSpark, you're not just a prompter; you're a director in a conversation with an AI architect.

How I Used Google AI Studio

Google AI Studio wasn't just a tool; it was the entire creative and logical engine behind ArchiSpark. The seamless integration of multiple powerful models is what makes this applet possible.

I orchestrated a multi-step workflow using three distinct models:

• The Brains: gemini-2.5-flash
  I used this model for the initial, heavy-lifting brainstorming. Its speed and intelligence are perfect for taking a simple user prompt and expanding it into ten detailed concepts. The killer feature here was the structured output capability. By defining a responseSchema, I could reliably get a clean JSON array of {title, description, imagePrompt} objects, which was crucial for automating the next step.

• The Artist: imagen-4.0-generate-001
  Once I had the text concepts, I needed professional diagrams. imagen-4.0-generate-001 was the perfect choice. I fed it the detailed imagePrompt generated by Gemini, and it produced the clear, high-quality architecture diagrams that form the visual core of the app.

• The Collaborative Editor: gemini-2.5-flash-image-preview (Nano Banana)
  This is the star of the show. For the interactive editing feature, I leveraged Nano Banana's incredible multimodal capabilities. It takes the current design image and the user's text instruction as combined input to generate a completely new, edited image and a revised text description as output. This creates the iterative design loop that makes ArchiSpark so powerful.

Multimodal Features

The heart of ArchiSpark's innovation lies in its truly multimodal editing experience, powered by Nano Banana. This goes far beyond simple image generation; it creates an interactive and intuitive design conversation.

Why it enhances the user experience:

• It Creates an Interactive Design Loop: System design is never a one-shot process. It's about refinement and iteration. Instead of forcing the user to start over with a new prompt, the "Edit with Nano Banana" feature allows for a natural, conversational workflow. See something you want to change? Just say it.

• It Understands Visual and Textual Context: This is where the multimodality shines. The AI isn't just generating a new image based on text; it's understanding the existing image and modifying it based on the text. This contextual awareness is key to making relevant, accurate edits.

• It's a True Multimodal Input/Output System:

  • Input: The model receives an existing image (inlineData) and a new text prompt (text).
  • Output: The model returns a brand new, revised image (inlineData) and an updated text description (text) that reflects the changes.

This transforms a static generation process into a dynamic, collaborative design session. It’s the difference between looking at a photograph and working together on a live whiteboard. This multimodal capability is what makes ArchiSpark feel less like a tool and more like a creative partner.