PraisonAIUI/docs/examples/basic.html

<!doctype html>
<html lang="en">

<head>
  <link rel="sitemap" type="application/xml" href="/sitemap.xml" />
  <script id="aiui-canonical-url">(function(){var p=location.pathname.replace(/\/+$/, '')||'/';if(p!==location.pathname){history.replaceState(null,'',p+location.search+location.hash);}})();</script>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="description" content="Simple examples to get started with PraisonAIUI." />
  <meta name="robots" content="index, follow" />
  <meta property="og:type" content="website" />
  <meta property="og:locale" content="en_US" />
  <link rel="icon" type="image/svg+xml" href="/icon.svg" />
  <title>Basic Examples | PraisonAIUI Docs</title>
  <script>
    (function(){try{var t=localStorage.getItem('aiui-theme-preference');var d=true;if(t==='dark'||(t==='system'&&matchMedia('(prefers-color-scheme: dark)').matches)||(!t&&d))document.documentElement.classList.add('dark');else if(t==='light')document.documentElement.classList.remove('dark');}catch(e){}})();
  </script>
  <link rel="stylesheet" href="/assets/theme.css">
  <script type="module" crossorigin src="/assets/index.js"></script>
  <link rel="stylesheet" crossorigin href="/assets/index.css">
  <link rel="canonical" href="https://ui.praison.ai/docs/examples/basic" />
  <meta property="og:title" content="Basic Examples | PraisonAIUI Docs" />
  <meta property="og:description" content="Simple examples to get started with PraisonAIUI." />
  <meta property="og:url" content="https://ui.praison.ai/docs/examples/basic" />
  <meta property="og:type" content="article" />
  <meta property="og:image" content="https://ui.praison.ai/icon.svg" />
  <meta name="twitter:card" content="summary" />
  <meta name="twitter:title" content="Basic Examples | PraisonAIUI Docs" />
  <meta name="twitter:description" content="Simple examples to get started with PraisonAIUI." />
  <meta name="robots" content="index, follow" />
  <script type="application/ld+json">{"@context": "https://schema.org", "@type": "TechArticle", "headline": "Basic Examples", "description": "Simple examples to get started with PraisonAIUI.", "url": "https://ui.praison.ai/docs/examples/basic", "isPartOf": {"@type": "WebSite", "name": "PraisonAIUI Docs", "url": "https://ui.praison.ai/"}}</script>
</head>

<body>
  <div id="root"><noscript><nav aria-label="Documentation"><ul><li><a href="https://ui.praison.ai/docs/health-endpoints">Health Endpoints Guide</a></li><li><a href="https://ui.praison.ai/docs/index">PraisonAIUI</a></li><li><a href="https://ui.praison.ai/docs/testing">Testing</a></li><li><a href="https://ui.praison.ai/docs/adr">Adr</a></li><li><a href="https://ui.praison.ai/docs/adr/replay-view-clean-room">ADR 0001: PraisonAI Replay view, a clean-room design</a></li><li><a href="https://ui.praison.ai/docs/api">Api</a></li><li><a href="https://ui.praison.ai/docs/api/cli">CLI API Reference</a></li><li><a href="https://ui.praison.ai/docs/api/components">Component API Reference</a></li><li><a href="https://ui.praison.ai/docs/api/features-api">Features REST API Reference</a></li><li><a href="https://ui.praison.ai/docs/api/health">Health API Reference</a></li><li><a href="https://ui.praison.ai/docs/api/python">Python SDK API</a></li><li><a href="https://ui.praison.ai/docs/api/sessions">Sessions API Reference</a></li><li><a href="https://ui.praison.ai/docs/api/testing">API Testing Guide</a></li><li><a href="https://ui.praison.ai/docs/api/typescript">TypeScript SDK Reference</a></li><li><a href="https://ui.praison.ai/docs/concepts">Concepts</a></li><li><a href="https://ui.praison.ai/docs/concepts/architecture">Architecture: AG-UI Protocol vs Gateway Integration</a></li><li><a href="https://ui.praison.ai/docs/concepts/configuration">YAML Configuration</a></li><li><a href="https://ui.praison.ai/docs/concepts/providers">Providers</a></li><li><a href="https://ui.praison.ai/docs/concepts/slots">Slots &amp; Components</a></li><li><a href="https://ui.praison.ai/docs/concepts/templates">Templates &amp; Layouts</a></li><li><a href="https://ui.praison.ai/docs/examples">Examples</a></li><li><a href="https://ui.praison.ai/docs/examples/advanced">Advanced Examples</a></li><li><a href="https://ui.praison.ai/docs/examples/basic">Basic Examples</a></li><li><a href="https://ui.praison.ai/docs/features">Features</a></li><li><a href="https://ui.praison.ai/docs/features/a2ui-canvas">A2UI canvas — agent-driven UI</a></li><li><a href="https://ui.praison.ai/docs/features/agent-ui-host">Agent UI host — modular dashboard shell</a></li><li><a href="https://ui.praison.ai/docs/features/attachments">Chat Attachments</a></li><li><a href="https://ui.praison.ai/docs/features/backend-integration">Backend Integration Contract</a></li><li><a href="https://ui.praison.ai/docs/features/beautifului-integration">BeautifulUI Integration Strategy</a></li><li><a href="https://ui.praison.ai/docs/features/browser-automation">Browser Automation</a></li><li><a href="https://ui.praison.ai/docs/features/channel-chat-bridge">Channel-to-Chat Bridge</a></li><li><a href="https://ui.praison.ai/docs/features/code-execution">Code Execution</a></li><li><a href="https://ui.praison.ai/docs/features/comparison-openclaw">Feature Comparison: PraisonAIUI vs OpenClaw</a></li><li><a href="https://ui.praison.ai/docs/features/config-hot-reload">Config Hot-Reload</a></li><li><a href="https://ui.praison.ai/docs/features/content-sources">Content Sources</a></li><li><a href="https://ui.praison.ai/docs/features/css-architecture">How the UI Looks Are Built</a></li><li><a href="https://ui.praison.ai/docs/features/dark-mode">Dark Mode</a></li><li><a href="https://ui.praison.ai/docs/features/dashboard">Dashboard</a></li><li><a href="https://ui.praison.ai/docs/features/deployment">Deployment Guide</a></li><li><a href="https://ui.praison.ai/docs/features/device-pairing">Device Pairing</a></li><li><a href="https://ui.praison.ai/docs/features/differentiation">What Makes PraisonAIUI Different</a></li><li><a href="https://ui.praison.ai/docs/features/feature-inventory">Feature Inventory</a></li><li><a href="https://ui.praison.ai/docs/features/gap-analysis">Gap Analysis — Validated Against praisonai SDK</a></li><li><a href="https://ui.praison.ai/docs/features/gateway-chat">Gateway Chat</a></li><li><a href="https://ui.praison.ai/docs/features/hot-reload">Hot Reload</a></li><li><a href="https://ui.praison.ai/docs/features/how-to-add-a-feature">How to Add a Feature to PraisonAIUI</a></li><li><a href="https://ui.praison.ai/docs/features/i18n">Internationalization (i18n)</a></li><li><a href="https://ui.praison.ai/docs/features/image-preview-chat">Image Preview in Chat</a></li><li><a href="https://ui.praison.ai/docs/features/integration-analysis">AIUI Integration — Critical Review &amp; Architecture Analysis</a></li><li><a href="https://ui.praison.ai/docs/features/knowledge-embeddings">Knowledge Embedding Model Configuration</a></li><li><a href="https://ui.praison.ai/docs/features/marketplace">Plugin Marketplace</a></li><li><a href="https://ui.praison.ai/docs/features/media-analysis">Media Analysis</a></li><li><a href="https://ui.praison.ai/docs/features/message-elements">Message Elements</a></li><li><a href="https://ui.praison.ai/docs/features/model-fallback">Model Fallback</a></li><li><a href="https://ui.praison.ai/docs/features/navigation">Navigation</a></li><li><a href="https://ui.praison.ai/docs/features/praisonai-package-integration">PraisonAI package integration</a></li><li><a href="https://ui.praison.ai/docs/features/protocol-architecture">Protocol Architecture Reference</a></li><li><a href="https://ui.praison.ai/docs/features/protocol-versioning">Protocol Versioning</a></li><li><a href="https://ui.praison.ai/docs/features/protocols">Feature Protocols</a></li><li><a href="https://ui.praison.ai/docs/features/pwa">Progressive Web App (PWA)</a></li><li><a href="https://ui.praison.ai/docs/features/replay">Replay</a></li><li><a href="https://ui.praison.ai/docs/features/seo">SEO</a></li><li><a href="https://ui.praison.ai/docs/features/sessions">Session Management</a></li><li><a href="https://ui.praison.ai/docs/features/standalone-vs-integrated">Standalone vs Integrated</a></li><li><a href="https://ui.praison.ai/docs/features/standardization-verification">AIUI Standardization — Verification Report</a></li><li><a href="https://ui.praison.ai/docs/features/steps">Steps / Chain-of-Thought</a></li><li><a href="https://ui.praison.ai/docs/features/styles">UI Styles</a></li><li><a href="https://ui.praison.ai/docs/features/subagent-tree">Subagent Tree View</a></li><li><a href="https://ui.praison.ai/docs/features/theme-system">Theme System</a></li><li><a href="https://ui.praison.ai/docs/features/theming">Theming</a></li><li><a href="https://ui.praison.ai/docs/features/tts">Text-to-Speech (TTS)</a></li><li><a href="https://ui.praison.ai/docs/features/video-studio">Video Studio</a></li><li><a href="https://ui.praison.ai/docs/features/widget-zones">Widget Zones</a></li><li><a href="https://ui.praison.ai/docs/frontend">Frontend</a></li><li><a href="https://ui.praison.ai/docs/frontend/BEAUTIFULUI_UPSTREAM">BeautifulUI upstream pin record</a></li><li><a href="https://ui.praison.ai/docs/frontend/beautifului-adapter-architecture">ADR: BeautifulUI adapter layer &amp; upstream pin policy</a></li><li><a href="https://ui.praison.ai/docs/frontend/beautifului">BeautifulUI Upgrade Playbook</a></li><li><a href="https://ui.praison.ai/docs/getting-started">Getting Started</a></li><li><a href="https://ui.praison.ai/docs/getting-started/cli">CLI Reference</a></li><li><a href="https://ui.praison.ai/docs/getting-started/github-pages">Deploy to GitHub Pages</a></li><li><a href="https://ui.praison.ai/docs/getting-started/installation">Installation</a></li><li><a href="https://ui.praison.ai/docs/getting-started/quickstart">Quick Start</a></li><li><a href="https://ui.praison.ai/docs/protocols">Protocols</a></li><li><a href="https://ui.praison.ai/docs/protocols/application-design-protocol-report">Application Design Protocol (ADP) — Research Report</a></li><li><a href="https://ui.praison.ai/docs/protocols/adp">Application Design Protocol (ADP)</a></li><li><a href="https://ui.praison.ai/docs/protocols/adp/aiui-mapping">PraisonAIUI → ADP Field Mapping</a></li><li><a href="https://ui.praison.ai/docs/protocols/adp/implementation-status">ADP Implementation Status</a></li><li><a href="https://ui.praison.ai/docs/protocols/adp/spec">Application Design Protocol (ADP) — Normative Specification</a></li><li><a href="https://ui.praison.ai/docs/protocols/adp/validation-rules">ADP Validation Rules</a></li><li><a href="https://ui.praison.ai/docs/typescript">Typescript</a></li><li><a href="https://ui.praison.ai/docs/typescript/components">Components</a></li><li><a href="https://ui.praison.ai/docs/typescript">TypeScript SDK Overview</a></li><li><a href="https://ui.praison.ai/docs/typescript/nextjs">Next.js Adapter</a></li><li><a href="https://ui.praison.ai/docs/typescript/runtime">Runtime</a></li></ul></nav><h1>Basic Examples</h1>
<p>Simple examples to get started with PraisonAIUI.</p>
<h2>Python Examples Reference</h2>
<p>Each example teaches exactly <strong>one new concept</strong> — no overlap.</p>
<p>| # | Name | Unique Concept | Run |</p>
<p>|---|---|---|---|</p>
<p>| 01 | chat | <code>@reply</code> + <code>aiui.say()</code> — minimal hello-world | <code>aiui run app.py</code> |</p>
<p>| 02 | chat-app | Full lifecycle callbacks (<code>@welcome</code>, <code>@button</code>, <code>@profiles</code>, <code>@starters</code>, <code>@goodbye</code>) | <code>aiui run app.py</code> |</p>
<p>| 03 | chat-with-ai | OpenAI streaming via <code>stream_token()</code> | <code>aiui run app.py</code> |</p>
<p>| 04 | chat-with-praisonai | PraisonAI Agent, <code>asyncio.to_thread()</code>, <code>stream=False</code> | <code>aiui run app.py</code> |</p>
<p>| 05 | agent-playground | Multi-agent <code>@profiles</code> switching | <code>aiui run app.py</code> |</p>
<p>| 06 | dashboard | <code>@page</code> decorator, <code>@on("event")</code> syntax | <code>aiui run app.py</code> |</p>
<p>| 07 | provider-praisonai | Custom <code>BaseProvider</code> subclass, <code>RunEvent</code> protocol | <code>aiui run app.py</code> |</p>
<p>| 08 | streaming | PraisonAI Agent streaming via <code>stream_emitter</code> | <code>aiui run app.py</code> |</p>
<p>| 09 | widget | Copilot/sidebar mode | <code>aiui run app.py</code> |</p>
<p>| 10 | feature-showcase | All protocol features seeded, <code>create_app()</code> | <code>python app.py</code> |</p>
<p>| 11 | ui-integration | Gradio ASGI mount, Streamlit iframe, REST embedding | <code>python app.py</code> |</p>
<p>| 12 | agent-dashboard | OpenClaw-style rendered HTML admin panel | <code>python app.py</code> |</p>
<p>| 13 | real-dashboard | Production dashboard with seeded data | <code>python app.py</code> |</p>
<p>| 14 | all-features | Comprehensive 16-feature API test suite | <code>python app.py</code> |</p>
<p>| 15 | dashboard-test | Dashboard component rendering tests | <code>aiui run app.py</code> |</p>
<p>| 16 | gateway-integration | Gateway WebSocket integration | <code>aiui run app.py</code> |</p>
<p>| 17 | three-column-demo | Three-column layout with sidebar + TOC | <code>aiui run app.py</code> |</p>
<p>| 18 | full-chat | Full-featured chat with all options enabled | <code>aiui run app.py</code> |</p>
<p>| 19 | components-showcase | All 48 UI components demonstrated | <code>aiui run app.py</code> |</p>
<p>| 20 | email-channel | Email channel integration | <code>aiui run app.py</code> |</p>
<p>| 21 | agentmail-bot | Agentmail bot integration | <code>aiui run app.py</code> |</p>
<p>| 22 | agentmail-channel | Agentmail channel setup | <code>aiui run app.py</code> |</p>
<p>| 23 | e2e-components-test | End-to-end component testing | <code>aiui run app.py</code> |</p>
<p>| 24 | custom-design | Custom CSS design system with <code>set_custom_css()</code> | <code>aiui run app.py</code> |</p>
<p>| 25 | clean-chat | Clean chat UI — <code>sidebar=False</code>, <code>page_header=False</code>, blue theme | <code>aiui run app.py</code> |</p>
<p>| 26 | custom-theme-chat | Custom theme registration via <code>register_theme()</code> | <code>aiui run app.py</code> |</p>
<p>| 27 | multica-style | Floating chat window, collapsible sidebar, indigo theme | <code>aiui run app.py</code> |</p>
<h2>Minimal Docs Site</h2>
<p>The simplest configuration:</p>
<h2>With Header and Footer</h2>
<p>Add branding:</p>
<h2>Directory Structure</h2></noscript></div>
  <script src="/plugins/plugin-loader.js"></script>
</body>

</html>