# 🤖 MAID Plugin for Figma

This Figma plugin is designed for the **Människa-AI-Interaktionsdesign (MAID)** course to let students connect their own designed Figma UI to [MAID Proxy](../proxy/README.md) using a proxy key.
The plugin allows students to select text nodes for input and output, the plugin sends the input to the proxy and displays the returned response in the output node.

---

## Project Structure

```
src/
├── code.ts         ← Figma plugin backend
├── ui.ts           ← Frontend logic injected into UI
├── ui.html         ← HTML template (CSS and JS injected)
├── styles.css      ← CSS injected into `ui.html`
├── manifest.json   ← Plugin manifest copied to `dist/`
├── .env.*          ← Environment-specific proxy settings
esbuild.config.mjs  ← Build configuration
dist/               ← Output directory for plugin
```

---

## Building the Plugin

To build the plugin, you need to have [Node.js](https://nodejs.org/) installed. The plugin uses `npm` for package management and `esbuild` for building.

### 1. Install Dependencies

```bash
npm install
```

### 2. Setup `.env` Files

The plugin loads its proxy backend URL from environment files during build. Create the following:

#### `.env.development`

```env
PROXY_URL=http://localhost:5000
```

#### `.env.production`

```env
PROXY_URL=https://your.production.proxy
```

The URL is injected into `code.ts` during the build process. It is **not read from the UI at runtime**.

### 3. Build the plugin

To build for **development** using `.env.development`, run:

```bash
npm run dev
```

To build for **production** using `.env.production`, run:

```bash
npm run build
```

Both commands will output the built plugin to the `dist/` folder.

---

## Usage in Figma

1. Open Figma → `Plugins` → `Development` → `Import plugin from manifest...`
2. Choose: `dist/manifest.json`
3. Open the plugin: `Plugins` → `MAID Plugin`
4. Follow the on-screen steps:
    - Select input/output
    - Enter your proxy key
    - Press **"Generera svar"**

---

## Notes

- Uses `clientStorage` to persist proxy key and selected node IDs between runs.

---

## Backend

The plugin communicates with a backend server. It is designed to communicate with the [MAID Proxy](../proxy/README.md) backend. If you wish to implement your own backend, you can do so by following the API structure outlined below.
Make sure your backend exposes the `/ask` endpoint and handles the following payload:

```json
{
    "proxy_key": "your-proxy-key",
    "system_role": "You are a helpful AI assistant.",
    "prompt": "Some text from input node"
}
```

The backend should return a JSON response with the following structure:

```json
{
    "response": "Some text to display in the output node"
}
```

---

## Maintainers

Created by [@nenzen](mailto:nenzen@dsv.su.se).  
Feel free to fork and adapt.