---
title: "AI プラグイン開発クイックスタート"
description: "AI を活用して NocoBase プラグインを開発。一言で要件を伝えるだけで、フロントエンド・バックエンドのコード、データテーブル、権限設定、国際化を自動生成します。"
keywords: "AI 開発,AI Development,NocoBase AI,プラグイン開発,AI プログラミング,Skills,クイックスタート"
---

# AI プラグイン開発クイックスタート

AI プラグイン開発は、NocoBase が提供する AI アシスタントによるプラグイン開発機能です。自然言語で要件を伝えるだけで、AI がフロントエンド・バックエンドの完全なコードを自動生成します。データテーブル、API、フロントエンドブロック、権限、国際化をすべてカバーし、より効率的なプラグイン開発体験を提供します。

AI プラグイン開発の機能は [nocobase-plugin-development](https://github.com/nocobase/skills/tree/main/skills/nocobase-plugin-development) Skill によって実現されています。NocoBase CLI で初期化（`nb init`）済みであれば、この Skill は自動的にインストールされます。

## クイックスタート

すでに [NocoBase CLI](../ai/quick-start.md) をインストール済みの場合は、このステップをスキップできます。

### ワンクリック AI インストール

以下のプロンプトを AI アシスタント（Claude Code、Codex、Cursor、Trae など）にコピーして送信すると、インストールと設定が自動的に完了します：

```
NocoBase CLI をインストールして初期化してください：https://docs.nocobase.com/cn/ai/ai-quick-start.md （リンクの内容を直接参照してください）
```

### 手動インストール

```bash
npm install -g @nocobase/cli
nb init --ui
```

ブラウザが自動的にビジュアル設定ページを開き、NocoBase Skills のインストール、データベースの設定、アプリケーションの起動をガイドします。詳細な手順は[クイックスタート](../ai/quick-start.md)をご覧ください。

:::warning 注意

- NocoBase は `client`（v1）から `client-v2` への移行を進めており、現在 `client-v2` はまだ開発中です。AI が生成するクライアントコードは `client-v2` ベースのため、`/v/` パスでのみ使用可能です。先行体験用であり、本番環境での使用は推奨しません。
- AI が生成するコードは必ずしも 100% 正確ではありません。有効化する前にレビューすることをお勧めします。実行時に問題が発生した場合は、エラーメッセージを AI に送信して調査・修正を続けてもらいましょう。通常、数回のやり取りで解決できます。
- 開発には GPT または Claude シリーズの大規模言語モデルの使用を推奨します。最も良い結果が得られます。他のモデルでも使用可能ですが、生成品質に差が出る場合があります。

:::

## 一言から完全なプラグインへ

インストールが完了したら、自然言語で AI に開発したいプラグインを伝えるだけです。以下にいくつかの実際のユースケースを紹介します。AI プラグイン開発の実力を体験してください。

### 一言でウォーターマークプラグインを開発

一つのプロンプトで、AI がフロントエンドのレンダリングロジック、改ざん検知、バックエンドの設定保存 API、プラグイン設定ページを含む完全なウォーターマークプラグインを生成します。

```
nocobase-plugin-development skill を使って NocoBase のウォーターマークプラグインを開発してください。
要件：ページ上に半透明のウォーターマークを表示し、現在のログインユーザー名を表示して、スクリーンショットによる情報漏洩を防止します。
ウォーターマークの DOM が削除されていないか定期的にチェックし、削除された場合は再生成します。
プラグイン設定ページでウォーターマークのテキスト、透明度、フォントサイズを設定できるようにしてください。
プラグイン名は @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>

プロセス全体を通じて、あなたがやることは要件の説明と意思決定だけです。残りは AI が自動で処理します。完全なプロセスを見たい方はこちら → [実践：ウォーターマークプラグインの開発](./watermark-plugin)

### 一言でカスタムフィールドコンポーネントを作成

integer フィールドを星評価で表示したいですか？希望する表示方法を AI に伝えるだけで、カスタム FieldModel を生成し、デフォルトのフィールドレンダリングコンポーネントを置き換えます。

```
nocobase-plugin-development skill を使って NocoBase プラグインを開発してください。名前は @my-scope/plugin-rating です。
カスタムフィールド表示コンポーネント（FieldModel）を作成し、integer 型のフィールドを星アイコンでレンダリングしてください。
1〜5 点に対応し、星をクリックすると評価値を直接変更してデータベースに保存できるようにしてください。
```

![Rating コンポーネントの表示効果](https://static-docs.nocobase.com/20260422170712.png)

その他の機能の使い方については、[サポートされている機能](./capabilities)をご覧ください。

## AI にできること

| やりたいこと                 | AI がやってくれること                                       |
| ---------------------------- | ----------------------------------------------------------- |
| 新しいプラグインを作成する   | フロントエンド・バックエンドのディレクトリ構造を含む完全なスキャフォールドを生成 |
| データテーブルを定義する     | すべてのフィールドタイプとリレーションに対応した Collection 定義を生成 |
| カスタムブロックを作る       | BlockModel + 設定パネル + 「ブロックを追加」メニューへの登録を生成 |
| カスタムフィールドを作る     | FieldModel + フィールドインターフェースへのバインドを生成   |
| カスタム操作ボタンを追加する | ActionModel + ポップアップ/ドロワー/確認ダイアログを生成    |
| プラグイン設定ページを作る   | フロントエンドフォーム + バックエンド API + ストレージを生成 |
| カスタム API を書く          | Resource Action + ルーティング登録 + ACL 設定を生成         |
| 権限を設定する               | ACL ルールを生成し、ロールごとにアクセスを制御              |
| 多言語対応する               | 中国語・英語の言語パックを自動生成                          |
| アップグレードスクリプトを書く | DDL とデータマイグレーションに対応した Migration を生成     |

各機能の詳細説明とプロンプト例 → [サポートされている機能](./capabilities)

## 関連リンク

- [実践：ウォーターマークプラグインの開発](./watermark-plugin) — AI プラグイン開発の完全な実践事例。一言から使えるプラグインへ
- [サポートされている機能](./capabilities) — AI にできるすべてのこと（プロンプト例付き）
- [NocoBase CLI](../ai/quick-start.md) — NocoBase のインストールと管理のためのコマンドラインツール
- [NocoBase CLI リファレンス](../api/cli/index.md) — すべてのコマンドの完全なパラメータ説明
- [プラグイン開発](../plugin-development/index.md) — NocoBase プラグイン開発の完全ガイド
- [AI ビルダークイックスタート](../ai-builder/index.md) — AI で NocoBase アプリケーションを構築する（コード不要）
