Google AI Studio: bygg en prototyp med live-förhandsvisning – AI Skolan

Uppgifterna är kontrollerade mot officiell dokumentation 23 oktober 2026. Tjänster ändras ofta, så jämför alltid med det du ser på skärmen.

Kort om tjänsten

Google AI Studio är Googles arbetsmiljö för att prova och bygga med Gemini-modellerna. Build mode är en funktion i AI Studio: du beskriver en app i en prompt, AI Studio genererar filerna och visar en live-förhandsvisning bredvid chatten.

Enligt Google bygger Build mode som standard en webbapp med React i webbläsaren och en Node.js-server, men du kan också välja en native Android-app. En nybörjare behöver inte förstå koden, men det går att läsa och ändra den på fliken Code.

Det här är en mer avancerad guide än de andra, eftersom AI Studio är ett verktyg för utvecklare. Läs avsnittet om åldersregler innan du bestämmer hur du använder resultatet.

Det här behöver du

Ett Google-konto och inloggning på aistudio.google.com.
Åldersgräns och elever: enligt Googles villkor för Gemini API (som omfattar AI Studio) måste användaren vara minst 18 år, och tjänsten får inte användas i en app eller webbplats som riktar sig till personer under 18 eller sannolikt används av dem. Bygg därför prototypen för din egen användning och visa den på storbild. Publicera den inte för elever innan skolan har bedömt villkoren.
Kostnad: Google skriver att Cloud Run-priser kan tillkomma vid publicering och att anrop till betalda modeller kan ge kostnader när en app delas. De sidor som lästs säger inte uttryckligen vad själva byggandet kostar, så titta på kontot i AI Studio. AI Studio varnar före delning om det kan kosta pengar.
Så undviker du kostnad: be om en app utan Gemini-funktioner, som i prompten nedan. Då använder appen ingen AI när den körs.
Tillgången kan variera mellan konton och länder. Se Googles sida över tillgängliga regioner.
Skolans regler: enligt Skolverkets råd om AI-verktyg (öppnas i ny flik) bör lärare inte lämna personuppgifter eller elevtexter till AI-tjänster utan tillåtelse, och allt som AI skapar ska granskas mot kursplanen innan det används.

Ditt första projekt

Mål: En tidslinjeövning med sex historiska händelser som eleven ordnar genom att dra korten till rätt plats. Appen har en kontrollknapp som visar vilka kort som ligger rätt.

Ungefärlig tid: 25 till 40 minuter

Steg för steg

Öppna aistudio.google.com och logga in med ditt Google-konto.
Öppna Build mode.
Välj att bygga en webbapp. Det är standardvalet i plattformsväljaren.
Klistra in startprompten nedan och kör den.
Vänta tills filerna har genererats. Förhandsvisningen visas till höger.
Testa appen: dra korten och klicka på knappen för att kontrollera ordningen.
Klicka på fliken Code i förhandsvisningen om du vill se koden.
Be om ändringar i chattpanelen i Build mode, eller använd annoteringsläget för att markera en del av gränssnittet och beskriva vad som ska ändras.
Låt appen vara privat. Appar är privata som standard enligt Google.
Om du vill spara koden kan du ladda ned den som en ZIP-fil eller koppla den till ett GitHub-arkiv under Settings.

Delning och publicering: Google skriver att du kan dela appar eller publicera dem till en webbadress via Cloud Run. Det finns en Starter Tier där berättigade konton kan publicera upp till två appar utan Google Cloud-projekt, men Google Workspace-konton är inte berättigade. Annan publicering kräver ett Google Cloud-projekt med fakturering. Publicera inte för elever, av skälen ovan.

ZIP-filen: enligt Google måste GEMINI_API_KEY sättas i den miljö där du kör en nedladdad app. Det är bara relevant om du själv driftsätter appen. Du behöver inte ladda ned något för att prova.

Startprompt

Klistra in hela texten. Årtalen är med så att AI:n inte behöver gissa. Kontrollera dem ändå.

Bygg en webbapp på svenska: en tidslinjeövning i historia för årskurs 6 till 9.

Sex händelser visas som kort i blandad ordning, utan årtal. Händelserna är: Gustav Vasa väljs till kung (1523), Gustav II Adolf stupar vid Lützen (1632), Sverige får en ny regeringsform (1809), unionen med Norge upplöses (1905), enkammarriksdagen införs (1971) och Sverige blir medlem i EU (1995).

Eleven drar korten till rätt ordning på en tidslinje, med äldst först.

En knapp som heter Kontrollera visar vilka kort som ligger rätt. Rätt årtal visas först efter kontrollen.

En knapp som heter Blanda om startar om övningen.

Stora kort som går att flytta med mus och med fingret på en surfplatta.

Använd inga Gemini-funktioner i appen. Ingen inloggning och ingen data som skickas någonstans.

Följdpromptar

Be om en ändring i taget i chattpanelen och testa i förhandsvisningen.

Ett sätt att flytta kort utan att dra

Gör det möjligt att flytta korten med tangentbordet, till exempel med piltangenterna, och med knappar för upp och ner, för dem som inte kan dra korten. Kortet som är markerat ska synas tydligt.

Facit för läraren

Lägg till en vy för läraren med en tabell över alla händelser och årtal i rätt ordning. Tabellen ska gå att skriva ut. Eleven ska inte se den förrän läraren öppnar den.

En ledtråd per kort

Lägg till en knapp som heter Ledtråd på varje kort. Ledtråden är en kort mening som hjälper eleven att placera händelsen, men den får inte innehålla årtalet.

Så här kan resultatet se ut

Exempel, inte ett testat resultat. Beskrivningen visar vad du ska leta efter. Det du får kan se annorlunda ut.

Förhandsvisningen visar en tidslinje och sex kort i blandad ordning. När du drar ett kort hamnar det på en plats på tidslinjen. Efter klicket på Kontrollera markeras korten som ligger rätt, och rätt årtal visas. Utseendet och placeringen av knapparna beror på vad AI Studio genererar.

Kontrollera årtalen. De kommer från din prompt, men appens text kan ha ändrats. Läs igenom varje händelse och varje årtal.

Vanliga problem och lösningar

Förhandsvisningen visar ett fel

Be agenten i chattpanelen att åtgärda felet. Skriv: Förhandsvisningen ger ett fel. Hitta orsaken och rätta det, och behåll resten av appen.

En delad app visar 403 Access Restricted

Google skriver att det kan bero på integritetstillägg i webbläsaren, till exempel Privacy Badger, eller på byggfel som du kan be agenten åtgärda.

Jag får inte publicera med Starter Tier

Google Workspace-konton är inte berättigade enligt Google, och AI Studios support kan inte göra undantag. Publicering kräver då ett Google Cloud-projekt med fakturering. Det är inget du behöver för att prova appen.

Jag vill att flera ska redigera samtidigt

Google skriver att redigering i realtid inte stöds. Samarbete sker via ett gemensamt GitHub-arkiv.

Jag vill lägga till kamera eller mikrofon

Google skriver att kamera, mikrofon och andra webbläsarfunktioner kräver behörighet i filen metadata.json. Be agenten lägga till det, men tänk på att det samlar in data och inte passar elever.

Egen övning

Gör appen till din egen.

Byt ut de sex händelserna mot händelser ur din kurs och kontrollera varje årtal själv.
Be om en ledtråd som passar din klass nivå.
Visa appen på storbild och låt klassen ordna korten tillsammans.

Källor

Kontrollerade 23 oktober 2026:

Osäkerheter

Kostnadsuppgifter och åldersvillkor kan ändras och är tolkade utifrån de sidor som lästs. Fråga skolans dataskyddsansvarige innan resultatet används med elever. Menynamnen är hämtade från Googles dokumentation. Ingen app har byggts vid kontrollen.