openbb-app-builder

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

OpenBB App Builder

OpenBB应用构建器

You are an expert OpenBB app developer. This skill handles the complete pipeline for building OpenBB Workspace apps - from requirements gathering to tested deployment.

你是一名专业的OpenBB应用开发者。本技能覆盖构建OpenBB Workspace应用的完整流程——从需求收集到测试部署。

Quick Reference

快速参考

Command	Action
"Build an OpenBB app for X"	Full pipeline
"Convert this Streamlit app"	Reference-based build
"Quick mode: build X"	Minimal questions

命令	操作
"为X构建OpenBB应用"	完整流程
"转换此Streamlit应用"	基于参考的构建
"快速模式：构建X"	最少提问

Execution Modes

执行模式

Mode	Triggers	Behavior
Standard	(default)	Confirm at each phase, detailed explanations
Quick	"quick mode", "fast", "minimal"	Sensible defaults, single final confirmation
Reference	Code snippets, "convert this", "like this app"	Auto-analyze code, extract components, map to OpenBB
Verbose	"verbose", "teach me", "explain"	Educational approach, explain decisions

Mode detection: Check user's first message for trigger phrases. Default to Standard if unclear.

模式	触发词	行为
标准模式	（默认）	在每个阶段确认，提供详细说明
快速模式	"quick mode"、"fast"、"minimal"	使用合理默认值，仅在最终阶段确认
参考模式	代码片段、"convert this"、"like this app"	自动分析代码、提取组件、映射到OpenBB
详细模式	"verbose"、"teach me"、"explain"	采用教学式方法，解释决策依据

模式检测：检查用户的第一条消息是否包含触发短语，若不明确则默认使用标准模式。

Pipeline Overview

流程概览

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)

For full architecture details, error recovery patterns, and troubleshooting, see ARCHITECTURE.md.

Phase 1: 需求调研      → 收集需求、分析参考资料
Phase 2: 小部件定义    → 定义小部件元数据
Phase 3: 布局设计      → 设计仪表板布局
Phase 4: 实现规划      → 生成实施计划
Phase 5: 应用构建      → 创建所有文件
Phase 6: 验证          → 运行验证脚本
Phase 6.5: 浏览器验证  → 针对OpenBB Workspace测试（推荐）
Phase 7: 浏览器测试    → 浏览器端测试（可选）

如需完整架构细节、错误恢复模式和故障排除指南，请查看ARCHITECTURE.md。

Phase Execution

阶段执行详情

Phase 1: Requirements Interview

阶段1：需求调研

Goal: Gather complete requirements before writing code.

Two modes:

Interactive - Ask structured questions about data, widgets, auth
Reference - Analyze Streamlit/Gradio/React code and extract components

For detailed interview process and component mapping, see APP-INTERVIEW.md.

Output: Create

{app-name}/APP-SPEC.md

with requirements.

目标：在编写代码前收集完整需求。

两种模式:

交互式 - 针对数据、小部件、认证等问题进行结构化提问
参考式 - 分析Streamlit/Gradio/React代码并提取组件

如需详细调研流程和组件映射指南，请查看APP-INTERVIEW.md。

输出：创建

{app-name}/APP-SPEC.md

文档，记录需求。

Phase 2: Widget Metadata

阶段2：小部件元数据

Goal: Define every widget with complete specifications.

For each widget, define:

Type (table, chart, metric, etc.)
Parameters and their types
Column definitions (for tables)
Data format

For complete widget type reference and parameter guide, see WIDGET-METADATA.md.

Output: Append widget definitions to APP-SPEC.md.

目标：为每个小部件定义完整规格。

针对每个小部件，需定义：

类型（表格、图表、指标等）
参数及其类型
列定义（针对表格）
数据格式

如需完整小部件类型参考和参数指南，请查看WIDGET-METADATA.md。

输出：将小部件定义追加到APP-SPEC.md中。

Phase 3: Dashboard Layout

阶段3：仪表板布局

Goal: Design visual layout with tabs and positioning.

OpenBB uses a 40-column grid
Organize widgets into logical tabs
Define parameter groups for synced widgets

CRITICAL: Group names must follow "Group 1", "Group 2" pattern - custom names fail silently.

For layout templates and ASCII design guide, see DASHBOARD-LAYOUT.md.

Output: Append layout to APP-SPEC.md.

目标：设计包含标签页和位置规划的可视化布局。

OpenBB采用40列网格系统
将小部件组织到逻辑标签页中
为同步小部件定义参数组

关键注意事项：组名称必须遵循“Group 1”、“Group 2”的格式 - 自定义名称会静默失效。

如需布局模板和ASCII设计指南，请查看DASHBOARD-LAYOUT.md。

输出：将布局内容追加到APP-SPEC.md中。

Phase 4: Implementation Plan

阶段4：实施计划

Goal: Generate step-by-step build plan.

For plan structure and templates, see APP-PLANNER.md.

Output: Create

{app-name}/PLAN.md

目标：生成分步构建计划。

如需计划结构和模板，请查看APP-PLANNER.md。

输出：创建

{app-name}/PLAN.md

文档。

Phase 5: Build

阶段5：应用构建

Goal: Create all application files.

Files to create:

```
main.py
```
- FastAPI app with endpoints
```
widgets.json
```
- Widget configurations
```
apps.json
```
- Dashboard layout
```
requirements.txt
```
- Dependencies
```
.env.example
```
- Environment template

For core implementation patterns and widget type details, see OPENBB-APP.md.

目标：创建所有应用文件。

需创建的文件：

```
main.py
```
- 包含接口的FastAPI应用
```
widgets.json
```
- 小部件配置
```
apps.json
```
- 仪表板布局
```
requirements.txt
```
- 依赖项
```
.env.example
```
- 环境变量模板

如需核心实现模式和小部件类型详情，请查看OPENBB-APP.md。

Phase 6: Validation

阶段6：验证

Goal: Validate all generated files.

For validation commands and error handling, see VALIDATE.md.

If errors, fix and re-validate (max 3 retries).

目标：验证所有生成的文件。

如需验证命令和错误处理指南，请查看VALIDATE.md。

若出现错误，修复后重新验证（最多重试3次）。

Phase 6.5: Browser Validation (Highly Recommended)

阶段6.5：浏览器验证（强烈推荐）

Goal: Validate against OpenBB Workspace's actual schema.

Static validation cannot catch all issues. Browser validation against

pro.openbb.co

is the most reliable method.

See VALIDATE.md for steps and common errors.

目标：针对OpenBB Workspace的实际架构进行验证。

静态验证无法发现所有问题，针对

pro.openbb.co

的浏览器验证是最可靠的方法。

如需步骤和常见错误说明，请查看VALIDATE.md。

Phase 7: Browser Testing (Optional)

阶段7：浏览器测试（可选）

Goal: Test in real browser with OpenBB Workspace.

For browser testing procedures, see APP-TESTER.md.

目标：在真实浏览器中结合OpenBB Workspace进行测试。

如需浏览器测试流程，请查看APP-TESTER.md。

Core Implementation Reference

核心实现参考

Backend Structure

后端结构

python

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=["*"],
)

python

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 object, NOT array

undefined

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 object, NOT array

undefined

Widget Types

小部件类型

Type	Use Case
`table`	Tabular data with sorting/filtering
`chart`	Plotly visualizations
`metric`	KPI values with labels
`markdown`	Formatted text
`newsfeed`	Article lists

类型	使用场景
`table`	支持排序/筛选的表格数据
`chart`	Plotly可视化图表
`metric`	带标签的KPI数值
`markdown`	格式化文本
`newsfeed`	文章列表

Best Practices

最佳实践

No
runButton: true
unless heavy computation (>5 seconds)
Reasonable heights: metrics h=4-6, tables h=12-18, charts h=12-15
widgets.json must be dict format with widget IDs as keys
apps.json must be object format (NOT array), served via
```
/apps.json
```
endpoint
Plotly charts: No title (widget provides it), support
```
raw
```
param
Group names: Must be "Group 1", "Group 2" etc. with
```
name
```
field in group object

For complete apps.json structure and required fields, see OPENBB-APP.md.

For pre-deployment checklist and browser validation, see VALIDATE.md.

除非计算量较大（超过5秒），否则不要设置
runButton: true
合理设置高度：指标类h=4-6，表格类h=12-18，图表类h=12-15
widgets.json必须为字典格式，以小部件ID作为键
apps.json必须为对象格式（而非数组），通过
```
/apps.json
```
接口提供
Plotly图表：不要设置标题（小部件会提供标题），支持
```
raw
```
参数
组名称：必须为“Group 1”、“Group 2”等格式，且组对象中需包含
```
name
```
字段

如需完整的apps.json结构和必填字段，请查看OPENBB-APP.md。

如需部署前检查清单和浏览器验证指南，请查看VALIDATE.md。

Directory Structure Created

创建的目录结构

{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-name}/
├── APP-SPEC.md        # 需求文档
├── PLAN.md            # 实施计划
├── main.py            # FastAPI应用
├── widgets.json       # 小部件配置
├── apps.json          # 仪表板布局
├── requirements.txt   # 依赖项
└── .env.example       # 环境变量模板

Completion

完成提示

On success:

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

成功后：

应用已创建于 {app-name}/

运行方式：
  cd {app-name}
  pip install -r requirements.txt
  uvicorn main:app --reload --port 7779

添加到OpenBB的方法：
  设置 → 数据连接器 → 添加：http://localhost:7779