Frontendy používané v AI chatech

Porovnej webová rozhraní deepseek qwen, chatgpt, grok, copilot, mistral, claude z hlediska používaného frontendu, jaký webový framework, jaký javascriptový framework, zda používá websocket nebo jakým způsobem komunikuje se serverem

Skvělá technická otázka! Rozbor frontendové architektury těchto AI nástrojů je fascinující. Zde je detailní rozbor na základě analýzy jejich chování, zdrojového kódu (při pohledu through browser devtools) a veřejných informací.

Je důležité si uvědomit, že společnosti tyto detaily oficiálně ne vždy zveřejňují, takže se jedná o informace získané reverzním inženýrstvím a pozorováním.

Obecné Schéma Komunikace

Všechny tyto platformy používají kombinaci dvou hlavních přístupů pro komunikaci se serverem:

1. HTTP Streaming (hlavní pro chat): Většina používá dlouho žijící HTTP požadavky (častěji přes fetch API než klasický XMLHttpRequest) s protokolem SSE (Server-Sent Events) nebo chunked encoding pro příchod dat po částech (token po tokenu). To vytváří dojem „psaní“ v reálném čase.
2. WebSockets (pro real-time updates UI): Často se používají pro vedlejší, ale také real-time funkce, jako je synchronizace historie chatů mezi zařízeními, live notifications o stavu systému nebo spolupráce v reálném čase (např. v Copilotu).

---

Rozbor Konkrétních Platform

1. ChatGPT (OpenAI)

• Web Framework: Vypadá to na vlastní, highly optimized řešení. Dříve používali React (což bylo vidět na struktuře komponent), ale v rámci snahy o maximální výkon a minimalizaci latence pravděpodobně přešli na více low-level řešení, možná kombinaci Vanilla JS + Preact (lightweight alternativa k Reactu).
• Komunikace: Primárně HTTP Streaming (SSE) pro tok odpovědí modelu. Pohled do Network tab v devtools ukazuje požadavky na https://chatgpt.com/backend-api/conversation. WebSockets jsou pravděpodobně použity pro vedlejší funkce.

2. GitHub Copilot (Microsoft)

• Web Framework: Jelikož je GitHub postaven na Ruby on Rails, jeho frontend tradičně používal stack kolem toho. Nicméně pro Copilot a nové části GitHubu intenzivně používají React (např. nové UI code search je v Reactu).
• Komunikace: WebSockets jsou zde klíčové. Copilot musí udržovat persistentní, obousměrnou komunikaci s serverem, aby mohl okamžitě posílat snippets kódu a přijímat návrhy s minimální latencí přímo ve VS Code nebo IDE. V prohlížečové verzi pak kombinace WebSockets a HTTP.

3. Claude (Anthropic)

• Web Framework: Používá React (je to patrné na struktuře DOM a třídách). Jeho UI je velmi čisté a rychlé, což naznačuje dobrou optimalizaci.
• Komunikace: Jasně viditelný HTTP Streaming pomocí SSE. Když Claude „píše“, v devtools vidíte dlouhý požadavek na https://claude.ai/api/append_message, který postupně streamuje data. Anthropic má velmi dobře zdokumentované API, které jejich frontend využívá.

4. DeepSeek Chat & Qwen (Alibaba)

• Web Framework: Oba pro své hlavní chatovací rozhraní používají moderní React aplikaci. Je to poznat na struktuře komponent a použité konvenci (např. data-testid atributy pro testování).
• Komunikace: HTTP Streaming (SSE). Po odeslání zprávy je iniciován požadavek, který postupně streamuje odpověď. Architektura je velmi podobná té od Claudea nebo ChatGPT.

5. Grok (xAI)

• Web Framework: Integrovaný přímo na platformě X (Twitter). Proto využívá stejný tech stack jako X, který je známý pro svou extrémní optimalizaci pro rychlost. Je to pravděpodobně masivně customizovaná směs Vanilla JavaScript a možná malých částí Reactu pro specifické komponenty. Hlavní důraz je na minimalizaci latence a integraci do stávající infrastruktury.
• Komunikace: Pravděpodobně využívá internal API X platformy, která je postavena na HTTP Streaming a WebSockets. Vzhledem k real-time povaze X je infrastruktura na WebSockets ideálně připravena.

6. Mistral AI (La Plateforme)

• Web Framework: Jejich chatovací platforma (https://laplateforme.mistral.ai/) je postavena na Reactu (opět patrné z devtools).
• Komunikace: Standardní HTTP Streaming pro generování odpovědí.

---

Souhrnná Tabulka

Závěr

Přestože se UI těchto nástrojů liší, jejich backendová komunikace je velmi konzistentní. Všichni se spoléhají na streamování odpovědí (většinou přes HTTP SSE), aby vytvořili plynulý uživatelský zážitek. WebSockets jsou pak nasazovány tam, kde je potřeba opravdová obousměrná real-time komunikace (Copilot, Grok na X).

Z hlediska frontendového frameworku je React jasným vítězem a standardem de facto, i když někteří (jako OpenAI a X) pro maximální výkon a integraci sahají po více customizovaných nebo lightweight řešeních.