mirror of
https://github.com/open-webui/docs.git
synced 2026-07-21 01:55:22 -04:00
refac
This commit is contained in:
Timothy Jaeryang Baek
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: "A project folder that follows you"
|
||||
sidebar_position: 8
|
||||
sidebar_position: 3
|
||||
---
|
||||
|
||||
# A project folder that follows you
|
||||
|
||||
@@ -0,0 +1,38 @@
|
||||
---
|
||||
title: "Clean up a messy folder with AI"
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# Clean up a messy folder with AI
|
||||
|
||||
Your Downloads folder has 400 files in it: screenshots named `Screen Shot 2025-11-03 at 9.41.12 PM.png`, six copies of the same PDF, homework from two school years, and installers you'll never run again. Sorting it by hand is an afternoon. Instead, you're going to point an AI at it and approve its plan, file by file, without touching a terminal or writing any code.
|
||||
|
||||
If you've never used Computer before, this is a good first project: you'll see exactly what the AI wants to do before it does anything.
|
||||
|
||||
**You need:** the [quickstart](/ecosystem/computer/quickstart) done (installing Computer is copy-pasting two commands) and a [model connected](/ecosystem/computer/ai/connect-a-model). Any decent model works. Ten minutes.
|
||||
|
||||
## The walkthrough
|
||||
|
||||
1. **Open the messy folder as a workspace.** In the workspace picker, choose your Downloads folder (or a copy of it, if you want to practice safely first). The file browser now shows the chaos in all its glory, with icons and file sizes.
|
||||
|
||||
2. **Keep the AI on a leash.** In the chat, open the **+** menu and make sure approval mode is **ask**. This means the AI must show you every single change and wait for your tap before making it. Nothing moves without your say-so.
|
||||
|
||||
3. **Ask for a plan first, not action.** Type something like:
|
||||
|
||||
> Look through this folder and tell me what's in it. Propose a folder structure (like Screenshots, Documents, Installers, Old homework) and tell me what you'd move where. Don't move anything yet.
|
||||
|
||||
Watch it work: you'll see it listing files and reading names, then it answers with a plan you can react to. "Actually, keep anything from 2026 where it is" is a perfectly good reply.
|
||||
|
||||
4. **Let it execute, with you approving.** When the plan looks right:
|
||||
|
||||
> Go ahead. Create the folders and move the files as planned.
|
||||
|
||||
Each action shows up as a card with **Allow** and **Deny** buttons. Tap through them. If it wants to do something weird, deny that one card and tell it why; the rest continues.
|
||||
|
||||
5. **Check the result like a human.** The file browser updates as it works. Open a couple of moved files to confirm they're what the AI said they were. Duplicates it found? Ask it to list them side by side with sizes before you let it delete anything.
|
||||
|
||||
## What makes this work
|
||||
|
||||
This is real AI-with-hands, but with the safety dialed all the way up: **ask** mode turns "an AI reorganized my files" from scary into a series of small decisions you watched happen. These are your real files, so start with a folder you can afford to practice on, keep deletions behind an extra "show me first," and skip hosted AI for folders with private documents (a [local model via Ollama](/ecosystem/computer/ai/connect-a-model) keeps everything on your machine).
|
||||
|
||||
**Go deeper:** [Approvals](/ecosystem/computer/ai/approvals-and-plan-mode) · [Files and editor](/ecosystem/computer/workspace/files-and-editor) · [Connect a model](/ecosystem/computer/ai/connect-a-model)
|
||||
@@ -0,0 +1,42 @@
|
||||
---
|
||||
title: "Build your first website with an AI beside you"
|
||||
sidebar_position: 4
|
||||
---
|
||||
|
||||
# Build your first website with an AI beside you
|
||||
|
||||
You want a website: a page for your club, a portfolio for art class, a fan page, whatever. You've never written HTML. The usual advice is a website builder that owns your page, or a YouTube tutorial series. Third option: build it as real files on your own computer, with an AI that writes the first version and explains every line you ask about.
|
||||
|
||||
You'll end up with something better than a hosted page: actual code you can read, break, fix, and keep forever.
|
||||
|
||||
**You need:** the [quickstart](/ecosystem/computer/quickstart) done and a [model connected](/ecosystem/computer/ai/connect-a-model). Zero coding experience.
|
||||
|
||||
## The walkthrough
|
||||
|
||||
1. **Make a home for it.** Create a new folder (you can do this right in the workspace picker), call it `my-site`, and open it as a workspace.
|
||||
|
||||
2. **Describe what you want.** In the chat:
|
||||
|
||||
> Build me a one-page website for our robotics club. Dark background, big title, a photos section, and a joke at the bottom. Plain HTML and CSS files, no frameworks.
|
||||
|
||||
Approve the file creations as they appear. In a minute you have `index.html` and `style.css` sitting in your file browser. Real files, on your machine.
|
||||
|
||||
3. **See it live.** Ask:
|
||||
|
||||
> Start a local web server for this folder so I can preview it.
|
||||
|
||||
The AI runs a tiny server (something like `python3 -m http.server 8080`; you'll see the command it asks to run). The port pops up in the **Ports** row above the file browser. Click it and your site opens in a preview tab.
|
||||
|
||||
4. **Now the actual learning part.** Open `index.html` in the editor next to the preview. Change the title text, save, refresh the preview. Break something on purpose. Then interrogate the AI like a tutor:
|
||||
|
||||
> What does the `<div>` on line 14 do? Why is the photo section side-by-side on wide screens?
|
||||
|
||||
It reads *your* file and explains *your* code, which beats a generic tutorial every time.
|
||||
|
||||
5. **Show your phone.** If you've set up [phone access](/ecosystem/computer/phone-and-remote/), open the same preview on your phone and watch your site in a real mobile browser. There's your first responsive-design lesson, free of charge.
|
||||
|
||||
## What makes this work
|
||||
|
||||
Everything stays plain files in one folder: readable, portable, yours. The AI does the intimidating blank-page part; the editor-beside-preview loop does the teaching; and because the chat lives in the workspace, next week's "add a second page" continues right where you left off. When you're ready for the world to see it, ask the AI to walk you through free hosting like GitHub Pages; the files are already exactly what you need.
|
||||
|
||||
**Go deeper:** [Previews and browser](/ecosystem/computer/workspace/previews-and-browser) · [Files and editor](/ecosystem/computer/workspace/files-and-editor) · [Chat features](/ecosystem/computer/ai/chat-features)
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: "Ship a fix from your phone"
|
||||
sidebar_position: 2
|
||||
sidebar_position: 6
|
||||
---
|
||||
|
||||
# Ship a fix from your phone
|
||||
|
||||
@@ -5,16 +5,37 @@ sidebar_position: 1
|
||||
|
||||
# What people actually do with it
|
||||
|
||||
Seven real workflows, written as steps you can follow today. Each one tells you what to set up first and what you'll see when it works.
|
||||
Ten real workflows, written as steps you can follow today, from "I've never opened a terminal" to "I'm running three agents in parallel." Each one says what to set up first and what you'll see when it works. Find your rung and climb from there.
|
||||
|
||||
## Start here (no coding needed)
|
||||
|
||||
If Computer is your first tool like this, these three need zero terminal and zero code. The install is copy-pasting two commands, and everything after that is clicking and typing in plain English.
|
||||
|
||||
| The moment | The walkthrough |
|
||||
| --- | --- |
|
||||
| A bug report lands while you're on the train. The branch is on your desk machine. | [Ship a fix from your phone](./fix-from-your-phone) |
|
||||
| Claude Code is mid-refactor at home and hits a decision it shouldn't make alone. | [Supervise a coding agent from anywhere](./supervise-a-coding-agent) |
|
||||
| You want to ask your computer "did the build pass?" from a chat app, not a browser. | [Message your computer from Telegram](./message-your-computer) |
|
||||
| The test suite should run every morning and tell you only when it matters. | [A morning check that reports to you](./scheduled-morning-checks) |
|
||||
| The layout looks fine in devtools' phone emulator. You've been burned by that before. | [Test your dev server on a real phone](./test-on-a-real-device) |
|
||||
| You love Open WebUI as your chat home, but the answer lives in a real repo. | [Give Open WebUI real hands](./open-webui-hands) |
|
||||
| A research project scattered across PDFs, notes, and voice memos on two devices. | [A project folder that follows you](./a-folder-that-follows-you) |
|
||||
| Your Downloads folder is 400 files of chaos and today is the day. | [Clean up a messy folder with AI](./clean-up-a-messy-folder) |
|
||||
| A school or research project scattered across PDFs, notes, and voice memos on two devices. | [A project folder that follows you](./a-folder-that-follows-you) |
|
||||
| You want a website for your club or portfolio, and you want to actually own it. | [Build your first website with an AI beside you](./first-website) |
|
||||
|
||||
All of them assume the two-minute [quickstart](/ecosystem/computer/quickstart) is done. Most of the remote ones also want [Tailscale](/ecosystem/computer/phone-and-remote/tailscale) and [keep it running](/ecosystem/computer/phone-and-remote/keep-it-running) in place; each page says exactly what it needs.
|
||||
## Your computer, in your pocket
|
||||
|
||||
You use a computer for real work and want it with you when you leave the desk. These add remote access and start touching the terminal and git, gently.
|
||||
|
||||
| The moment | The walkthrough |
|
||||
| --- | --- |
|
||||
| You want to ask your computer "did the build pass?" from a chat app, not a browser. | [Message your computer from Telegram](./message-your-computer) |
|
||||
| A bug report lands while you're on the train. The branch is on your desk machine. | [Ship a fix from your phone](./fix-from-your-phone) |
|
||||
| The layout looks fine in devtools' phone emulator. You've been burned by that before. | [Test your dev server on a real phone](./test-on-a-real-device) |
|
||||
|
||||
## Working with agents
|
||||
|
||||
For developers putting AI to work on real projects: supervision, automation, and orchestration.
|
||||
|
||||
| The moment | The walkthrough |
|
||||
| --- | --- |
|
||||
| Claude Code is mid-refactor at home and hits a decision it shouldn't make alone. | [Supervise a coding agent from anywhere](./supervise-a-coding-agent) |
|
||||
| The test suite should run every morning and tell you only when it matters. | [A morning check that reports to you](./scheduled-morning-checks) |
|
||||
| You love Open WebUI as your chat home, but the answer lives in a real repo. | [Give Open WebUI real hands](./open-webui-hands) |
|
||||
| Three independent tasks, one repo, and no patience for doing them one at a time. | [Run parallel agents on git worktrees](./parallel-agents-on-worktrees) |
|
||||
|
||||
All of them assume the two-minute [quickstart](/ecosystem/computer/quickstart) is done. The remote ones also want [Tailscale](/ecosystem/computer/phone-and-remote/tailscale) and [keep it running](/ecosystem/computer/phone-and-remote/keep-it-running) in place; each page says exactly what it needs.
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: "Message your computer from Telegram"
|
||||
sidebar_position: 4
|
||||
sidebar_position: 5
|
||||
---
|
||||
|
||||
# Message your computer from Telegram
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: "Give Open WebUI real hands"
|
||||
sidebar_position: 7
|
||||
sidebar_position: 10
|
||||
---
|
||||
|
||||
# Give Open WebUI real hands
|
||||
|
||||
@@ -0,0 +1,32 @@
|
||||
---
|
||||
title: "Run parallel agents on git worktrees"
|
||||
sidebar_position: 11
|
||||
---
|
||||
|
||||
# Run parallel agents on git worktrees
|
||||
|
||||
You have three independent tasks queued on one repo: a flaky-test fix, a dependency bump with API fallout, and a docs pass. One agent doing them sequentially wastes the parallelism; three agents in one working tree would trample each other's files. The clean answer is one worktree per task, one workspace per worktree, one agent per workspace, all supervised from a single browser tab.
|
||||
|
||||
**You need:** a [coding agent](/ecosystem/computer/ai/coding-agents) or API model configured, and a repo where the three tasks genuinely don't share files. Native agent backends resume per-chat sessions independently, which is what makes this sane to supervise.
|
||||
|
||||
## The walkthrough
|
||||
|
||||
1. **Cut the worktrees.** In the repo's workspace, open the worktree picker in the git panel and create a branch-backed worktree per task (`fix/flaky-upload-test`, `chore/bump-sdk`, `docs/cli-reference`). Each is a separate checkout on disk. Terminal equivalent, if you prefer: `git worktree add ../repo-flaky fix/flaky-upload-test`.
|
||||
|
||||
2. **One workspace each.** Add each worktree directory as its own workspace. Workspaces scope everything (files, git panel, terminals, chats), so the three efforts can't contaminate each other's diffs, and each chat's file mentions and history stay per-task.
|
||||
|
||||
3. **Brief each agent tightly.** Open a chat in each workspace, pick the agent model, set approval mode to **auto** (reads free, writes gated), and give each a bounded brief with a definition of done:
|
||||
|
||||
> Fix the flaky `test_upload_retry`. Reproduce it first (run it 20x), identify the race, fix, then run 50x clean. Don't touch anything outside the test and the retry module.
|
||||
|
||||
4. **Supervise all three from one screen.** Split the layout: three chats side by side, or chats stacked with a git panel. Pending approvals surface inline in each chat as they arrive, so the loop is: skim, tap into a diff, allow or deny with a correction. Messages you send mid-run queue for that agent's next turn. Within one chat, an agent can also fan out read-only [sub-agents](/ecosystem/computer/ai/subagents) for investigation, which keeps the write-path serialized per worktree while research parallelizes.
|
||||
|
||||
5. **Land serially, like an adult.** As each finishes: run the focused tests in that workspace's terminal, review the full diff in the git panel, commit on the branch, then merge or PR from the main checkout in whatever order makes sense. Worktrees keep merges honest because each branch's tree was never shared.
|
||||
|
||||
6. **Walk away mid-flight if you want.** All three tasks run server-side, sessions resume per chat, and pending approvals wait for you. Checking in from a phone is the same three chats, smaller.
|
||||
|
||||
## What makes this work
|
||||
|
||||
The isolation is doing the real work: worktrees give each agent a private filesystem reality, and workspaces give each one a private context, so parallelism costs no correctness. Approval mode is per chat, so you can run the docs agent on **full** while the dependency bump stays on **auto**. The bottleneck honestly becomes your review bandwidth; three is a comfortable ceiling, and the git panel, not agent optimism, is always the source of truth.
|
||||
|
||||
**Go deeper:** [Git and worktrees](/ecosystem/computer/workspace/git) · [Workspaces](/ecosystem/computer/workspace/workspaces) · [Sub-agents](/ecosystem/computer/ai/subagents) · [Approvals](/ecosystem/computer/ai/approvals-and-plan-mode)
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: "A morning check that reports to you"
|
||||
sidebar_position: 5
|
||||
sidebar_position: 9
|
||||
---
|
||||
|
||||
# A morning check that reports to you
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: "Supervise a coding agent from anywhere"
|
||||
sidebar_position: 3
|
||||
sidebar_position: 8
|
||||
---
|
||||
|
||||
# Supervise a coding agent from anywhere
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: "Test your dev server on a real phone"
|
||||
sidebar_position: 6
|
||||
sidebar_position: 7
|
||||
---
|
||||
|
||||
# Test your dev server on a real phone
|
||||
|
||||
Reference in New Issue
Block a user