m.mabrey/sde-meeting-toolkit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add local proxy server for AI draft button; point button at /api/claude

Browse Source
This commit is contained in:
Matt Mabrey
2026-08-20 14:49:26 -07:00
parent ee8f869905
commit e5c01003f8
7 changed files with 269 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
README.md
View File

@@ -14,7 +14,7 @@ This folder holds two workshop tools for Project SDE. Each tool is one HTML file
## Requirements
Install Node.js version 18 or later to run the local server. Node.js includes `npx`.
Install Node.js version 18 or later to run the local server.
You do not need Node.js to open a tool file directly in a browser.
@@ -28,8 +28,11 @@ Follow these steps to set up the project on your computer.
```
git status
```
4. To use the AI draft button through the local server, copy `.env.example` to `.env`.
5. Open `.env` and set `ANTHROPIC_API_KEY` to your key.
6. Do not commit `.env`. Git already ignores it.
The setup step ends here. The project has no other dependencies to install.
Skip steps 4 through 6 if you plan to run the AI draft button only from inside a Claude artifact (see Method 3 below). The project has no other dependencies to install.
## Run a tool
@@ -45,7 +48,7 @@ This method works offline. This method does not run the AI draft button in the F
### Method 2: Run a local server
Use this method to test the tools the way a browser would load them from a web server.
Use this method to test the tools the way a browser would load them from a web server. This method also makes the AI draft button work, if you completed steps 4 through 6 in Setup.
1. Open a terminal.
2. Go to the `sde-meeting-toolkit` folder.
@@ -53,20 +56,32 @@ Use this method to test the tools the way a browser would load them from a web s
```
npm run serve
```
4. Open a browser.
5. Go to this address: `http://localhost:5173`
6. Click a tool file under the `tools` folder.
7. Press `Ctrl+C` in the terminal to stop the server.
4. Check the terminal output. It reports whether it found an API key.
5. Open a browser.
6. Go to this address: `http://localhost:5173`
7. Click a tool link, or go directly to a file under the `tools` folder.
8. Press `Ctrl+C` in the terminal to stop the server.
### Method 3: Use the tool as a Claude artifact
Use this method to run the AI draft button in the Field Problem Workshop.
Use this method to run the AI draft button without setting up a local API key.
1. Open a chat in Claude.
2. Upload the tool file, or add it to a Claude project.
3. Ask Claude to render the file as an artifact.
The AI draft button needs a network connection and the Claude environment. Outside of Claude, the button fails without an error.
This method needs a network connection. It does not need the local server or a `.env` file.
## AI draft button
The Field Problem Workshop calls Claude to draft breadcrumb fields. It reaches Claude through one of two paths, never directly from the browser to the Anthropic API.
- **Local server path**: The browser calls `/api/claude` on your own machine. `server.js` reads `ANTHROPIC_API_KEY` from `.env` and forwards the request. Your key stays on your machine and is never sent to the browser.
- **Claude artifact path**: The Claude environment handles the request. No key setup is needed on your side.
If you run a tool by double-clicking the file, with no server, the AI draft button fails. This is expected: a plain file has no server to call.
If you run `npm run serve` without a `.env` file, or with `ANTHROPIC_API_KEY` unset, the button reports that the key is missing. Add the key to `.env` and restart the server to fix it.
## Save and load your work