SvelteViber

Where AI meets Svelte. SvelteViber is where AI meets creativity. Type an idea, and watch it transform into a live Svelte page you can preview instantly. Chat with the AI to refine, tweak, and push your code further — all in real time.

Currently supported models:

• Gemini 2.5 flash
• Deepseek r1
• ChatGTP o3 mini

Installation

Requirements:

• Node.js https://nodejs.org/en/download/current

Run npm install

You need to setup one of the following method in order for LLM calls to works.

LLMs from browser

Copy .env.example to .env and add your LLM API keys. You need to set at least one API key otherwise you won't be able to use the playground.

LLMs from API

Copy .env.example to .env and set VITE_API_ENABLE to true and VITE_API_URL to the hosted API URL in .env

Development server

To start (and watch) the development application, run npm start and go to http://localhost:8080

Production build

A LLM call method needs to be configured for .env.production

WARNING Do not host this application using LLMs from browser because your API keys will be visible. You can use https://github.com/Lyeed/svelte-viber-api which is a micro node.js API that I've developed for this project. It runs LLM requests instead of the frontend.

Then run npm run build Bundled application is located inside dist folder. Entry point is index.html.

Development tooling

• npm run prettier to enforce coding style and format
• npm run typescript to check types errors
• npm run xo to run code linter

Notes

• This app is standalone which means it includes the Svelte's compiler and runtime libraries. It's not ideal in term of performance and bundle size. If this was a serious application, these would need to live in the backend.
• Having to render and display code from LLMs in a iframe on its own, this application has security issues (notably privileges escalation)
• Adding new LLM can be done easily by implementing ModelBase interface

Author

Gautier Jousset @Lyeed https://lyeed.github.io/