Add interactive WebSocket UI and FastAPI backend for Groupchat

[Suryaaa-Rathore]

This PR introduces a lightweight, interactive WebSocket UI along with a FastAPI backend.

What's included:

• Frontend HTML/JS UI for real-time WebSocket communication
• FastAPI backend with WebSocket manager
• Group chat orchestration using a class-based AgentChat setup
• Streaming agent responses with message formatting
• Support for user input during active chats (User Proxy agent)
• Environment-based API key configuration
• Basic session management (create/use chat_id)

Why:
We were facing limitations with tools like Postman for WebSocket testing — including lack of message formatting, session handling, and poor UX for prompt tuning. This setup improves debugging, speeds up development, and simplifies agent alignment tasks.

[CLAassistant]

All committers have signed the CLA.

[qingyun-wu]

@Suryaaa-Rathore very interesting PR! Thanks for the contribution! Could you run pre-commit: https://docs.ag2.ai/latest/docs/contributor-guide/pre-commit/

This is a large PR. Will start review soon but may take some time!

[Suryaaa-Rathore]

@qingyun-wu Thanks! I've run the pre-commit and made the necessary changes.

[elCaptnCode]

@Suryaaa-Rathore do you have discord? I am working on something similar to this and would love to chat. What I am currently trying to figure out is persistence after disconnection of the websocket. My discord is: elcapitan__ (thats 2 underscores)

[priyansh4320]

the design of the UI looks very basic to me , this can be improved, with better color pallete, the aglignments of the components seems asymmetric, is that intentional? if so, it can be improved further.

• consider this there are too many colors, use a better color pallete.
• if possible can you pleaseremove the border highlights, from the inner asymmetric components, it would look better that ways.
• can you please implement modern UI design principals?

overall , my opinioun is this UI can be much better.

[Suryaaa-Rathore]

Thanks for the feedback. We’re building our own startup, and within the given time constraints, I was able to build this by making use of the WebSocket implementation within the current AG2 architecture. The current design is intentionally kept basic to focus on functionality during the initial development phase. The color palette is fully customizable and supports both dark and light modes. Developers can adjust the theme based on their preferences or project requirements.

• The asymmetric layout is intentional, as it helps distinguish between sent and received messages more clearly in a chat-style interface.
• Border highlights are used to format JSON data into a tabular layout for better readability and structure. This is especially helpful when displaying nested JSON, which follows a similar format.
• While I can certainly implement and publish more modern UI designs, the current focus is on delivering core features and iterating based on need.

[elCaptnCode]

@Suryaaa-Rathore does this support the typewriter effect (sending partial chunks/tokens and incrementally rendering them)?

[Suryaaa-Rathore]

@BlocUnited Yes, it can support the typewriter effect, but the current PR does not include it yet.

[priyansh4320]

@Suryaaa-Rathore

• I suggest to move out agentchat_fastapi_websocket from notebooks -> agents/experimental
• also lets rename the folder to agents_fastapi_websocket
• let's move the UI to a separate PR and keep UI as a seperate folder entirely under root ag2/websocket_ui for example.