メインコンテンツまでスキップ

AI エージェント スキル

Reveal SDK には、Claude Code、GitHub Copilot、Cursor などの AI コーディング アシスタントに Reveal を使用した開発方法を教えるエージェント スキル が付属しています。スキルは、指示、リファレンス ページ、スターター コードをまとめたフォルダーで、アシスタントはリクエストに必要な場合にのみそれを読み込みます。スキルをインストールすると、アシスタントは Web を検索して API を推測するのではなく、厳選された Reveal のガイダンスに基づいて作業します。

スキルは 2 つあります。

  • reveal-embed: 独自のアプリケーションに Reveal ダッシュボードを埋め込む作業を支援します。
  • reveal-dashboard-authoring: Reveal DOM を使用して、コードで .rdash ダッシュボード ファイルを作成、編集、調査します。

スキルは、Reveal.Sdk GitHub リポジトリの skills/ フォルダーにあります。

reveal-embed スキル​

reveal-embed は、独自のアプリケーションに Reveal ダッシュボードを埋め込む作業を支援します。次の内容を扱います。

  • サーバーのセットアップ: ASP.NET Core、Node.js (Express、NestJS、CommonJS、ES モジュール)、Java (Spring Boot、Jakarta EE 9 コンテナー)
  • クライアントのセットアップ: プレーンな HTML/JavaScript、Angular、React、Vue、Web コンポーネント ラッパー
  • データ ソース: SQL Server、PostgreSQL、Snowflake、REST、Excel/CSV、インメモリ データなど。接続の詳細はサーバー上に保持されます。
  • ユーザー コンテキストとセキュリティ: サインイン中のユーザーをサーバーに渡す方法、マルチテナンシー、ユーザーごとの資格情報。
  • ダッシュボード: ダッシュボードの読み込み、保存、作成、およびファイル システム外への保存。
  • テーマ設定とデータ エクスポート
  • トラブルシューティング: 空白またはスタイルが適用されないビュー、CORS エラー、空のウィジェット、エクスポートの失敗など、最も一般的なセットアップの問題。

また、アシスタントがアプリケーションに合わせて調整する、最小限の ASP.NET Core および Node.js プロジェクトも含まれています。これらのプロジェクトでは、ダッシュボードの表示、作成、保存ができ、保存したダッシュボードはユーザーごとに分けて管理されます。アプリのサインインを接続するまで、認証されていないリクエストは拒否されます。ローカルですぐに試すには --anonymous-demo を付けて起動します。この場合、匿名アクセスは localhost からのみ許可されます。

reveal-dashboard-authoring スキル​

reveal-dashboard-authoring は、ダッシュボードをコードとして扱います。.rdash ファイルのオブジェクト モデルである Reveal DOM を使用します。Reveal DOM は、TypeScript および JavaScript (Node.js またはブラウザー) 向けの @revealbi/dom と、.NET 向けの Reveal.Sdk.Dom として提供されています。次の内容を扱います。

  • ダッシュボードの作成: コード、テンプレート、仕様、AI の出力からの作成。データ ソース、チャート、KPI、グリッド、ピボット、マップ、ダッシュボード フィルター、書式設定、リンクに対応します。
  • ダッシュボードの編集: 表示形式の名前変更、削除、並べ替え、追加、データ ソースのリダイレクト、ダッシュボード間での表示形式のコピー。
  • ダッシュボードの調査: 任意の .rdash ファイルに含まれるデータ ソース、フィールド、フィルター、表示形式の一覧表示。
  • ダッシュボードの配信: ファイルとして、リクエスト時にサーバーのダッシュボード プロバイダーから、RevealView に直接、またはデータベース内の JSON として。
  • 一括移行: 保存済みの多数のダッシュボードを対象とする移行。

このスキルは常に最新バージョンの DOM ライブラリを使用し、アシスタントに記憶に頼らず、インストールされている型に基づいてコードを書かせます。また、日付フィルターとフィールドのバインド方法、新しい日付フィルターが既定で表示する内容、読み込んだダッシュボードと新規作成したダッシュボードの違いなど、間違えやすく表示時にしか発覚しないライブラリの動作も把握しています。

さらに、例とテストを含むすぐに実行できる TypeScript および .NET プロジェクト、任意のクラスについてインストール済みの API を表示するツール、ダッシュボードの内容を一覧表示するツール、サンプル データを備えたローカル プレビュー サーバーも含まれています。アシスタントはコードを書き、型チェックを行って実行します。その後、実際の Reveal サーバーでダッシュボードを表示し、スクリーンショットとウィジェットのエラー (クラッシュする、空で返される、描画が完了しない視覚化を含む) を確認してから結果を返します。プレビュー サーバーは匿名かつ読み取り専用で、localhost でのみ待ち受けます。開発用のツールであり、デプロイしないでください。アシスタントはこのサーバーをリポジトリの外で実行し、完了したら停止します。

このスキルは DOM のみを介して動作します​

アシスタントがダッシュボードの Dashboard.json を自分で書き込んだり修正したりすることはありません。Reveal DOM で依頼内容を実現できない場合や、DOM 経由で保存するとダッシュボードの一部の内容が失われる場合、アシスタントは何かを書き込む前に停止します。不足している点とそのコストを説明し、ライブラリの GitHub リポジトリ向けの課題の下書きを提案して、どう進めるかを確認します。選択肢は、その部分をスキップする、Reveal エディターで変更する、1 回限りの作業として JSON を手動で編集する、のいずれかです。JSON を編集するのは、ユーザーがそう指示した場合のみです。

たとえば、Reveal エディターで作成したダッシュボードを変更する前に、アシスタントは DOM 経由の往復で失われる設定 (カスタムの日付形式、非表示のフィールド、フィールドの並べ替え順など) を一覧にするチェックを実行します。チェックで見つかった場合は、次の対応をユーザーが決定します。DOM がまだサポートしていない要求 (集計値によるカテゴリの上位 N 件のチャート、時系列の視覚化 (まだ表示されません)、TypeScript での 1 つのダッシュボード上の複数の日付フィルターなど) でも同様に対応します。同じライブ データを表示できる代替手段 (日別の折れ線チャートなど) が DOM にある場合、アシスタントはそれを使用し、その旨を伝えます。

スキルはこうした既知の制限の一覧を保持しており、それぞれがライブラリの GitHub リポジトリ内の課題にリンクされています。ライブラリのリリースで一部が修正された場合は、スキルのテストがそれを検知します。まだ追跡されていない制限に遭遇した場合は、使用しているライブラリのリポジトリ (revealbi-dom (TypeScript および JavaScript 向け) または Reveal.Sdk.Dom (.NET 向け)) で課題を報告してください。アシスタントが下書きを作成できます。

注記

接続の詳細や資格情報をダッシュボード ファイルに含めるべきではありません。このスキルが作成するダッシュボードには、ホスト、データベース、URL のプレースホルダーのみが含まれ、実際の値は実行時にサーバーのデータ ソース プロバイダーが提供します。この仕組みは reveal-embed スキルで設定します。

スキルのインストール​

1 つのスキルだけでも、両方でもインストールできます。Claude Code プラグインでは両方がインストールされます。

GitHub CLI 2.90 以降が必要です。

gh skill install RevealBi/Reveal.Sdk reveal-embed
gh skill install RevealBi/Reveal.Sdk reveal-dashboard-authoring

スキルの使用​

スキルを名前で呼び出す必要はありません。プロジェクト内の Reveal についてアシスタントに質問すると、アシスタントが適切なスキルを自動的に読み込みます。次に例を示します。

  • 「この ASP.NET Core アプリに Reveal ダッシュボードを追加し、それを表示する React ページも追加してください。」
  • 「接続文字列をブラウザーに公開せずに、Reveal を SQL Server データベースに接続してください。」
  • 「各テナントが Reveal ダッシュボードで自分の注文のみを表示できるようにしてください。」
  • 「RevealView が空白で、コンソールに CORS エラーが表示されます。何が問題でしょうか?」

これらは reveal-embed を読み込みます。アシスタントはまず、サーバーとクライアントのスタックを確認し、1 つのダッシュボードが表示される状態にします。その後、データ、セキュリティ、仕上げの順に追加します。最後にチェックリストで確認します。ダッシュボードがブラウザーで表示されること、資格情報がサーバー上に保持されること、CORS が制限されていること、ライセンス キーがソース管理に含まれていないことを確認します。

  • 「注文テーブルから地域別の売上を表示する Reveal ダッシュボードを生成するスクリプトを書いてください。」
  • 「dashboards/Sales.rdash にカテゴリ別売上の円チャートを追加し、Orders グリッドを削除してください。」
  • 「Sales.rdash には何が含まれていますか? チャートと、それぞれが使用するフィールドを一覧にしてください。」
  • 「@revealbi/dom を使用して、日付フィルターを縦棒チャートに接続するにはどうすればよいですか?」
  • 「dashboards/Sales.rdash に製品別売上の棒チャートを追加してください。このダッシュボードは営業チームが Reveal エディターで作成したものです。」

これらは reveal-dashboard-authoring を読み込みます。アシスタントはリポジトリ内に小さな作業用プロジェクトを用意し、インストールされているライブラリの API を確認して、コードを書いて実行します。その後、結果を表示して確認してから報告します。最後のプロンプトでは、まずエディターで作成したダッシュボードを DOM 経由で保存すると何が失われるかを確認し、失われるものがある場合は、先に進む前にユーザーに確認します。

ヒント

スキルは、依存性の注入、構成、コード スタイルなど、プロジェクトの既存の規約に従います。アシスタントがプロジェクト ファイルを読み取れるように、アプリケーションのルート フォルダーからアシスタントを実行してください。

reveal-embed スキルの効果​

さまざまなアプリで、reveal-embed スキルを使用した場合と使用しない場合の両方で、同じ埋め込みタスクを実行しました。各実行は、ブラウザー チェック、セキュリティ プローブ、静的コード チェック、LLM 判定など、複数の指標で評価しました。

スキルなしスキルあり
品質
判定スコア21/30 (70%)28/30 (93%)
工数とコスト
実時間72 分36 分
エージェントのターン数439275
ツール呼び出し数465270
処理されたトークン (キャッシュ読み取りを含む)76.9M30.4M
生成されたトークン (思考を含む)281k150k
API 換算コスト$31.27$13.71
Reveal に関する知識の入手元
Web 検索とドキュメント取得230
情報源help.revealbi.io、GitHub サンプル、検索結果スキルのリファレンス ページ

このテストでは、スキルを使用したエージェントは、最も重要な点で正しい結果を出す頻度が高くなりました。作業は約半分の時間と半分未満のコストで完了し、Web 検索の代わりに厳選されたガイダンスを使用しました。

注記

これらの数値は社内テストによるもので、説明のみを目的として掲載しています。保証やベンチマークではありません。結果は、AI モデルとそのバージョン、コーディング アシスタントとその設定、プロンプト、プロジェクトのスタックと既存のコード、現在のモデル料金によって異なります。また、AI エージェントは非決定的であるため、同じタスクでも実行ごとに結果が異なる場合があります。

reveal-dashboard-authoring スキルの効果​

小さな Node.js プロジェクトで、Claude Code (Claude Sonnet 5) に 5 つのダッシュボード タスクを、reveal-dashboard-authoring スキルを使用した場合と使用しない場合の両方で、それぞれ 2 回ずつ実行させました。各結果は Reveal サーバーで表示し、タスクが求めた内容と照合したうえで、LLM 判定により 0 から 10 で採点しました。表は 2 回の実行の平均を示しています。

タスクスキルなしスキルあり
日付フィルターと地域フィルターを備えたダッシュボードを、売上 API から生成する$1.86、7.2 分、判定 7.0。1 回の実行で、データのないチャートが納品され、成功と報告されました。$0.90、3.1 分、判定 8.5。 2 回とも、データ付きで表示されました。
ファイルに資格情報を含めずに、SQL Server 上の .NET ダッシュボードを生成する$2.15、10.5 分、判定 6.5。1 回の実行で、サーバーが許可リストに登録できない生成済み ID が残りました。$0.85、7.3 分、判定 9.0
既存のダッシュボードの内容を一覧表示する$0.34、1.6 分、判定 9.0$0.29、1.0 分、判定 9.0
信頼できない AI 生成の仕様からダッシュボードを構築する$1.48、7.5 分、判定 9.0$1.51、8.8 分、判定 9.0
Reveal エディターで作成したダッシュボードを編集する$0.71、2.7 分、判定 9.0。 ダッシュボードの JSON を直接編集し、すべての設定が保持されました。$1.49、4.6 分、判定 7.0。DOM 経由で保存したため、警告なしにカスタムの日付形式が失われました。
5 つのタスク全体1 回の実行あたり $1.31、5.9 分、判定 8.11 回の実行あたり $1.01、5.0 分、判定 8.5

スキルが最も役立ったのは、アシスタントがダッシュボードを生成する場合で、約 2 倍の速さで、コストは約半分でした。ダッシュボードの読み取りや、信頼できない仕様からの構築では差はなく、アシスタントは単独でも適切に処理します。編集の結果が、スキルがエディターで作成したダッシュボードを編集する前に損失を確認してユーザーに尋ねるようになった理由です。黙って編集したり、JSON を自分で編集したりすることはありません。

次に、問題が発生したテストやライブラリの制限に当たったテストを、更新したスキルで再実行しました。

リクエストスキルなし更新したスキルあり
エディターで作成したダッシュボードを編集する確認なしに JSON を直接編集した (2 回中 2 回)失われる内容を一覧にし、進め方を確認した (4 回中 4 回)
日別売上の時系列チャート描画されないチャートが、完了として報告された (2 回中 2 回)表示される日別の折れ線チャートと、その理由の説明 (2 回中 2 回)
売上上位 3 製品のチャート誤ったチャートまたは空のチャートが、完了として報告された (2 回中 2 回)DOM では表現できないことを説明し、選択肢を提示した (3 回中 3 回)

最後の行については、これらと同じタスクを実行している間にスキルの文言を調整したため、測定された割合ではなく、意図した動作を示すものとして扱ってください。

注記

これらの数値は、1 つのプロジェクトと 1 つのモデルでタスクごとに 2 回実行した社内テストによるもので、最初の表にはスキルの以前のバージョンを使用しています。説明のみを目的として掲載しています。保証やベンチマークではありません。結果は、AI モデルとそのバージョン、コーディング アシスタントとその設定、プロンプト、プロジェクトのスタックと既存のコード、現在のモデル料金によって異なります。また、AI エージェントは非決定的であるため、同じタスクでも実行ごとに結果が異なる場合があります。コストは API 換算です。

フィードバック​

スキルが誤ったガイダンスや古いガイダンスを提供する場合は、Reveal.Sdk リポジトリで課題を報告し、スキル名と使用したプロンプトを含めてください。DOM ライブラリ自体の制限については、revealbi-dom または Reveal.Sdk.Dom リポジトリを使用してください。