docs: Update CONTRIBUTING and README for WebUI development server setup and usage
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 0b2a750..642d369 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -35,3 +35,9 @@
# Inside
go run ./cmd/sketch -unsafe
```
+
+## WebUI Development Server
+
+We have a standalone development server for the web UI that makes it easier to develop and test the client-side code. This server is separate from the main Go server and is intended for local development of the web components. It is populated with dummy data, and supports hot module reloading, allowing you to see changes in real-time without needing to restart the server.
+
+To run the development server for the web UI, see [webui/readme.md](webui/readme.md).
diff --git a/webui/Makefile b/webui/Makefile
index 3c7c341..b95708e 100644
--- a/webui/Makefile
+++ b/webui/Makefile
@@ -7,6 +7,9 @@
demo:
npm run demo
+dev:
+ npm run dev
+
# TypeScript type checking
# Note: The actual esbuild bundling happens in esbuild.go
check:
diff --git a/webui/readme.md b/webui/readme.md
index 6a9e257..90e8877 100644
--- a/webui/readme.md
+++ b/webui/readme.md
@@ -29,10 +29,27 @@
For development, you can use watch mode:
```bash
-make demo
+make dev
```
-This will launch a local web server that serves the demo pages for the web components. You can edit the TypeScript files, and the changes will be reflected in real-time.
+This will launch a local web server at http://127.0.0.1:5173/ that serves the demo pages for the web components. You can edit the TypeScript files, and the changes will be reflected in real-time.
+
+To access the main app shell interface on the dev server (the primary UI component for Sketch):
+
+1. Start the dev server as above
+2. Navigate to http://127.0.0.1:5173/src/web-components/demo/sketch-app-shell.demo.html
+ or click on the "sketch-app-shell" link from the demo index page
+
+### UI Component Demos
+
+The development server provides access to individual component demos including:
+
+- Main app shell: http://127.0.0.1:5173/src/web-components/demo/sketch-app-shell.demo.html
+- Chat input: http://127.0.0.1:5173/src/web-components/demo/sketch-chat-input.demo.html
+- Timeline: http://127.0.0.1:5173/src/web-components/demo/sketch-timeline.demo.html
+- And more...
+
+You can access these demos from the index page or navigate directly to the specific component demo URL.
#### VSCode