mirror of
https://github.com/MervinPraison/PraisonAIUI.git
synced 2026-11-12 01:41:27 -10:00
MervinPraison
3a10f48632
Closes 5 documented gaps from how-to-add-a-feature.md: - aiui.set_custom_js(path) — inject client JS from Python (new /custom.js route, <script> after plugin-loader). Tests: 10/10 - name= kwarg on all 8 form inputs — stable submit-keys for form_action, avoids label collisions. Tests: 18/18 - Component schema registry — aiui.register_component_schema() + GET /api/components/schemas. Built-in schemas auto-derived from ui.py. Tests: 9/9 - /api/features parallelized via asyncio.gather (warm calls now instant) - mkdocs build fixed for pygments 2.20 via docs_hooks.py Other: - form inputs now emit name + data-label attrs so form_action submit handler collects values correctly (bug fix) - radio submit handler only stores the checked radio's value - switch now has hidden checkbox mirror so form_action sees its state - mkdocs --strict passes - Example 28 uses the new APIs (no more DevTools console workaround) - Bump aiui 0.3.107 -> 0.3.108; sync __version__.py Tests: 542/545 pass (3 pre-existing test-isolation failures unrelated).
121 lines
3.8 KiB
Markdown
121 lines
3.8 KiB
Markdown
# Basic Examples
|
|
|
|
Simple examples to get started with PraisonAIUI.
|
|
|
|
## Python Examples Reference
|
|
|
|
Each example teaches exactly **one new concept** — no overlap.
|
|
|
|
| # | Name | Unique Concept | Run |
|
|
|---|---|---|---|
|
|
| 01 | chat | `@reply` + `aiui.say()` — minimal hello-world | `aiui run app.py` |
|
|
| 02 | chat-app | Full lifecycle callbacks (`@welcome`, `@button`, `@profiles`, `@starters`, `@goodbye`) | `aiui run app.py` |
|
|
| 03 | chat-with-ai | OpenAI streaming via `stream_token()` | `aiui run app.py` |
|
|
| 04 | chat-with-praisonai | PraisonAI Agent, `asyncio.to_thread()`, `stream=False` | `aiui run app.py` |
|
|
| 05 | agent-playground | Multi-agent `@profiles` switching | `aiui run app.py` |
|
|
| 06 | dashboard | `@page` decorator, `@on("event")` syntax | `aiui run app.py` |
|
|
| 07 | provider-praisonai | Custom `BaseProvider` subclass, `RunEvent` protocol | `aiui run app.py` |
|
|
| 08 | streaming | PraisonAI Agent streaming via `stream_emitter` | `aiui run app.py` |
|
|
| 09 | widget | Copilot/sidebar mode | `aiui run app.py` |
|
|
| 10 | feature-showcase | All protocol features seeded, `create_app()` | `python app.py` |
|
|
| 11 | ui-integration | Gradio ASGI mount, Streamlit iframe, REST embedding | `python app.py` |
|
|
| 12 | agent-dashboard | OpenClaw-style rendered HTML admin panel | `python app.py` |
|
|
| 13 | real-dashboard | Production dashboard with seeded data | `python app.py` |
|
|
| 14 | all-features | Comprehensive 16-feature API test suite | `python app.py` |
|
|
| 15 | dashboard-test | Dashboard component rendering tests | `aiui run app.py` |
|
|
| 16 | gateway-integration | Gateway WebSocket integration | `aiui run app.py` |
|
|
| 17 | three-column-demo | Three-column layout with sidebar + TOC | `aiui run app.py` |
|
|
| 18 | full-chat | Full-featured chat with all options enabled | `aiui run app.py` |
|
|
| 19 | components-showcase | All 48 UI components demonstrated | `aiui run app.py` |
|
|
| 20 | email-channel | Email channel integration | `aiui run app.py` |
|
|
| 21 | agentmail-bot | Agentmail bot integration | `aiui run app.py` |
|
|
| 22 | agentmail-channel | Agentmail channel setup | `aiui run app.py` |
|
|
| 23 | e2e-components-test | End-to-end component testing | `aiui run app.py` |
|
|
| 24 | custom-design | Custom CSS design system with `set_custom_css()` | `aiui run app.py` |
|
|
| 25 | clean-chat | Clean chat UI — `sidebar=False`, `page_header=False`, blue theme | `aiui run app.py` |
|
|
| 26 | custom-theme-chat | Custom theme registration via `register_theme()` | `aiui run app.py` |
|
|
| 27 | multica-style | Floating chat window, collapsible sidebar, indigo theme | `aiui run app.py` |
|
|
|
|
## Minimal Docs Site
|
|
|
|
The simplest configuration:
|
|
|
|
```yaml
|
|
schemaVersion: 1
|
|
|
|
site:
|
|
title: "My Docs"
|
|
|
|
content:
|
|
docs:
|
|
dir: "./docs"
|
|
|
|
templates:
|
|
docs:
|
|
layout: "ThreeColumnLayout"
|
|
slots:
|
|
main: { type: "DocContent" }
|
|
|
|
routes:
|
|
- match: "/docs/**"
|
|
template: "docs"
|
|
```
|
|
|
|
## With Header and Footer
|
|
|
|
Add branding:
|
|
|
|
```yaml
|
|
schemaVersion: 1
|
|
|
|
site:
|
|
title: "My Project"
|
|
|
|
content:
|
|
docs:
|
|
dir: "./docs"
|
|
|
|
components:
|
|
header:
|
|
type: "Header"
|
|
props:
|
|
logoText: "My Project"
|
|
cta:
|
|
label: "GitHub"
|
|
href: "https://github.com/myorg/myproject"
|
|
|
|
footer:
|
|
type: "Footer"
|
|
props:
|
|
text: "© 2024 My Company"
|
|
|
|
templates:
|
|
docs:
|
|
layout: "ThreeColumnLayout"
|
|
slots:
|
|
header: { ref: "header" }
|
|
left: { type: "DocsSidebar", props: { source: "docs-nav" } }
|
|
main: { type: "DocContent" }
|
|
right: { type: "Toc" }
|
|
footer: { ref: "footer" }
|
|
|
|
routes:
|
|
- match: "/docs/**"
|
|
template: "docs"
|
|
```
|
|
|
|
## Directory Structure
|
|
|
|
```
|
|
my-docs/
|
|
├── aiui.template.yaml
|
|
├── docs/
|
|
│ ├── index.md
|
|
│ ├── getting-started/
|
|
│ │ ├── installation.md
|
|
│ │ └── quickstart.md
|
|
│ └── guides/
|
|
│ └── configuration.md
|
|
└── package.json
|
|
```
|