Atmosphere Stream AI to browsers. Keep your stack.

import { useState } from 'react';
import { useStreaming } from 'atmosphere.js/react';

const [prompt, setPrompt] = useState('');
const [messages, setMessages] = useState([
  { author: 'assistant', text: 'I can join your room in real time.' }
]);
const { fullText, progress, status, send, reset } = useStreaming({
  request: { url: '/ai/chat', transport: 'websocket' }
});

const submit = async (e) => {
  e.preventDefault();
  if (!prompt.trim()) return;
  const next = prompt;
  setPrompt('');
  setMessages((list) => [...list, { author: 'you', text: next }]);
  reset();
  await send({ prompt: next, room: 'support' });
};

return (
  <section>
    {messages.map((m, i) => <p key={i}>{m.author}: {m.text}</p>)}
    {fullText && <p>assistant: {fullText}</p>}
    <small>{progress?.phase || status}</small>
    <form onSubmit={submit}><input value={prompt} onChange={(e) => setPrompt(e.target.value)} /><button disabled={status === 'streaming'}>Send</button></form>
  </section>
);

<script setup>
import { ref } from 'vue';
import { useStreaming } from 'atmosphere.js/vue';

const prompt = ref('');
const messages = ref([
  { author: 'assistant', text: 'I stream updates in real time.' }
]);
const { fullText, progress, status, send, reset } = useStreaming({
  request: { url: '/ai/chat', transport: 'websocket' }
});

const submit = async () => {
  if (!prompt.value.trim()) return;
  const next = prompt.value;
  prompt.value = '';
  messages.value.push({ author: 'you', text: next });
  reset();
  await send({ prompt: next, room: 'support' });
};
</script>
<template>
  <p v-for="(m, i) in messages" :key="i">{{ m.author }}: {{ m.text }}</p>
  <p v-if="fullText">assistant: {{ fullText }}</p>
  <small>{{ progress?.phase || status }}</small>
  <form @submit.prevent="submit"><input v-model="prompt" /><button :disabled="status === 'streaming'">Send</button></form>
</template>

<script>
import { useStreaming } from 'atmosphere.js/svelte';

let prompt = '';
let messages = [
  { author: 'assistant', text: 'MCP + chat updates arrive in one stream.' }
];
const { fullText, progress, status, send, reset } = useStreaming({
  request: { url: '/ai/chat', transport: 'websocket' }
});

const submit = async () => {
  if (!prompt.trim()) return;
  const next = prompt;
  prompt = '';
  messages = [...messages, { author: 'you', text: next }];
  reset();
  await send({ prompt: next, room: 'support' });
};
</script>

{#each messages as m}
  <p>{m.author}: {m.text}</p>
{/each}
{#if $fullText}<p>assistant: {$fullText}</p>{/if}
<small>{$progress?.phase || $status}</small>
<form on:submit|preventDefault={submit}><input bind:value={prompt} /><button disabled={$status === 'streaming'}>Send</button></form>