# 🤖 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/`
└── types.ts        ← TypeScript type definitions
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. Configure API URL in Plugin

The plugin requires users to manually configure the API URL through the UI.

### 3. Build the plugin

To build the plugin, run:

```bash
npm run build
```

Or for development with auto-rebuild:

```bash
npm run watch
```

The built plugin will be output 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 the API URL
    - Enter your proxy key
    - Select input/output text nodes
    - Optionally set a system role
    - Press **"🤖 Generera svar"**

---

## Notes

- Uses `clientStorage` to persist API URL, proxy key, and selected node IDs between runs.
- The API URL must be configured before the plugin can be used.
- All settings can be cleared using the "Rensa alla inställningar" button.

---

## 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.