---
title: "Hello Grove — Mango 3.1 Grove extension"
description: "A Vue 3 + TypeScript sample Sprig for testing the Grove bridge."
url: "https://mangoirc.chat/extensions/hello-grove"
language: "en"
---

[← All extensions](https://mangoirc.chat/extensions)

Developer sample · Sprig

# Hello Grove

by [Mango](https://mango.app/)

A Vue 3 + TypeScript sample Sprig for testing the Grove bridge.

Install in Mango 3.1 40 KB · Mango 3.1

Version

0.1.0

Runs as

Channel pane

Grove API

1

Updated

2026-07-31

Requested access

## 3 permissions

- **Read channel messages**Receives messages from the channel where the extension is running.
- **Send channel messages**Can post attributed messages to the channel where it is running.
- **Keep local data**Stores extension data on this device in its own isolated space.

Network access

## No internet access

Its manifest declares no external hosts. Grove’s sandbox blocks network requests outside the package.

Screenshots

## See it in Mango.

![Hello Grove screenshot 1](https://mangoirc.chat/extensions/assets/hello-grove/screenshots/hello-grove.png)

Hello Grove's channel-pane interface.

From the extension

## README

# Hello Grove — sample Sprig (Vue 3 + TypeScript)

A minimal Grove extension (“Sprig”) for testing Mango’s ` grove-ext:// ` host and the ` window.grove ` bridge. See ` Docs/Design/grove.md ` for the platform design.

## Build

```bash
cd Examples/grove-hello-vue
npm install
npm run build      # → dist/  (index.html + manifest.json + assets/)
npm run package    # → hello-grove.grove, ready to install on iOS or macOS
```

` vite.config.ts ` sets ` base: './' ` so the built asset URLs are relative and resolve under the Sprig’s own origin. ` public/manifest.json ` is copied verbatim into ` dist/ `.

The repository’s source directory is deliberately **not** itself an installable Sprig: its manifest lives under ` public/ ` and its entry imports TypeScript/Vue source. Install the generated ` hello-grove.grove `, or dev-load the built ` dist/ ` directory on macOS.

Node 18 or newer is required by the build toolchain.

## Load into Mango

### iPhone and iPad

1. Put ` hello-grove.grove ` in Files or iCloud Drive.
2. In Mango, open **Grove Extensions** and choose **Install .grove…**.
3. Select the package, then press **Start** beside Hello Grove and approve its requested permissions.

### macOS (development)

1. Run Mango.
2. Open any channel.
3. Click the **puzzle-piece** button at the top-right of the transcript.
4. Choose **Load Unpacked (Dev)…**, then select **` Examples/grove-hello-vue/dist `**.

The Sprig opens in a split-pane bound to that channel.

## What it demonstrates

- Reads ` window.grove.info.id ` (the Sprig identity from the bridge).
- Calls ` window.grove.send(text) ` — posts to the bound channel through the native bridge → ` IRCFeature `’s send path (capability-gated on ` channel.send `).
- Subscribes to ` window.grove.on('message', …) ` — the feed shows this channel’s messages live (capability-gated on ` channel.read `).

## Manifest

```jsonc
{
  "grove": 1,
  "id": "app.mango.grove.hello",
  "capabilities": ["channel.read", "channel.send"],
  "hostPermissions": []   // no network — pure local UI
}
```

Bridge type declarations live in ` src/grove.d.ts ` — keep them in sync with ` Mango/Grove/Host/GroveWebView.swift::facadeSource `.

**manifest.json**app.mango.grove.hello

```
{
  "grove": 1,
  "id": "app.mango.grove.hello",
  "name": "Hello Grove",
  "version": "0.1.0",
  "description": "A Vue 3 + TypeScript sample Sprig for testing the Grove bridge.",
  "author": {
    "name": "Mango",
    "url": "https://mango.app"
  },
  "readme": "README.md",
  "screenshots": [
    {
      "path": "screenshots/hello-grove.png",
      "caption": "Hello Grove's channel-pane interface."
    }
  ],
  "entry": "index.html",
  "presentation": {
    "surfaces": [
      "channelPane"
    ],
    "defaultSurface": "channelPane",
    "defaultSize": {
      "width": 340,
      "height": 460
    }
  },
  "capabilities": [
    "channel.read",
    "channel.send",
    "storage"
  ],
  "hostPermissions": []
}
```