elisara-venturi/wellbeing360

Wellbeing 360 Health — your website + AI assistant 🌿

This is your new website, plus a friendly Studio where you can change it just by talking to an AI — no coding, no WordPress. You type what you want ("make the headline warmer", "add a blog post about magnesium"), the AI makes the change, and you see it appear instantly in a live preview. When you're happy, you press Deploy to publish it to the internet.

🧰 One-time setup (about 10 minutes)

You'll do these steps once. Don't worry — just follow them in order.

1. Install Node.js

Download and install the "LTS" version from <https://nodejs.org>. Accept all the defaults.

2. Open the project in a terminal

• —Open the `aa` folder (this folder).
• —In it, open a terminal:
• —Windows: right-click inside the folder → "Open in Terminal" (or open PowerShell and cd into the folder).

3. Install the project (one command)

Type this and press Enter, then wait a minute:

npm install

4. Create your settings file

In this folder, create a file named `.env` (open Notepad, paste the lines below, and save it as .env). Fill in your key on the GEMINI_API_KEY line (see step 5). The .env file is private — it never gets published.

AI_PROVIDER=gemini
IMAGE_PROVIDER=gemini
GEMINI_API_KEY=
GEMINI_MODEL=gemini-3.5-flash
GEMINI_MODEL_FALLBACKS=gemini-3-flash-preview,gemini-3.1-flash-lite
GEMINI_IMAGE_MODEL=gemini-3-pro-image
GEMINI_IMAGE_FALLBACK_MODEL=gemini-3.1-flash-image
ANTHROPIC_API_KEY=
CLAUDE_MODEL=claude-opus-4-8
DEPLOY_PROVIDER=netlify
NETLIFY_AUTH_TOKEN=
NETLIFY_SITE_ID=
PORT=4321
# Leave blank for local use. Set a password only when hosting the Studio online.
STUDIO_PASSWORD=

5. Get your free AI key (Google Gemini)

1. 1.Go to <https://aistudio.google.com/apikey> and sign in with a Google account.
2. 2.Click Create API key, copy it.
3. 3.Paste it into .env after GEMINI_API_KEY=.

That's the minimum! You can now run the Studio. (Deploying needs one more key — see below.)

▶️ Using the Studio every day

In the terminal, type:

npm run studio

Your browser opens the Studio at <http://localhost:4321/studio>. You'll see:

• —Left: a chat box — talk to your assistant here.
• —Right: a live preview of your website.

Want your sister to use it from her own computer without installing anything? You can host the Studio online (with a password) — see [DEPLOY-STUDIO.md](DEPLOY-STUDIO.md).

Type a request and press Send. Watch the preview update. Some things to try:

"Change the homepage headline to something warmer." "Make the main buttons a peach colour." "Add an FAQ about how long a first consultation takes." "Write a short, friendly blog post about the benefits of magnesium." "Create a calming hero image of herbal tea and eucalyptus, and use it on the home page." "Update my contact email to lara@wellbeing360health.com." "Set my booking link to my Cal.com page."

Point at something: in the preview on the right, right-click any part of the site (or click 🎯 Select then click a part) — it appears in the chat as "📍 …". Then just type what you want changed there ("make this bigger", "change this wording") and the assistant knows exactly which element you mean. You can also right-click and drag to draw a box over an area — it grabs a snapshot of that area and attaches it for you.

Attach a screenshot: if it's easier to show what you mean, click the 📎 button (or just paste a screenshot with Ctrl + V, or drag an image into the chat) and add a note like "make this section's background peach." The assistant looks at the image to find what you mean.

Undo anything: click ↺ History (top right). Every change is saved automatically — click "Undo to here" on any earlier version to roll back. Nothing can be permanently broken.

When you're done, just close the browser tab and press Ctrl + C in the terminal to stop.

🚀 Publishing your website (the Deploy button)

Your changes are only on your own computer until you Deploy.

One-time: get a free publishing key (Netlify)

1. 1.Create a free account at <https://www.netlify.com>.
2. 2.Go to <https://app.netlify.com/user/applications> → New access token → copy it.
3. 3.Paste it into .env after NETLIFY_AUTH_TOKEN=.

To publish

Press the 🚀 Deploy button (top right of the Studio). It packages your site and puts it online in a few seconds, then shows you the live web address.

The first deploy creates a new site and prints a line like NETLIFY_SITE_ID=xxxxxxxx. Copy that line into your .env so every future deploy updates the same site.

Pointing your domain (wellbeing360health.com) at the new site

Do this only when you're happy and ready to switch over. Your current WordPress site stays exactly as it is until you do. In Netlify: Site settings → Domain management → Add your domain, then follow their instructions to update your domain's DNS. (Happy to help you with this step when the time comes.)

💡 Good to know

• —Choosing the AI. Use the AI dropdown in the top bar to switch between Gemini and Claude. It checks each one live and only lets you pick the ones whose key is present and actually working (a greyed-out option tells you why — e.g. "out of credits"). You start on Google Gemini's free tier; to add Claude, put a key in ANTHROPIC_API_KEY in .env and it appears in the dropdown. Images always come from Gemini (Claude can't make images). The dropdown switches for the current session; the default on restart is AI_PROVIDER in .env.
• —Images. The AI can generate images for you. Gemini's free tier limits how many you can make per day; if it stops working, try again later or add a Claude/paid key.
• —Contact form & newsletter. These start working automatically once the site is deployed to Netlify (submissions show up in your Netlify dashboard under "Forms").
• —It's all yours. Everything lives in this folder. The website is in web/, and the assistant is in studio/. You never need to open those unless you're curious.

🆘 If something doesn't work

• —"Add your API key to .env" in the Studio → you haven't filled in GEMINI_API_KEY yet.
• —The preview is blank → wait a few seconds and click the ⟳ refresh button.
• —Deploy says no token → add NETLIFY_AUTH_TOKEN to .env.
• —Still stuck? Ask your brother 🙂 — or paste the error into the chat and the assistant can often explain it.

For the technically curious

• —web/ — the live website: an exact static mirror of the original site (HTML pages + assets/ with the real CSS, fonts, images and scripts, so the animations work too). This is what the Studio previews, what the AI edits, and what Deploy publishes.
• —studio/server/ — the local AI agent server (holds keys, edits files in web/, git snapshots, deploy).
• —studio/ui/ — the Studio's chat + preview interface.
• —Every AI change is a real Git commit, which is how "Undo" works.
• —scripts/mirror.mjs re-captures the live site into web/ using a real browser (run it again any time the original WordPress site changes). Run with npm run mirror; check the result with npm run verify.