---
title: "Tutorial: Building a Watermark Plugin"
description: "Use AI to build a complete NocoBase watermark plugin with one sentence: page watermark overlay, tamper detection, and configurable watermark parameters."
keywords: "AI development,watermark plugin,NocoBase plugin,tutorial,AI programming"
---

# Tutorial: Building a Watermark Plugin

This tutorial demonstrates how to use a single sentence to have AI develop a complete NocoBase watermark plugin -- from creating the scaffold to enabling and verifying, all done by AI.

## Final Result

After enabling the plugin:

- A semi-transparent watermark overlays NocoBase pages, displaying the current logged-in username
- The watermark cannot be removed by deleting the DOM -- periodic detection will automatically regenerate it
- Watermark text, opacity, and font size can be adjusted in the "Plugin Settings"

![watermark plugin](https://static-docs.nocobase.com/20260416170645.png)

## Prerequisites

:::tip Recommended Reading

- [NocoBase CLI](../ai/quick-start.md) -- Installing and starting NocoBase
- [AI Plugin Development Quick Start](./index.md) -- Installing Skills

:::

Make sure you have:

1. A running NocoBase development environment (NocoBase Skills are automatically installed during NocoBase CLI initialization)
2. An editor that supports AI Agent open (e.g., Claude Code, Codex, Cursor, etc.)

:::warning Note

- NocoBase is migrating from `client` (v1) to `client-v2`, and `client-v2` is still under development. The client code generated by AI development is based on `client-v2` and can only be used under the `/v/` path. It is available for early access and experimentation, but is not recommended for production use.
- AI-generated code may not be 100% correct. We recommend reviewing it before enabling. If you encounter issues at runtime, send the error message to AI and let it investigate and fix -- it usually takes just a few rounds of conversation to resolve.

:::

## Getting Started

In your NocoBase project root directory, send the following prompt to AI:

```
Help me use nocobase-plugin-development skill to develop a NocoBase watermark plugin.
Requirements: overlay a semi-transparent watermark on the page showing the currently logged-in username to prevent data leaks via screenshots.
Periodically check if the watermark DOM has been removed and regenerate it if so.
Support configuring watermark text, opacity, and font size in the plugin settings page.
The plugin name is @my-project/plugin-watermark
```

<video width="100%" height="450" controls>
  <source src="https://static-docs.nocobase.com/nocobase-plugin-dev-compressed.mp4" type="video/mp4">
</video>

## What AI Did

After receiving the requirements, AI will automatically execute the following steps:

### 1. Analyze Requirements and Confirm the Plan

AI will first analyze which NocoBase extension points this plugin needs, then present a development plan. For example:

> **Server-side:**
> - A `watermarkSettings` collection to store watermark configuration (text, opacity, font size)
> - A custom API to read and write watermark settings
> - ACL configuration: logged-in users can read, admins can write
>
> **Client-side:**
> - A plugin settings page with a form to configure watermark parameters
> - Watermark rendering logic that reads the configuration and overlays the watermark on the page
> - Tamper detection with a timer to monitor the watermark DOM

After you confirm the plan, AI starts writing code.

<!-- Screenshot of AI outputting the development plan in the terminal needed -->

### 2. Create the Plugin Scaffold

```bash
yarn pm create @my-project/plugin-watermark
```

AI generates a standard plugin directory structure under `packages/plugins/@my-project/plugin-watermark/`.

### 3. Write Server-Side Code

AI will generate the following files:

- **Collection definition** -- A `watermarkSettings` table with `text`, `opacity`, and `fontSize` fields
- **Custom API** -- Endpoints to read and update watermark settings
- **ACL configuration** -- Logged-in users can read watermark settings, admins can modify them

<!-- Terminal screenshot showing AI generating server-side code needed -->

### 4. Write Client-Side Code

- **Plugin settings page** -- An Ant Design form for configuring watermark text, opacity (slider), and font size
- **Watermark rendering** -- Creates a fullscreen canvas/div overlay on the page, displaying the current logged-in username
- **Tamper detection** -- Dual protection with `MutationObserver` + timer; the watermark is immediately regenerated if the DOM is removed

<!-- Terminal screenshot showing AI generating client-side code needed -->

### 5. Internationalization

AI automatically generates Chinese and English language packs -- no extra action needed from you:

- `src/locale/zh-CN.json` -- Chinese translations
- `src/locale/en-US.json` -- English translations

### 6. Enable the Plugin

```bash
yarn pm enable @my-project/plugin-watermark
```

After enabling, open the NocoBase page and you'll see the watermark overlaying the content.

<!-- Video needed: from entering the prompt -> AI generating code -> enabling the plugin -> watermark appearing on the page -> opening the settings page to adjust parameters -> watermark updating accordingly -->

## How Long Did It Take

From entering the prompt to having a working plugin, it takes approximately **3-5 minutes**. AI completed the following work:

| Task                                   | Manual Dev Estimate | AI Completion  |
| -------------------------------------- | ------------------- | -------------- |
| Create scaffold                        | 2 minutes           | Automatic      |
| Collection + API                       | 20 minutes          | Automatic      |
| Plugin settings page                   | 30 minutes          | Automatic      |
| Watermark rendering + tamper detection | 40 minutes          | Automatic      |
| ACL configuration                      | 10 minutes          | Automatic      |
| Internationalization                   | 15 minutes          | Automatic      |
| **Total**                              | **~2 hours**        | **~5 minutes** |


## Want to Build More Plugins?

The watermark plugin primarily involves frontend rendering and simple backend storage. If you want to learn what else AI can help you with -- such as custom blocks, complex collection relationships, workflow extensions, and more -- check out [Supported Capabilities](./capabilities).

## Related Links

- [AI Plugin Development Quick Start](./index.md) -- Quick start and capability overview
- [Supported Capabilities](./capabilities) -- Everything AI can help you do, with sample prompts
- [Plugin Development](../plugin-development/index.md) -- The complete guide to NocoBase plugin development
- [NocoBase CLI](../ai/quick-start.md) -- Command-line tool for installing and managing NocoBase
