AI Tools

From Simwiki.net
Jump to navigation Jump to search

What are AI Tools?

  • AI tools allow you to develop apps, web apps, programs, generate images, edit photos, visualize data, run simulations, and more.
  • AI tools can be useful to modders in various ways such as providing GUIs to hard-to-understand game files

Google AI Studio

  • Homepage
  • Google AI Studio is a free web app integrating an AI chatbot with extremely deep integration with development tools to allow you to do build advanced web apps
  • It's Google so it's like any other Google web app
  • You prompt the AI as you would any other AI chatbot and it generates the website for you. Commonly known as 'vibe coding'.
  • Web apps are generated with common HTML/CSS/JS with React, and Nodejs/NPM and Typescript backend - But you don't need to know any of this
  • You can download your app as a ZIP file and, if you're savvy with a web server, you can self host your web app
  • You can also deploy and publish your app to Google's own hosting al

Requirements:

  • You will need a Gmail/Google account and Google AI Studio will ask you to grant access to your Google Drive (which you already have if you have a Gmail/Google Account) to save your projects

Google Build AI

Custom System Instructions (Pre Prompt) For Google Build AI

  • Add the following under Settings (gear icon) > System Instructions
  • The goal of System Instructions (pre prompts) are to ensure that every manual prompt has the context of things you always want the AI to remember immediately.
    • AI does not always seem to obey system instructions, however, it feels like maybe it's 60-80% of the time
- When making changes, always give me a brief, concise explanation of the changes you're making.
- Do not add features that call out to AI, unless explicitly requested.
- Adding extra un-requested flourishes is great, but keep it tasteful, within scope, and only if it adds good value to the UX.
- Double-check that I am asking for a change to be made and do not make any changes to the app unless you're sure I'm asking for a change as I might just be asking you for information.

Real Web App Examples Built Using Google Build AI

All of these apps were generated by Google Build AI simply by prompting the AI like a regular AI chatbot. No hand coding needed.

GTR2 Tools:

Misc Tools:

How I self-host Google Build AI web apps:

Notes:

  • You will need a Gmail/Google account and Google AI Studio will ask you to grant access to your Google Drive (which you already have if you have a Gmail/Google Account) to save your projects

My AI Development Workflow

  • This is a living document of how I approach development apps with AI
  • I think of myself in the role of a 'hands-off' software architect who manages AI that can fulfill multiple roles such as developer, designer, tester, end-user, security auditor, etc.
  • I then act like I'm giving instructions to the AI as I would give instructions to a real human
    • Interestingly, when you think of it this way, AI already behaves like a human junior developer, sometimes making mistakes, sometimes going beyond your requirements, sometimes adding unasked for flourishes, etc.
Google Build AI

Initial Prompts:
- Start simple with a basic app request prompt.
  - Don't try to include every detail: Instead, plan to iterate on the app with many subsequent simple feature requests.

Initial Prompt Examples:
- Apple Notes app as a web app: A web app implementing the simplest version of the Apple Notes app on iPhone, with only the most essential features. It is essential that it's UX and view navigation look and feel as much like Apple Notes as possible.
- Apple Reminders app as a web app: A responsive progressive web app (ie. installable, offline, etc.) implementing the minimum valuable features of the Apple Reminders app on iPhone (mobile responsive layout) and the Apple Reminders app on iCloud.com (desktop responsive layout). It is essential that the UX and view navigation look and feel as much like the originals as possible.
- Apple Clock app as a web app: A responsive progressive web app (ie. installable, offline, etc.) implementing the minimum valuable features of the Apple Clock app on iPhone (mobile responsive layout) and using the style of the desktop responsive layout as commonly used on iCloud.com web apps. It is essential that the UX and view navigation look and feel as much like the originals as possible.
- Apple Weather app as a web app: A responsive progressive web app (ie. installable, offline, etc.) implementing the minimum valuable features of the Apple Weather app on iPhone (mobile responsive layout) and using the look and feel of the desktop responsive layout as commonly experienced on iCloud.com web apps. It is essential that the UX and view navigation look and feel as much like the originals as possible.

Initial Prompt Notes:
- General vs well-defined initial prompts: I'm not sure which is better yet. I suspect adding more detail in the initial prompt is better but becomes a liability in later prompts (perhaps because the context grows too large).

First Steps:
- Enforce agent instructions
  - Prompt: Remember agent instructions in agents.md file and update the file as new agent instructions become known
- Enforce app specifications
  - Prompt: Remember app specifications in specs.md file and update the file as new changes are made
- Enforce Change Logging
  - Prompt: Remember app changes in changes.md file and update the file as changes are made. The changes.md file should be structured as a linear, timestamped log of changes with each change recorded as an entry and timestamped. The timestamps should be real and accurate to the change and that was made. Generate the changes.md file now with the full history of changes so far.
- Enforce No AI
  - Prompt: Remove any AI dependencies, if any. Remember no AI dependency requirement going foward.
- Enforce No Remote Content
  - Prompt: Host all assets locally. Remember that no assets should have to be fetched remotely by the app.
- Custom instructions: No filler/No nice-to-haves, etc.
  - Common Sense Scoped Changes:
    - Prompt: Remember to make common sense changes when prompted: You can add common sense features, UX, logic, etc. to complete a feature that were not explicitly asked for but prefer to keep things simple and just enough to complete the feature well.
- Unit testing
  - Prompt: Audit app and generate unit tests. Remember to update these tests as new changes are made. I will ask you to run these tests in the future to ensure the app is still operating according to spec.
- Verify unit testing is not faked
  - Prompt: Verify tests are accurately testing the applications functionality and are not faking results

Development:
- Add one simple feature at a time
  - Prompt: Add light/dark mode toggle as a simple set of icons (no labels), mode should default to system preference, and mode selection should be remembered
  - Prompt: Rename button name to "xyz"
  - Prompt: Add login feature required to start using app

Common Advanced Features:
- Progressive Web App
  - Prompt: Review the codebase and explain what it would take to change this web app into a progressive web app (ie. installable, offline operation, etc.)
  - Prompt: Implement the required PWA features as you described. Exclude optional features for now.
- Encrypted Data Storage
  - Prompt: Implement best practice encryption for all saved data. This feature should not require a password.
    ^ Context: Offline-capable progressive web app storing data to localstorage eg. a reminders app

Bugs:
- TODO

Designing:
- Use Edit Tool (top-right icon) to isolate components to be affected by your change prompts
  ^ At least I think this is what it's meant for

Errors:
- TODO

Optimizing:
- Prompt: Optimize total app byte size
- Prompt: Optimize app performance
- Tip: Verify against specs.md after optimizing to ensure no lost or changed features or behaviour

Testing:
- Verify against specs file and agents file from time to time
  - Prompt: Verify app against specs file
  - Prompt: Verify app against agents file
  - Prompt: Verify app against specs file and agents file
- Run tests
  - Prompt: Run unit tests
    ^ Probably a bad idea as number of unit tests grows, compute and spend will grow. Instead, run a smaller, specific unit or test.
- Audit unit tests
  - Prompt: Audit unit tests to verify they're testing the features and logic code that the user is engaging with and not just faking it
- Tip: Run specific units or tests, not all of them, to avoid runaway tasks, over spend, etc.

Testing Tips:
- Running prompts on all unit tests will eventually take a long time (and a lot of spend) as the number of units and tests grows
- Instead of saying "Run unit tests", say "Run <FEATURE> unit test": It will be quicker, less spend, less chance of runaway compute/spend, less chance for errors, faster iteration/feedback time, etc.

Auditing:
- Security
  - Prompt: Audit for web app best practice security
  - Prompt: Audit for hardcoded secrets, API keys in source code
  - Prompt: Validate all user inputs are sanitized (SQL injection, XSS vectors)
  - Prompt: Review dependency versions for known CVEs
  - Prompt: Confirm HTTPS enforced for any network requests (even though you aim for local-only)
- Prompt: Audit UX
- Prompt: Audit remote content: All content should be locally hosted.
- Tip: Update agents.md with any new post-audit discoveries

Keywords:
- Verbs: Implement, Verify, Audit, Report, Recommend
- Nouns: Feature

Download:
- Code > Export > Downloads as .zip file

Optimizing Spend:
- Do Easy Changes By Hand
  - Google AI Studio provides a development environment (folders, editable files, etc.) where you can hand-edit files yourself
  - Eg. Renaming labels, removing a few UI elements, etc.
- How to optimize your AI usage/spend/billing as opposed to optimizing using the AI itself
- Prompt for targeted, smaller tasks, not general, larger tasks
  - Eg. 3 prompts to update 3 buttons instead of a single prompt to update them all at once (which is riskier in becoming a runaway task)
- Use the Edit Tool to focus a prompt on a specific feature eg. a button to rename or restyle
- Use Different Models
  - Prefer more capable/more expensive AI models for features
  - Prefer less capable/less expensive AI models for testing, auditing, checks, etc.

Areas for AI Improvement:
- AI should be better testing as an end-user: I am too frequently acting as QA and asking the AI to fix bugs which wastes time, compute, and spend

Tips

Use System Instructions

Google AI Studio Build AI Pre Prompt 25122301: 

- When making changes, always give me a brief, concise explanation of the changes you're making.
- You must not accidentally lose previously requested features. You must review the code to ensure a new change is not incorrectly overriding and losing a previous change.
- Do not add features that call out to AI, unless explicitly requested.
- Adding extra un-requested flourishes is great, but keep it tasteful, within scope, and only if it adds good value to the UX.
- Double-check that I am asking for a change to be made and do not make any changes to the app unless you're sure I'm asking for a change as I might just be asking you for information.
- Maintain a 'software spec' based on our conversation, thus far, and all the features requested. You will refer to this spec before making any changes, to avoid incorrectly altering or removing previously implemented features. You will update this spec on every request, ensuring the current change does not incorrectly alter or remove previous changes.
Use Initial Prompts
  • It feels like the System Instructions are not followed 100% of the time. It also feels like adding instructions in the chat help ensure instructions are followed.
  • It may be helpful to re-enter these prompts into the chat each time you reload Google AI Studio

Initial prompt(s): 

Generate a 'software spec' based on our conversation, thus far, and all the features requested. You will refer to this spec before making any changes, to avoid incorrectly altering or removing previously implemented features. You will update this spec on every request, ensuring the current change does not incorrectly alter or remove previous changes.
Request the AI to Remember System Instructions When Returning To Or Reloading Google AI Studio
  • It may help the AI, to keep doing what you expect, to ask the AI to remember the System Instructions and to include a copy of them with your prompt so it's explicitly in the chat
Request a Software Specification Be Maintained
  • tl;dr Having the AI maintain an explicit software specification is a step towards protecting against AI hallucination or memory limitations to avoid situations where the AI makes changes and incorrectly undoes previously requested features
  • I requested this software spec in the middle of a rather long conversation and, so far, many prompts later, it's still obeying the request to keep the software spec updated with the changes I've been requesting. I hope it's helping guide the AI to do the right thing and avoid incorrectly altering previous changes.
Generate a 'software spec' based on our conversation, thus far, and all the features requested. You will refer to this spec before making any changes, to avoid incorrectly altering or removing previously implemented features. You will update this spec on every request, ensuring the current change does not incorrectly alter or remove previous changes.
Reload Google AI Studio Periodically
  • tl;dr Reload Google AI Studio at least every hour as long sessions may start to 'break down' and do unexpected things with your requests
  • In my case, it started maintaining a SPECIFICATION.MD file
  • I'm not sure what's going on here, whether it's Google AI Studio or the AI's limitations, but sometimes, rarely, the AI can incorrectly remove old features, sometimes drastically changing your app
  • Concern: It is reliably updating the software spec, so far, but I'm not sure if it's changing its choices based on the file as opposed to just updating the file after it already made the changes it was going to do anyway.
Make Use of Restore and Version History
  • Restore buttons are visible in the chat after every prompt
    • Caution: These Restore buttons seems to disappear if you leave refresh/reload Google AI Studio or in any way leave Google AI Studio and come back. You'll have to rely on Version History, in that case.
  • Version History is in the top-right and appears to reliably capture per-change snapshots and automatic periodic snapshots

Gotchas

Beware Question Prompts or No-Change Prompts or Vague Prompts or Prompts Interpreted Vaguely

This issue has to do with the AI thinking it has to make a change when you didn't want it to make a change. Sometimes it can go haywire and wreck your app.

  • Avoid questions, the Build AI doesn't seem to handle them 100% reliably (2025-12-23)
  • Avoid 'no change' prompts, eg. reminders for the AI
  • Avoid vague prompts as the AI will not be reliably certain of what to do and may try to 'over do' a change
  • Keep an eye on the AI, if it's taking more than a minute to respond, as it may be interpreting a prompt vaguely, which can lead to undesired changes to your app

When needed, use the Restore button, at the bottom of prompts, or the Version History, in the top-right.

Sometimes the AI will spin and spin and spin on a relatively simple request
  • Sometimes a relatively simple request will cause the AI to get into some kind of loop and the messages it gives will make you think it's doing far too much work
  • Beware in these situation as the AI may really be doing too many changes, possibly unexpected changes: Use Restore or Version History if needed.

Wishlist

  • Test Suites
    • Every feature created by the AI should also come with a test suite and the AI should run all test units to verify the feature is working before returning to the user
    • The user should be able to request the AI run the full app test suite on demand and the AI will note errors and auto correct them
  • Self-Hosted Assets For Reliability and Offline Operation
    • Self-host all currently remotely loaded assets:
    • Various JS and CSS assets are remotely downloaded
  • Reliable AI explanation of its own changes
    • Knowing how the AI interpreted your prompt and implemented the changes would help ensure the change was done correctly
  • Reliable AI responses given System Instructions
    • AI is not 100% reliable when given per-response tasks in System Instructions
    • Ex. I ask the AI to always explain the change its making and sometimes it doesn't give any explanation.
  • Version History should include exact timestamps
  • Ability to give names/descriptions/tags to versions in Version History

Guides

How to self-host a Google Build AI Web App
Self-host Google AI Studio Build AI app

# Dependencies:
# Npm/Nodejs: dnf install npm
# Side-install upgraded Npm/Nodejs on Rocky Linux 9+ using streams 
#* Important/required(?) for Google AI Studio (260915)
#* List available streams: dnf module list nodejs
#* Enable a different stream: dnf module enable nodejs:18
## Install nodejs/npm stream: dnf module install nodejs:20
##* This side-installs nodejs v20 and sets the default binaries to v20

# Download Code ZIP
## Click Code (beside Preview) in Google Build AI
## Click the Download ("Download as .zip file") button (right-side beside Settings icon)
# Upload to a web server and extract ZIP
# Change into extracted zip's folder
# Edit vite.config.ts
## Add "base:" line (the root url of your app):
    export default defineConfig(({ mode }) => {
      return {
        base: '/apps/gtr2-plr-editor/',
        ...
      };
    });
# Install nodejs modules: npm install
# Build nodejs web app: npm run build
# Rename (move) /dist/ to /path/to/webroot/apps/app-name/
# Change into /path/to/webroot/apps/app-name/
# Fix permissions:
## chmod -Rc u+rwX,go+rX .
## restorecon -RFv .
# Browse app: https://www.simwiki.net/apps/app-name/

Notes:
- Properly done, the ZIP is extracted in a non-web-accessible directory and the /dist/ folder is copied to a web-accessible folder once built

Examples

Geditor Clone Web App
  • Clone of Geditor as a web app built using Google AI Studio's Build AI

https://www.simwiki.net/apps/geditor-clone-web-app/

Geditor clone web app built with Google AI Studio's Build AI: [1] 

I've been seeing what Google AI Studio's Build AI can produce, for the past week or so, just by prompting it like a chatbot, and I'm impressed.

This is genuinely a tool that can help us build some useful web apps right now, just from your creative ideas, and, in the future, I'm sure this is going to become a major way of developing native desktop apps. It's already that useful.

I hope you guys try out Google AI Studio and its Build AI mode and see what you can make. If you have a cool idea, it's as easy as telling an AI to build it.

[b]Google AI Studio:[/b]

https://aistudio.google.com/

[b]Geditor Clone Web App Live On Simwiki:[/b]

Here is a Geditor clone built by AI, just by prompting, and you can try it yourself on Simwiki right now, just click the Add File button and upload a GTR (you can also drop a GTR file on the app to upload):

https://www.simwiki.net/apps/geditor-clone-web-app/

The Geditor web app should be considered alpha software. Don't trust it for anything. But, in my testing, it seems to be doing things correctly.

[b]Screenshot:[/b]

[url=https://i.postimg.cc/J4Tw3zMX/Screenshot-20251222-205857.png][img(600px,0px)]https://i.postimg.cc/J4Tw3zMX/Screenshot-20251222-205857.png[/img][/url]

[b]Features:[/b]

- Open GTR archive and view contents
- Add files to a GTR
- Rename files inside a GTR
- Extract individual files from a GTR
- Preview files eg. Image formats
- View properties of files (byte size, image format, bit depth, advanced info, etc.)
- Save GTR contents as ZIP file

[b]Copy the Geditor clone web app and try changing it yourself:[/b]

https://ai.studio/apps/drive/19MFOvqRkYutQP1eHD_oufvpDlWTwQQyS

I didn't have to code anything or even know how any of that worked, to get it up and running.

[b]Other Apps[/b]

I've been experimenting with other apps, too:

[b]GTR2 PLR FFB Manager [/b] - Inspired by Marvin's Awesome iRacing FFB App

https://www.simwiki.net/apps/gtr2-plr-ffb-manager/

[b]GTR2 PLR Editor[/b]

https://www.simwiki.net/apps/gtr2-plr-editor/

[b]GTR2 AI Optimizer[/b]

https://www.simwiki.net/apps/gtr2-ai-optimizer/

[b]GTR2 Race Weather Visualizer[/b]

https://www.simwiki.net/apps/gtr2-weather-visualizer/

[b]GTR2 Location Editor[/b]

https://www.simwiki.net/apps/gtr2-location-editor/

[b]AI Tools Simwiki[/b]

https://www.simwiki.net/wiki/AI_Tools#Google_Build_AI

[b]How to get started[/b]

- Once you're logged in and at the Build AI prompt, just try telling it to build a text editor or something.
- Notice what it produces in the chat box and what it produces on the Preview side: It's building you a web app.
- Ask it to change something that you see in the preview, it will make the change itself. I have never been forced to manually touch code in my work, usually another prompt requesting a fix will do it.

[b]How to create apps with Google Build AI:[/b]

[youtube]ouAAmhZ34dg[/youtube]

[b]What are the web apps made from[/b]

- Build AI produces HTML/CSS/JS web apps using an intermediate step of nodejs/npm and React for an app and UX framework
- You can download the app as a zip, you can even deploy to the cloud and let Google host the app
- If you download the zip, and you run a server, you can build the app into pure HTML/CSS/JS and, so far, every app I've made is less than 1MB when deployed this way
 - I wrote up the relatively simple instructions here:
     How to self-host a Google Build AI Web App
     https://www.simwiki.net/wiki/AI_Tools#How_to_self-host_a_Google_Build_AI_Web_App

[b]Thoughts[/b]

- It might help some of you to think of the Build AI as an easy mockup tool that you will then implement your solution in whatever language and framework you'd prefer. For example, you could mockup an interface quickly, try it out, and then implement it in python and tk_inter, or Visual Studio.

- I made the AI analyze .GTR archives and, with the help of the file format definition, it came up with the code to read and write the format. We may be able to use this AI to parse files that don't yet have parsers.

- Another example, is I told the app to analyze the ini-like PLR and come up with its own rules for how to safely read/write that file, since it's not fully ini format and might have deviations incompatible with off-the-shelf ini libraries. Same with GDBs and AIWs: They're custom formats but the AI was able to come up with a way to read and write them safely.

[b]Caveats[/b]

- Less than you'd think. It kinda 'just works' for the most part.
- Sometimes the AI can undo previously implemented features, so watch out for that. If it does, try the Restore button after each prompt or, in the top-right, there's a Version History tool you can use to go back to automatic backups.
- Be careful the longer your chat goes and the more prompts you make. In almost all of the apps, if the chat went long enough, the AI would drastically alter the app, losing many features. This is when I had to use the Restore feature or the Version History feature. Still, I consider the tool worth it.

-Shovas
Retrieved from "https://www.simwiki.net/wiki/index.php?title=AI_Tools&oldid=5432"