| Pokey Rule | 9007dd9 | 2025-05-15 14:38:55 +0100 | [diff] [blame] | 1 | <div align="center"> |
| 2 | |
| 3 | <img src="https://storage.googleapis.com/sketch-assets/sketch-logo.png" alt="Sketch Logo" width="300"/> |
| 4 | |
| Earl Lee | 2e463fb | 2025-04-17 11:22:22 -0700 | [diff] [blame] | 5 | # Sketch |
| 6 | |
| Pokey Rule | 9007dd9 | 2025-05-15 14:38:55 +0100 | [diff] [blame] | 7 | [](https://pkg.go.dev/sketch.dev) |
| Pokey Rule | 124c942 | 2025-05-15 19:07:50 +0100 | [diff] [blame] | 8 | [](https://discord.gg/6w9qNRUDzS) |
| Pokey Rule | 9007dd9 | 2025-05-15 14:38:55 +0100 | [diff] [blame] | 9 | [](https://github.com/boldsoftware/sketch/actions/workflows/go_test.yml) |
| 10 | [](https://github.com/boldsoftware/sketch/blob/main/LICENSE) |
| 11 | |
| 12 | **Sketch is an agentic coding tool. It draws the 🦉** |
| 13 | |
| 14 | </div> |
| 15 | |
| 16 | ## 🚀 Overview |
| Philip Zeyliger | 3b279a5 | 2025-05-07 21:02:03 -0700 | [diff] [blame] | 17 | |
| 18 | Sketch runs in your terminal, has a web UI, understands your code, and helps |
| 19 | you get work done. To keep your environment pristine, sketch starts a docker |
| 20 | container and outputs its work onto a branch in your host git repository. |
| 21 | |
| Josh Bleecher Snyder | 39ed5a5 | 2025-05-12 17:34:45 -0700 | [diff] [blame] | 22 | Sketch helps with most programming environments, but Sketch has extra goodies for Go. |
| Earl Lee | 2e463fb | 2025-04-17 11:22:22 -0700 | [diff] [blame] | 23 | |
| Pokey Rule | 9007dd9 | 2025-05-15 14:38:55 +0100 | [diff] [blame] | 24 | <img src="https://storage.googleapis.com/sketch-assets/screenshot.jpg" alt="Sketch Screenshot" width="800"/> |
| 25 | |
| 26 | ## 📋 Quick Start |
| Earl Lee | 2e463fb | 2025-04-17 11:22:22 -0700 | [diff] [blame] | 27 | |
| Josh Bleecher Snyder | 1c18ec9 | 2025-07-08 10:55:54 -0700 | [diff] [blame] | 28 | Grab the most recent [nightly release](https://github.com/boldsoftware/sketch/releases). |
| 29 | |
| 30 | To build yourself, clone this repo, and then run: |
| 31 | |
| Earl Lee | 2e463fb | 2025-04-17 11:22:22 -0700 | [diff] [blame] | 32 | ```sh |
| Josh Bleecher Snyder | 1c18ec9 | 2025-07-08 10:55:54 -0700 | [diff] [blame] | 33 | $ make |
| 34 | $ ./sketch |
| Earl Lee | 2e463fb | 2025-04-17 11:22:22 -0700 | [diff] [blame] | 35 | ``` |
| David Crawshaw | 64d3299 | 2025-04-21 09:14:36 -0700 | [diff] [blame] | 36 | |
| Pokey Rule | 9007dd9 | 2025-05-15 14:38:55 +0100 | [diff] [blame] | 37 | ## 🔧 Requirements |
| David Crawshaw | 64d3299 | 2025-04-21 09:14:36 -0700 | [diff] [blame] | 38 | |
| Philip Zeyliger | be0da44 | 2025-06-20 15:14:24 -0700 | [diff] [blame] | 39 | Currently, Sketch runs on MacOS and Linux. It uses Docker for containers. |
| Josh Bleecher Snyder | 5cef9db | 2025-04-22 16:44:13 -0700 | [diff] [blame] | 40 | |
| Pokey Rule | 9007dd9 | 2025-05-15 14:38:55 +0100 | [diff] [blame] | 41 | | Platform | Installation | |
| 42 | | -------- | -------------------------------------------------------------------------- | |
| Philip Zeyliger | be0da44 | 2025-06-20 15:14:24 -0700 | [diff] [blame] | 43 | | MacOS | `brew install colima` (or Docker Desktop/Orbstack) | |
| Pokey Rule | 9007dd9 | 2025-05-15 14:38:55 +0100 | [diff] [blame] | 44 | | Linux | `apt install docker.io` (or equivalent for your distro) | |
| 45 | | WSL2 | Install Docker Desktop for Windows (docker entirely inside WSL2 is tricky) | |
| David Crawshaw | 64d3299 | 2025-04-21 09:14:36 -0700 | [diff] [blame] | 46 | |
| 47 | The [sketch.dev](https://sketch.dev) service is used to provide access |
| 48 | to an LLM service and give you a way to access the web UI from anywhere. |
| 49 | |
| Pokey Rule | 9007dd9 | 2025-05-15 14:38:55 +0100 | [diff] [blame] | 50 | ## 🤝 Community & Feedback |
| David Crawshaw | 64d3299 | 2025-04-21 09:14:36 -0700 | [diff] [blame] | 51 | |
| Pokey Rule | 9007dd9 | 2025-05-15 14:38:55 +0100 | [diff] [blame] | 52 | - **Discord**: Join our community at [https://discord.gg/6w9qNRUDzS](https://discord.gg/6w9qNRUDzS) |
| 53 | - **GitHub Issues**: Submit feedback at [https://github.com/boldsoftware/sketch/issues](https://github.com/boldsoftware/sketch/issues) |
| David Crawshaw | 64d3299 | 2025-04-21 09:14:36 -0700 | [diff] [blame] | 54 | |
| Pokey Rule | 9007dd9 | 2025-05-15 14:38:55 +0100 | [diff] [blame] | 55 | ## 📖 User Guide |
| David Crawshaw | 64d3299 | 2025-04-21 09:14:36 -0700 | [diff] [blame] | 56 | |
| Pokey Rule | 9007dd9 | 2025-05-15 14:38:55 +0100 | [diff] [blame] | 57 | ### Getting Started |
| Josh Bleecher Snyder | 39ed5a5 | 2025-05-12 17:34:45 -0700 | [diff] [blame] | 58 | |
| Pokey Rule | 9007dd9 | 2025-05-15 14:38:55 +0100 | [diff] [blame] | 59 | Start Sketch by running `sketch` in a Git repository. It will open your browser to the Sketch chat interface, but you can also use the CLI interface. Use `-open=false` if you want to use just the CLI interface. |
| Philip Zeyliger | 5ebdbb8 | 2025-05-10 17:20:29 -0700 | [diff] [blame] | 60 | |
| Pokey Rule | 9007dd9 | 2025-05-15 14:38:55 +0100 | [diff] [blame] | 61 | Ask Sketch about your codebase or ask it to implement a feature. It may take a little while for Sketch to do its work, so hit the bell (🔔) icon to enable browser notifications. We won't spam you or anything; it will notify you |
| Philip Zeyliger | 5ebdbb8 | 2025-05-10 17:20:29 -0700 | [diff] [blame] | 62 | when the Sketch agent's turn is done, and there's something to look at. |
| 63 | |
| 64 | ### How Sketch Works |
| 65 | |
| 66 | <!-- TODO: innie/outtie picture --> |
| 67 | |
| Pokey Rule | 9007dd9 | 2025-05-15 14:38:55 +0100 | [diff] [blame] | 68 | When you start Sketch, it: |
| Philip Zeyliger | 5ebdbb8 | 2025-05-10 17:20:29 -0700 | [diff] [blame] | 69 | |
| Pokey Rule | 9007dd9 | 2025-05-15 14:38:55 +0100 | [diff] [blame] | 70 | 1. Creates a Dockerfile |
| 71 | 2. Builds it |
| 72 | 3. Copies your repository into it |
| 73 | 4. Starts a Docker container with the "inside" Sketch running |
| 74 | |
| 75 | This design lets you **run multiple sketches in parallel** since they each have their own sandbox. It also lets Sketch work without worry: it can trash its own container, but it can't trash your machine. |
| 76 | |
| 77 | Sketch's agentic loop uses tool calls (mostly shell commands, but also a handful of other important tools) to allow the LLM to interact with your codebase. |
| Philip Zeyliger | 5ebdbb8 | 2025-05-10 17:20:29 -0700 | [diff] [blame] | 78 | |
| 79 | ### Getting Your Git Changes Out |
| 80 | |
| 81 | <!-- TODO: git picture --> |
| 82 | |
| Pokey Rule | 9007dd9 | 2025-05-15 14:38:55 +0100 | [diff] [blame] | 83 | Sketch is trained to make Git commits. When those happen, they are |
| Philip Zeyliger | 5ebdbb8 | 2025-05-10 17:20:29 -0700 | [diff] [blame] | 84 | automatically pushed to the git repository where you started sketch with branch |
| Pokey Rule | 9007dd9 | 2025-05-15 14:38:55 +0100 | [diff] [blame] | 85 | names `sketch/*`. |
| Philip Zeyliger | 5ebdbb8 | 2025-05-10 17:20:29 -0700 | [diff] [blame] | 86 | |
| Pokey Rule | 9007dd9 | 2025-05-15 14:38:55 +0100 | [diff] [blame] | 87 | **Finding Sketch branches:** |
| Philip Zeyliger | 5ebdbb8 | 2025-05-10 17:20:29 -0700 | [diff] [blame] | 88 | |
| Pokey Rule | 9007dd9 | 2025-05-15 14:38:55 +0100 | [diff] [blame] | 89 | ```sh |
| 90 | git branch -a --sort=creatordate | grep sketch/ | tail |
| 91 | ``` |
| 92 | |
| 93 | The UI keeps track of the latest branch it pushed and displays it prominently. You can use standard Git workflows to pull those branches into your workspace: |
| 94 | |
| 95 | ```sh |
| 96 | git cherry-pick $(git merge-base origin/main sketch/foo) |
| 97 | ``` |
| 98 | |
| 99 | or merge the branch |
| 100 | |
| 101 | ```sh |
| 102 | git merge sketch/foo |
| 103 | ``` |
| 104 | |
| 105 | or reset to the branch |
| 106 | |
| 107 | ```sh |
| 108 | git reset --hard sketch/foo |
| 109 | ``` |
| 110 | |
| 111 | Ie use the same workflows you would if you were pulling in a friend's Pull Request. |
| 112 | |
| 113 | **Advanced:** You can ask Sketch to `git fetch sketch-host` and rebase onto another commit. This will also fetch where you started Sketch, and we do a bit of "git fetch refspec configuration" to make `origin/main` work as a git reference. |
| 114 | |
| 115 | Don't be afraid of asking Sketch to help you rebase, merge/squash commits, rewrite commit messages, and so forth; it's good at it! |
| Philip Zeyliger | 5ebdbb8 | 2025-05-10 17:20:29 -0700 | [diff] [blame] | 116 | |
| 117 | ### Reviewing Diffs |
| 118 | |
| 119 | The diff view shows you changes since Sketch started. Leaving comments on lines |
| Josh Bleecher Snyder | 39ed5a5 | 2025-05-12 17:34:45 -0700 | [diff] [blame] | 120 | adds them to the chat box, and, when you hit Send (at the bottom of the page), Sketch goes to work addressing your |
| Philip Zeyliger | 5ebdbb8 | 2025-05-10 17:20:29 -0700 | [diff] [blame] | 121 | comments. |
| 122 | |
| Philip Zeyliger | 6458e7c | 2025-05-10 18:07:54 -0700 | [diff] [blame] | 123 | ### Connecting to Sketch's Container |
| 124 | |
| Pokey Rule | 9007dd9 | 2025-05-15 14:38:55 +0100 | [diff] [blame] | 125 | You can interact directly with the container in three ways: |
| Philip Zeyliger | 6458e7c | 2025-05-10 18:07:54 -0700 | [diff] [blame] | 126 | |
| Pokey Rule | 9007dd9 | 2025-05-15 14:38:55 +0100 | [diff] [blame] | 127 | 1. **Web UI Terminal**: Use the "Terminal" tab in the UI |
| 128 | 2. **SSH**: Look at the startup logs or click the information icon to see a command like `ssh sketch-ilik-eske-tcha-lott`. |
| 129 | We have automatically configured your SSH configuration to make these special hostnames work. |
| 130 | 3. **Visual Studio Code**: Look for a command line or magic link behind the information icon, or when Sketch starts up. This starts a new VSCode session "remoted into" the container. You |
| 131 | can edit the code, use the terminal, review diffs, and so forth. |
| Philip Zeyliger | 6458e7c | 2025-05-10 18:07:54 -0700 | [diff] [blame] | 132 | |
| Pokey Rule | 9007dd9 | 2025-05-15 14:38:55 +0100 | [diff] [blame] | 133 | Using SSH (and/or VSCode) allows you to forward ports from the container to your machine. For example, if you want to start your development webserver, you can do something like this: |
| Philip Zeyliger | 6458e7c | 2025-05-10 18:07:54 -0700 | [diff] [blame] | 134 | |
| Pokey Rule | 9007dd9 | 2025-05-15 14:38:55 +0100 | [diff] [blame] | 135 | ```sh |
| 136 | # Forward container port 8888 to local port 8000 |
| 137 | ssh -L8000:localhost:8888 sketch-ilik-epor-tfor-ward go run ./cmd/server |
| 138 | ``` |
| Philip Zeyliger | 6458e7c | 2025-05-10 18:07:54 -0700 | [diff] [blame] | 139 | |
| Pokey Rule | 9007dd9 | 2025-05-15 14:38:55 +0100 | [diff] [blame] | 140 | This makes `http://localhost:8000/` on your machine point to `localhost:8888` inside the container. |
| 141 | |
| 142 | ### Using Browser Tools |
| Philip Zeyliger | 5ebdbb8 | 2025-05-10 17:20:29 -0700 | [diff] [blame] | 143 | |
| 144 | You can ask Sketch to browse a web page and take screenshots. There are tools |
| Josh Bleecher Snyder | 39ed5a5 | 2025-05-12 17:34:45 -0700 | [diff] [blame] | 145 | both for taking screenshots and "reading images", the latter of which sends the |
| Philip Zeyliger | 5ebdbb8 | 2025-05-10 17:20:29 -0700 | [diff] [blame] | 146 | image to the LLM. This functionality is handy if you're working on a web page and |
| 147 | want to see what the in-progress change looks like. |
| 148 | |
| Pokey Rule | 9007dd9 | 2025-05-15 14:38:55 +0100 | [diff] [blame] | 149 | ## ❓ FAQ |
| Philip Zeyliger | 39bcf01 | 2025-05-12 10:07:40 -0700 | [diff] [blame] | 150 | |
| Pokey Rule | 9007dd9 | 2025-05-15 14:38:55 +0100 | [diff] [blame] | 151 | ### "No space left on device" |
| Philip Zeyliger | 39bcf01 | 2025-05-12 10:07:40 -0700 | [diff] [blame] | 152 | |
| Pokey Rule | 9007dd9 | 2025-05-15 14:38:55 +0100 | [diff] [blame] | 153 | Docker images, containers, and so forth tend to pile up. Ask Docker to prune unused images and containers: |
| Philip Zeyliger | 39bcf01 | 2025-05-12 10:07:40 -0700 | [diff] [blame] | 154 | |
| Pokey Rule | 9007dd9 | 2025-05-15 14:38:55 +0100 | [diff] [blame] | 155 | ```sh |
| 156 | docker system prune -a |
| 157 | ``` |
| 158 | |
| 159 | ## 🛠️ Development |
| Philip Zeyliger | d43e572 | 2025-04-23 19:21:26 -0700 | [diff] [blame] | 160 | |
| M-A | b5cb954 | 2025-05-02 11:32:34 -0400 | [diff] [blame] | 161 | [](https://pkg.go.dev/sketch.dev) |
| 162 | |
| Pokey Rule | 9007dd9 | 2025-05-15 14:38:55 +0100 | [diff] [blame] | 163 | See [CONTRIBUTING.md](CONTRIBUTING.md) for development guidelines. |
| Philip Zeyliger | d43e572 | 2025-04-23 19:21:26 -0700 | [diff] [blame] | 164 | |
| Pokey Rule | 9007dd9 | 2025-05-15 14:38:55 +0100 | [diff] [blame] | 165 | ## 📄 Open Source |
| David Crawshaw | 64d3299 | 2025-04-21 09:14:36 -0700 | [diff] [blame] | 166 | |
| 167 | Sketch is open source. |
| 168 | It is right here in this repository! |
| 169 | Have a look around and mod away. |
| 170 | |
| Pokey Rule | 9007dd9 | 2025-05-15 14:38:55 +0100 | [diff] [blame] | 171 | If you want to run Sketch entirely without the sketch.dev service, you can set the flag `-skaband-addr=""` and then provide an `ANTHROPIC_API_KEY` environment variable. (More LLM services coming soon!) |