Agent Web UI

agent-web-ui is a modern Next.js frontend for delivering a polished realtime AI chat widget in your web app.

It is designed to work with a Gunma AI Orchestrator backend and Laravel WebSockets / Pusher for instant message delivery.

Install

From npm

npm install agent-web-ui

From this repository

git clone https://github.com/ringkubd/agent-orchestrator-web.git
cd agent-orchestrator-web
npm install

Run Locally

npm run dev

Open the app at:

http://localhost:3000

What This Package Provides

• A floating chat widget with open/close toggle
• Realtime message handling via Laravel Echo + Pusher
• Persistent session ID using localStorage
• Animated chat bubbles, typing indicator, and responsive UI
• A ready-to-use frontend shell for AI assistant experiences

How to Use

The widget is implemented in src/components/ChatWidget.tsx and loaded in src/app/page.tsx.

Use this project as a frontend example or integrate its chat widget into your own Next.js application.

Expected Backend Contract

The widget sends user messages to your backend endpoint:

POST /api/agent/web-chat

Request payload:

{
  "session_id": "<uuid>",
  "message": "<user message>"
}

The backend should publish AI responses to the websocket channel:

• Channel: chat.<session_id>
• Event: .agent.reply
• Payload key: message

Example broadcast payload:

{
  "message": "Hello! Here is a recipe suggestion..."
}

Environment Variables

Add a .env.local file with the following values:

NEXT_PUBLIC_PUSHER_APP_KEY=your-pusher-key
NEXT_PUBLIC_PUSHER_HOST=your-pusher-host
NEXT_PUBLIC_PUSHER_PORT=6001
NEXT_PUBLIC_PUSHER_SCHEME=https
NEXT_PUBLIC_PUSHER_CLUSTER=mt1
NEXT_PUBLIC_APP_URL=https://your-backend.example.com

Recommended Setup

• Backend: Laravel + WebSockets / Pusher or compatible websocket adapter
• AI orchestration: Gunma AI Orchestrator
• Frontend: Next.js 16 with React 19

Customize the Widget

Edit src/components/ChatWidget.tsx to update:

• welcome and assistant text
• API endpoint and request payload
• message bubble colors and styling
• button icons and widget layout

Build for Production

npm run build
npm run start

Package Info

• Package: agent-web-ui
• Version: 0.1.0
• Framework: Next.js 16
• React: 19
• Styling: Tailwind CSS 4
• Realtime: Laravel Echo + Pusher

Ideal Use Cases

• AI assistant overlays for web applications
• Customer support and concierge chat widgets
• Recipe recommendation and shopping assistants
• Proof-of-concept conversational interfaces
• Embedded chat UI for Laravel-backed dashboards

Notes

This repo is built as a frontend shell for a Gunma AI Orchestrator deployment. Verify your backend supports the required websocket channel and broadcast event format before using it in production.