mirror of
https://github.com/MervinPraison/PraisonAIUI.git
synced 2026-11-07 05:56:17 -10:00
75fb931a23
* fix: update tutorial namespace references in examples - Fixed stale chat-yaml-* references to use current yaml/* paths - Updated 12-playground title to clarify agents style usage - Ensures curriculum progression comments are accurate Fixes #73 * fix: resolve namespace collisions in tutorial examples (fixes #73) - Move yaml/02-clean-chat to yaml/03-clean-chat to resolve collision with yaml/02-profiles - Move python/19-email-bot to python/20-email-bot to resolve collision with python/19-components-showcase - Shift all subsequent numbered examples to maintain monotonic progression - Update stale comments referencing chat-yaml-* namespaces to proper yaml/* paths - Fix cross-references between YAML and Python examples Generated with [Claude Code](https://claude.ai/code) Co-authored-by: Mervin Praison <[email protected]> --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Mervin Praison <[email protected]> Co-authored-by: MervinPraison <[email protected]>
2.7 KiB
2.7 KiB
Example 28 — Full Extensibility Showcase
Demonstrates every extension point in PraisonAIUI.
Extension Points Demonstrated
| # | Extension | Where | Side |
|---|---|---|---|
| 1 | @aiui.page() |
app.py |
Server |
| 2 | aiui.form_action() |
app.py |
Server (returns dict) |
| 3 | @aiui.register_page_action() |
app.py |
Server (form handler) |
| 4 | window.aiui.registerView() |
plugin.js |
Client |
| 5 | window.aiui.registerComponent() |
plugin.js |
Client |
| 6 | Custom component type (timeline) |
app.py + plugin.js |
Both |
| 7 | Theme / branding / brand color | app.py |
Server |
Endpoints Exercised
| Method | Endpoint | Purpose |
|---|---|---|
GET |
/api/health |
Server health check |
GET |
/api/pages |
List all registered pages |
GET |
/api/pages/{id}/data |
Get a page's rendered components |
POST |
/api/pages/{id}/action |
Submit a form-action from aiui.form_action() |
GET |
/api/features |
List all registered feature protocols |
GET |
/api/theme |
Get current theme variables |
GET |
/api/overview |
Dashboard statistics |
Run
python app.py
# Then visit: http://localhost:8082
Testing the custom component + custom view
The timeline component and the custom-view page are client-side extensions.
app.py loads plugin.js automatically via aiui.set_custom_js() — no DevTools paste required.
- Open http://localhost:8082 in the browser
- Navigate to Custom Component → the timeline renders as a styled list
- Navigate to Client-Only View → a JS-rendered clock appears
Note:
aiui.set_custom_js(path)injects client-side JS from a file path at page load. Seedocs/features/how-to-add-a-feature.mdfor the extension API contract.
Testing the form action
- Navigate to Contact Form
- Fill in the form (Name / Email / Age / Role / Newsletter / Notes)
- Click Save Contact
- The form POSTs to
/api/pages/contact-form/action - The server-side
@aiui.register_page_action("contact-form")handler appends the contact to an in-memory list and returns{"status": "saved", ...} - Reload the page — the contact appears in the table below the form
Curl the endpoints
# Health
curl http://localhost:8082/api/health
# All pages
curl http://localhost:8082/api/pages
# Overview page data
curl http://localhost:8082/api/pages/demo-overview/data
# Submit the contact form
curl -X POST http://localhost:8082/api/pages/contact-form/action \
-H "Content-Type: application/json" \
-d '{"Name":"Jane","Email":"[email protected]","Age":30,"Role":"PM"}'
# Features
curl http://localhost:8082/api/features
# Theme
curl http://localhost:8082/api/theme