🤯 CRÉER UNE APP GRATUITEMENT AVEC L'IA DE GOOGLE (Tutoriel Google AI Studio)

Overview

Google AI Studio is a free (with a Google account) web tool that generates full websites and small web apps by prompting an AI to produce code and UI — sometimes described as “vibe coding” or code generation from text prompts. It uses Google models (example: GML 3 Pro) optimized for design and UI generation and can integrate Google image/vision models for creative features.

Generates front-end (and some back-end) code and a live UI from natural-language specifications; includes multimodal features (voice, image, video) and a combined chat + preview + editable code interface.

Key product features

• Unified interface: chat on the left, live site preview on the right, and generated code visible and editable.
• Code generation: produces front-end and some back-end code from detailed specs; first-generation can take longer, subsequent iterations are faster.
• Multimodal integration: voice, image and video models can be embedded in apps (for example, image templates that place people in costumes).
• Geolocation and interactive inputs: apps can request location, accept user inputs, and run searches.
• Export & deployment: save projects to Google Drive, download source code, or let Google deploy/host the app with a shareable link.
• Iteration via chat: request design or functional changes in natural language (change colors, replace features, switch avatars/photos).
• Integrations / production workflow: recommended to move to an IDE (Cloud Code) or other developer tooling for production-ready work.

Recommended workflow / tutorial steps

1. Define the idea and scope first — prepare a detailed specification document before running Studio to avoid wasted iterations.
2. Use an LLM to prepare specs: have a model (ChatGPT, Gemini, Claude) simulate a small web-agency team (roles like project manager + designers/developers) to ask clarifying questions and produce a full spec.
3. Paste the finalized spec into Google AI Studio and generate the app.
4. Review the live preview and iterate through chat to refine UI/UX and features.
5. If needed, export the code and finish/connect with cloud back-end or developer tooling for complex integrations.

Examples shown in the demo

• Champi Spot: mushroom-spot finder that uses geolocation.
• Cheese-to-wine pairing app: enter a cheese and receive wine suggestions with pricing info.
• Meeting transcription tool: real-time transcription with formatting.
• Christmas gift budget planner: planner with gift idea generator, price search, and avatars for loved ones.
• Slide translator/formatter: imports slides, translates text, and reapplies original formatting.

Advantages highlighted

• Fast prototyping of internal or small apps without full dev resources.
• Strong design/UI generation (GML 3 Pro noted for this).
• Easy to integrate generative multimedia (images, voice, video) into apps.
• Simple export and deploy flow; suitable for personal or non-sensitive internal tools.

Limitations and cautions

• Not ideal for sensitive data or large-scale business systems without developer oversight — security and compliance remain concerns.
• Stronger at design/UI than at complex advanced functionality; complex back-end, CRM, or enterprise integrations still require developers and cloud tooling.
• Initial generation can be slow; preparing specs reduces iterations.
• Some demos/features may not work perfectly (presenter showed a price-search glitch).
• Auto-generated subtitles or transcriptions in demos may include inaccuracies (model names like “Nano Banana” may be transcription errors).

Model / tool comparisons and notes

• GML 3 Pro: praised for design and website generation.
• Claude: recommended by the presenter for software development prompts and spec generation.
• Any LLM (ChatGPT, Gemini, Claude) can be used to craft the spec prompt before feeding it into Studio.
• Cloud Code / IDE: suggested as the next step for production hardening.

Takeaways — steps to reproduce

• Draft a comprehensive spec (using a multi-role prompt approach if helpful).
• Paste the spec into Google AI Studio and generate the app.
• Iterate using natural-language requests to refine UI and functionality.
• Export, download code, or deploy via Google hosting as needed.

Main speaker and referenced tools

• Presenter: Yori.
• Simulated/spec-generation personas used in the demo: “Marc” (project manager), “Sarah” and “Léo” (designers/developers).
• Tools/models referenced: Google AI Studio, GML 3 Pro, Google image models (transcribed name uncertain), Claude, ChatGPT/GPT/Gemini, Cloud Code, Google Drive/hosting.