Native AI Chat Component

1 vote

avatar

Hi everyone,
With AI assistants becoming a standard UI/UX pattern in modern web applications, I think it’s time to talk about bringing this capability natively into PowerShell Universal.
Lately, I’ve been working on a custom module called AiChatFloatingButton for PSU. To be honest, most of it was "vibe coding" with AI assistance, but it still took a ton of work to get the styling, animations, state handling, and theme-aware CSS working correctly without breaking PSU's re-rendering logic.
The good news is that it actually works and looks pretty decent! It supports any OpenAI-compatible API (Ollama, Open WebUI, Azure, etc.), handles dark/light modes via CSS variables, and uses standard New-UDelements.
However, as much as I enjoy tweaking custom components and hacking overlays, a native solution would be a massive game-changer for the PSU community for several reasons:

  • Seamless Integration: No need to manually manage $page: scope variables or complex Set-UDElement / Sync-UDElement logic just to keep the chat history and animations smooth. It would just work out of the box with standard New-UD... syntax.
  • Unified UI & Theme Engine: A native component would automatically respect the active PSU dashboard theme without custom CSS injection hacks.
  • Enterprise Ready: Having a built-in, standard way to connect dashboards to LLM endpoints (like Azure OpenAI, Ollama, or OpenAI API) would make PSU an even more powerful framework for internal enterprise tools.


Since Universal Dashboard is built on React, implementing this natively wouldn't require building everything from scratch. There are fantastic, production-grade open-source libraries available that could be wrapped into a New-UD component:

  1. assistant-ui (@assistant-ui/react) – A highly popular, production-ready React library specifically designed for AI chat experiences. It handles streaming lifecycles, markdown parsing, and has excellent shadcn/ui inspired primitives that match modern web aesthetics perfectly.
  2. deep-chat (deep-chat-react) – A fully customizable, framework-agnostic AI chat component. It connects directly to popular APIs (OpenAI, Claude, custom endpoints) out of the box with minimal configuration.
  3. react-chatbotify – Another very flexible option with built-in LLM connectors, response streaming, and custom theme support.

Alternatively, a native combination of Material UI's Fab (Floating Action Button) combined with a properly anchored Floating UI popover drawer enclosing a standard message list would be incredibly powerful.
For anyone interested, or if the dev team wants to look at my implementation details i can share my module code.

All Comments (0)