Leon4gr45/builder

1# Getting Started with OSW Studio2 3**Create your first website in 5 minutes.**4 5This guide will walk you through setting up OSW Studio and building your first project.6 7---8 9## Step 1: Choose an AI Provider10 11OSW Studio needs an AI model to generate code. You have two options:12 13### Option A: Cloud Providers14 15Use a cloud AI service. You'll need an API key and will pay per usage (typically low cost).16 17| Provider | Get API Key |18|----------|-------------|19| **OpenRouter** | [Get Key](https://openrouter.ai/keys) |20| **OpenAI** | [Get Key](https://platform.openai.com/api-keys) |21| **Anthropic** | [Get Key](https://console.anthropic.com/settings/keys) |22| **Google** | [Get Key](https://aistudio.google.com/apikey) |23| **Groq** | [Get Key](https://console.groq.com/keys) |24| **HuggingFace** | [Get Token](https://huggingface.co/settings/tokens) |25| **SambaNova** | [Get Key](https://cloud.sambanova.ai/) |26| **MiniMax** | [Get Key](https://www.minimax.io/platform/user-center/basic-information/interface-key) |27| **Zhipu** | [Get Key](https://bigmodel.cn/usercenter/apikeys) |28 29**Note**: OSW Studio is developed using OpenRouter, so that provider has the most testing.30 31### Option A2: HuggingFace (Free Tier)32 33HuggingFace provides $0.10/month in free inference credits to all users — no payment method required.34 351. Create an account at [huggingface.co](https://huggingface.co)362. Go to [Settings → Access Tokens](https://huggingface.co/settings/tokens)373. Create a new token with **"Make calls to Inference Providers"** permission384. In Settings, select **HuggingFace** and paste the token39 40On HuggingFace Spaces, you can also sign in with one click via OAuth (no token needed).41 42### Option B: ChatGPT Subscription (No API Key)43 44If you have a ChatGPT Plus or Pro subscription you can use it instead of a separate API key.45 461. Install the [Codex CLI](https://github.com/openai/codex): `npm i -g @openai/codex`472. Run `codex login` and follow the browser prompts483. Copy your token: `cat ~/.codex/auth.json | pbcopy` (macOS) or `cat ~/.codex/auth.json | xclip -sel c` (Linux)494. In Settings, select **Codex (ChatGPT Sub)** and paste the JSON50 51The refresh token is kept in an HttpOnly cookie (not localStorage), so client-side JS never has access to it.52 53> **Warning**: This routes through an unofficial endpoint using your ChatGPT session. OpenAI may restrict or revoke access at any time. For something more stable, use an [OpenAI API key](https://platform.openai.com/api-keys) instead.54 55### Option C: Local AI (Free, No API Key)56 57Run AI models on your computer. Completely free but requires installation.58 59- **[Ollama](https://ollama.ai)** - Run open-source models locally via CLI60- **[LM Studio](https://lmstudio.ai)** - GUI for running local models61- **[llama.cpp](https://github.com/ggerganov/llama.cpp)** - Lightweight C++ inference server62- **[mesh-llm](https://github.com/michaelneale/mesh-llm)** - Free open-model inference via a peer-to-peer network (run `mesh-llm --auto` locally to join)63 64---65 66## Step 2: Configure Your Provider67 68You can configure your AI provider in two places:69 70**Option A: Global Settings**711. Go to **Settings > Provider & Model**722. Select your provider from the dropdown733. Paste your API key and click **Connect** (validates the key)744. Choose a model from the list75 76**Option B: In Workspace**771. Open or create a project782. Click the **model button** at the bottom left of the Chat panel793. Select provider, paste API key, click **Connect**, and choose a model80 81Your selection persists automatically. You can swap models anytime, or click **Disconnect** to remove a stored key.82 83**That's it!** You're ready to build.84 85---86 87## Step 3: Create Your First Project88 89Let's build a simple personal website.90 91### Start a New Project92 931. Click **Projects** in the sidebar942. Click **+ New Project**953. Name your project (e.g., "My Portfolio")964. Choose a runtime and template:97   - **Website Starter** - Minimal pure HTML/CSS/JS starting point98   - **Starter (Handlebars)** - Handlebars templating with partials99   - **Example Studios** - Multi-page portfolio with Handlebars100   - **Starter (React + TypeScript)** - Component-based React app101   - **Starter (Preact + TypeScript)** - Lightweight React alternative (~3KB)102   - **Starter (Svelte)** - Compile-time reactive framework103   - **Starter (Vue)** - Progressive framework with SFC support104   - **Starter (Python)** - Python scripts via Pyodide WASM105   - **Starter (Lua)** - Lua scripts via wasmoon WASM106   - **Landing Page with Contact Form** - Contact page wired to an edge function (Server Mode)107   - **React Demo: Task Tracker** - Fully working task app with local state108   - **Blog with Comments** - Multi-page blog with comments via a server function (Server Mode)109 110You'll see the workspace with 4 panels:111- **Chat** (left-most) - Talk to AI112- **File Explorer** (2nd) - Your project files113- **Code Editor** (3rd) - View and edit code114- **Preview** (last) - Live preview of your site115 116You can open and close panels from their headers and the sidebar on the workspace.117 118### Build With AI119 120In the chat, try this prompt:121 122```123Create a simple portfolio website with:124- A hero section with my name and title125- An about section126- A projects section127- A contact section128- Modern design with a blue color scheme129```130 131**Watch the AI work:**132- It will create HTML, CSS, and JavaScript files133- You'll see each file creation in the chat134- The preview updates in real-time135- You can ask it to make changes anytime136 137### Make Changes138 139Don't like something? Just ask:140 141```142Make the hero section taller and add a gradient background143```144 145```146Change the color scheme to purple and orange147```148 149```150Add smooth scrolling when clicking navigation links151```152 153The AI will update your code and explain what it changed.154 155---156 157## Step 4: Export Your Site158 159When you're happy with your website:160 1611. Click the **Menu** icon (three dots) in the top right1622. Select **Export**1633. Choose **ZIP** (suitable for hosting) or **JSON** (for backup)1644. Download the file165 166You now have a complete, ready-to-deploy website!167 168---169 170## Step 5: Deploy to the Web171 172Upload your site to make it live. Here are the easiest options:173 174### Vercel (Recommended)175 1761. Go to [vercel.com](https://vercel.com)1772. Sign up (free)1783. Drag and drop your ZIP file1794. Get a live URL instantly180 181### Netlify182 1831. Go to [netlify.com](https://netlify.com)1842. Sign up (free)1853. Drag and drop your ZIP file1864. Get a live URL instantly187 188Both services offer:189- Free hosting190- Automatic HTTPS191- Custom domains (optional)192- Instant deploys193 194**[Detailed deployment guide →](?doc=deploying-sites)**195 196---197 198## What's Next?199 200**Get better results from AI:**201- [Working with AI](?doc=working-with-ai) - Prompting tips and best practices202 203**Speed up your workflow:**204- [Templates](?doc=templates) - Start projects faster205- [Skills](?doc=skills) - Teach AI your preferences206 207**Manage your work:**208- [Projects](?doc=projects) - Save, organize, and export projects209 210**Advanced features:**211- [Server Mode](?doc=server-mode) - Self-host and publish sites directly212 213**Need help?**214- [FAQ](?doc=faq) - Common questions215- [Troubleshooting](?doc=troubleshooting) - Fix issues216 217---218 219## Quick Tips220 221**💡 Be Specific**222Instead of "make it look good", try "add a gradient from blue to purple in the hero section"223 224**💡 Make One Change at a Time**225Breaking requests into smaller steps gives better results226 227**💡 Save Often**228Projects auto-save, but you can manually save with Ctrl+S (Cmd+S on Mac)229 230**💡 Use Templates**231Starting from a template is faster than building from scratch232 233**💡 Start Simple**234Get the basic structure working, then add features one by one235 236---237 238**Ready to build?** Head back to Projects and start creating!239