🦈 WebSharkUI WebSharkUI is a lightweight, high-performance environment designed for rapid web development, UI component testing, and real-time debugging. It serves as a "sandbox" for developers to isolate features and stress-test code before production deployment.

🚀 Key Features Isolated Testing Lab: A dedicated containerized area for mounting components or injecting scripts.

Live Console UI: Integrated terminal-style feedback directly in the dashboard.

Tech-Agnostic: Built to support vanilla JavaScript, modern frameworks, and CSS experimentation.

Modern Foundation: Styled with a clean, responsive interface optimized for developer workflows.

🛠 Getting Started Prerequisites To get the most out of WebSharkUI, ensure you have a modern web browser and a local development server (like Live Server or Vite).

Quick Start Clone the repository:

Bash git clone https://github.com/colesr/WebSharkUI.git Install project metadata, install a local coding model, and start the local server:

Bash npm install ollama pull qwen2.5-coder npm run dev

Open http://localhost:5173 in your browser.

By default, AI requests use Ollama at http://localhost:11434, so the assistant can run without paid API calls after the local model is installed. If Ollama is not already running, start it with ollama serve.

You can still open index.html directly for the non-AI editor experience, but AI requests require the Node server so the browser can talk to the configured AI provider consistently.

AI Assistant WebSharkUI includes an AI assistant panel for generating, fixing, explaining, and improving the current HTML/CSS/JS project. The browser sends editor content to POST /api/ai, and the Node proxy calls the configured provider. Proposed file edits are shown for review and are only applied after clicking Apply changes.

On GitHub Pages, the assistant now checks the configured hosted backend before enabling Send. The UI shows an AI backend status label and disables the prompt if the hosted backend is missing, unreachable, or misconfigured.

Provider Options The default provider is Ollama:

Bash AI_PROVIDER=ollama OLLAMA_MODEL=qwen2.5-coder npm run dev

OpenAI remains available as an optional hosted fallback:

Bash AI_PROVIDER=openai OPENAI_API_KEY=sk-your-key-here npm run dev

Free Render Deployment If you want the GitHub Pages site to talk to a hosted backend, this repo now includes a Render blueprint at render.yaml.

1. Push this repo to GitHub.
2. In Render, create a new Web Service from the repo.
3. Render will detect render.yaml and create a free Node service named websharkui-api.
4. After the first deploy, copy the Render service URL.
5. In the GitHub Pages app, open AI -> API and paste that Render base URL.

Important free-tier caveat: the Render free service can host server.mjs, but it cannot use Ollama running on your laptop. A hosted backend needs its own reachable AI provider. If you leave the default AI_PROVIDER=ollama, the service will deploy but AI requests will fail until you override the provider in Render.

Free Hosted Ollama Option If you want to stay on free services, you can keep AI_PROVIDER=ollama on Render and expose your local Ollama over a public tunnel.

1. Run Ollama locally: ollama serve
2. Start a tunnel to Ollama: cloudflared tunnel --url http://localhost:11434 --http-host-header 127.0.0.1
3. Copy the public HTTPS URL from cloudflared
4. In Render, set OLLAMA_BASE_URL to that public URL and redeploy
5. Keep both Ollama and the tunnel running whenever you want the GitHub Pages AI assistant to work

Tradeoff: this is free, but it is not durable. If your laptop sleeps, your network changes, or the tunnel restarts, the hosted backend will fail health checks and the GitHub Pages AI assistant will disable itself until the tunnel comes back.

If the Pages UI shows Hosted ollama - unavailable, check these in order:

1. ollama serve is still running on your local machine
2. your cloudflared tunnel is still online
3. the Render service OLLAMA_BASE_URL matches the current tunnel URL
4. the qwen2.5-coder model is installed locally

For a zero-cost frontend setup, GitHub Pages already works for the editor itself. The hosted AI assistant only works after you connect the backend to a reachable model provider.

📂 Project Structure index.html - The core application shell and testing environment.

server.mjs - Local static server and provider proxy for AI assistant requests.

render.yaml - Render blueprint for a free hosted Node backend.

package.json - npm scripts for running the development server.

/src - (Planned) Source logic and utility scripts.

/styles - (Planned) Modular CSS for the testing environment.

🛡 License Distributed under the MIT License.