openbb-app-builder

OpenBB アプリビルダー

あなたは OpenBB アプリ開発のエキスパートです。このスキルでは、要件の確認からテスト済みのデプロイまで、OpenBB Workspace アプリ構築の全工程をサポートします。

クイックリファレンス

コマンド	操作
「X 用の OpenBB アプリを構築して」	全工程
「この Streamlit アプリを変換して」	参照ベースの構築
「クイックモード：X を構築して」	質問を最小限に抑える

実行モード

モード	トリガー	動作
Standard	（デフォルト）	各フェーズで確認し、詳しく説明します
Quick	「クイックモード」、「速く」、「最小限」	妥当なデフォルトを使用し、最後に一度だけ確認します
Reference	コードスニペット、「これを変換して」、「このアプリのように」	コードを自動分析し、コンポーネントを抽出して、OpenBB に対応付けます
Verbose	「詳しく」、「教えて」、「説明して」	学習向けの進め方で、判断の理由を説明します

モードの判定：ユーザーの最初のメッセージにトリガーフレーズが含まれているか確認します。不明な場合は Standard をデフォルトとして使用します。

パイプラインの概要

Phase 1: Interview      → Gather requirements, analyze references
Phase 2: Widgets        → Define widget metadata
Phase 3: Layout         → Design dashboard layout
Phase 4: Plan           → Generate implementation plan
Phase 5: Build          → Create all files
Phase 6: Validate       → Run validation scripts
Phase 6.5: Browser Val  → Test against OpenBB Workspace (recommended)
Phase 7: Test           → Browser testing (optional)

アーキテクチャの詳細、エラー復旧パターン、トラブルシューティングについては、ARCHITECTURE.md を参照してください。

フェーズの実行

フェーズ 1：要件のヒアリング

目標：コードを書く前に、要件をすべて確認します。

2 つのモード：

1. 対話型 - データ、ウィジェット、認証について、構成された質問をします
2. 参照型 - Streamlit／Gradio／React のコードを分析し、コンポーネントを抽出します

詳細なヒアリング手順とコンポーネントの対応付けについては、APP-INTERVIEW.md を参照してください。

出力：要件を記載した {app-name}/APP-SPEC.md を作成します。

---

フェーズ 2：ウィジェットのメタデータ

目標：すべてのウィジェットについて、仕様を完全に定義します。

各ウィジェットについて、以下を定義します：

• 種類（テーブル、チャート、メトリクスなど）
• パラメーターとその型
• 列の定義（テーブルの場合）
• データ形式

ウィジェットの種類とパラメーターの完全なリファレンスについては、WIDGET-METADATA.md を参照してください。

出力：ウィジェット定義を APP-SPEC.md に追記します。

---

フェーズ 3：ダッシュボードのレイアウト

目標：タブと配置を使って、視覚的なレイアウトを設計します。

• OpenBB では 40 列のグリッドを使用します
• ウィジェットを論理的なタブに整理します
• 同期するウィジェット用のパラメーターグループを定義します

重要：グループ名は「Group 1」、「Group 2」の形式にする必要があります。独自の名前を使うと、エラーが表示されずに失敗します。

レイアウトのテンプレートと ASCII による設計ガイドについては、DASHBOARD-LAYOUT.md を参照してください。

出力：レイアウトを APP-SPEC.md に追記します。

---

フェーズ 4：実装計画

目標：手順ごとの構築計画を作成します。

計画の構成とテンプレートについては、APP-PLANNER.md を参照してください。

出力：{app-name}/PLAN.md を作成します。

---

フェーズ 5：構築

目標：アプリケーションに必要なすべてのファイルを作成します。

作成するファイル：

• main.py - エンドポイントを備えた FastAPI アプリ
• widgets.json - ウィジェットの設定
• apps.json - ダッシュボードのレイアウト
• requirements.txt - 依存関係
• .env.example - 環境変数のテンプレート

実装の基本パターンとウィジェットの種類の詳細については、OPENBB-APP.md を参照してください。

---

フェーズ 6：検証

目標：生成されたすべてのファイルを検証します。

検証コマンドとエラー処理については、VALIDATE.md を参照してください。

まずスキーマ検証を実行します。その後、デフォルトではエンドポイントも検証するかユーザーに尋ね、Workspace でアプリを開く前に各 API ルートがデータを返すことを確認します。

推奨する質問：

• 「バックエンドを起動して、ライブエンドポイントも検証しますか？アプリは読み込まれるのにウィジェットにデータが表示されないケースを見つけられます。」

ユーザーが同意した場合：

• バックエンドをローカルで起動します
• validate_endpoints.py を実行します
• エンドポイントのエラーが見つかった場合は修正して再検証します

エラーが発生した場合は、修正して再検証します（最大 3 回）。

フェーズ 6.5：ブラウザー検証（強く推奨）

目標：OpenBB Workspace の実際のスキーマに照らして検証します。

静的検証ではすべての問題を検出できません。pro.openbb.co を使ったブラウザー検証が最も確実な方法です。

手順とよくあるエラーについては、VALIDATE.md を参照してください。

---

フェーズ 7：ブラウザーテスト（任意）

目標：OpenBB Workspace を使って実際のブラウザーでテストします。

ブラウザーテストの手順については、APP-TESTER.md を参照してください。

---

コア実装リファレンス

バックエンド構成

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware
import json
from pathlib import Path

app = FastAPI()

app.add_middleware(
    CORSMiddleware,
    allow_origins=[
        "https://pro.openbb.co",
        "https://pro.openbb.dev",
        "http://localhost:1420"
    ],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

# Load apps.json at startup
APPS_FILE = Path(__file__).parent / "apps.json"
with open(APPS_FILE) as f:
    APPS_CONFIG = json.load(f)

@app.get("/widgets.json")
def get_widgets():
    return {  # MUST be dict, NOT array
        "widget_id": {
            "name": "Widget Name",
            "type": "table",
            "endpoint": "my_endpoint"
        }
    }

@app.get("/apps.json")
def get_apps():
    return APPS_CONFIG  # MUST be an array of app objects

ウィジェットの種類

種類	用途
table	並べ替えやフィルタリングが可能な表形式データ
chart	Plotly による可視化
metric	ラベル付き KPI 値
markdown	書式設定されたテキスト
newsfeed	記事一覧

ベストプラクティス

1. 重い計算（5 秒超）が必要な場合を除き、runButton: true は使用しないでください
2. 適切な高さを設定します。指標は h=4-6、テーブルは h=12-18、チャートは h=12-15 です
3. widgets.json は、ウィジェット ID をキーとする dict 形式である必要があります
4. apps.json は配列形式である必要があり、/apps.json エンドポイント経由で提供されます。アプリオブジェクトはここで提供されます。
5. Plotly チャートにはタイトルを設定しないでください（ウィジェットがタイトルを表示します）。raw パラメーターをサポートしてください
6. グループ名は「Group 1」、「Group 2」などにし、グループオブジェクト内に name フィールドを指定する必要があります
7. テーブルのメタデータには columns や data.columnsDefs ではなく、data.table.columnsDefs を使用してください

apps.json の構造と必須フィールドの詳細については、OPENBB-APP.md を参照してください。

デプロイ前のチェックリストとブラウザー検証については、VALIDATE.md を参照してください。

---

作成されるディレクトリ構成

{app-name}/
├── APP-SPEC.md        # Requirements
├── PLAN.md            # Implementation plan
├── main.py            # FastAPI application
├── widgets.json       # Widget configs
├── apps.json          # Dashboard layout
├── requirements.txt   # Dependencies
└── .env.example       # Environment template

---

完了

成功した場合：

App created at {app-name}/

To run:
  cd {app-name}
  pip install -r requirements.txt
  uvicorn main:app --reload --port 7779

To add to OpenBB:
  Settings → Data Connectors → Add: http://localhost:7779