agent-ui-react

A React component library for building agent-based user interfaces. Provides production-ready components for conversational AI experiences, authentication, and template-driven data rendering — all built on Fluent UI and the AG-UI protocol.

Table of Contents

• Features
• Installation
• Quick Start
• Components
• Dependencies
• Browser Support
• Release Notes
• Contributing
• License

Features

• Conversational AI assistant with multi-agent support and AG-UI protocol streaming
• Dynamic UI generation — assistant messages rendered as styled HTML via Azure OpenAI
• Voice input with Web Speech API integration
• Lazy message loading with IntersectionObserver for performant chat history
• Resizable side panel with drag-to-resize and responsive default widths
• Mobile responsive layout — fullscreen overlay on small screens, side panel on desktop
• Starter prompt chips for guided onboarding
• JWT-based authentication with role-to-permission mapping
• JSON-driven template rendering with 8 built-in control types and data binding
• Visual template designer with drag-and-drop, live preview, and JSON editing
• Built on Microsoft Fluent UI for a consistent, accessible design system
• Fully typed with TypeScript — ships with declaration files

Installation

npm install agent-ui-react

Quick Start

import { AIAssistant, AuthProvider } from "agent-ui-react";

function App() {
  return (
    <AuthProvider
      config={{ apiBaseUrl: "https://api.example.com", appId: "my-app" }}
      getAccessToken={getAccessToken}
    >
      <AIAssistant
        config={{ apiBaseUrl: "https://api.example.com", appId: "my-app" }}
        getAccessToken={getAccessToken}
        userInfo={{ name: "Jane", email: "[email protected]" }}
        permissions={["chat", "templates"]}
        displayMode="Copilot"
        onClose={() => console.log("closed")}
      />
    </AuthProvider>
  );
}

Components

| Component | Description | Documentation | |-----------|-------------|---------------| | AuthProvider | Wraps your app to provide authenticated user info and role-based permissions via React Context. Decodes JWT tokens and fetches user roles from the API. | AuthProvider Docs | | AIAssistant | Full-featured conversational AI chat UI with multi-agent support, conversation history, starter prompts, templates, and AG-UI protocol integration. | AIAssistant Docs | | TemplateRenderer | Renders JSON-defined ITemplate objects against server data. Displays structured, data-bound UI cards with support for 8 control types and data binding. | TemplateRenderer Docs | | TemplateDesigner | Visual drag-and-drop editor for creating and editing ITemplate JSON definitions. Includes property panel, live preview, JSON editing, and data source binding. | TemplateDesigner Docs |

Dependencies

Runtime

| Package | Description | |---------|-------------| | @ag-ui/client | AG-UI protocol client for agent communication | | @ag-ui/core | AG-UI protocol core types and utilities | | @fluentui/react-components | Microsoft Fluent UI React component library | | react | React library | | react-dom | React DOM renderer | | react-router | Declarative routing for React |

Browser Support

| Browser | Supported | |---------|-----------| | Chrome (latest) | Yes | | Edge (latest) | Yes | | Firefox (latest) | Yes | | Safari (latest) | Yes |

Release Notes

See the full version history and changelog.

Contributing

Contributions are welcome! Here's how you can help:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/my-feature)
3. Commit your changes (git commit -m "Add my feature")
4. Push to the branch (git push origin feature/my-feature)
5. Open a Pull Request

For questions or feature requests, please open an issue or contact us.

Authors

Developed and maintained by Tech Trips.

License

This project is licensed under the MIT License.

Copyright © 2026 Tech Trips