diff --git a/README.md b/README.md index a261408..16ea278 100644 --- a/README.md +++ b/README.md @@ -180,6 +180,35 @@ const { text, status } = useStream( ); ``` +### Svelte (beta) + +Svelte 5 bindings are community-supported and in beta. They need `svelte` and +[`convex-svelte`](https://github.com/get-convex/convex-svelte), with +`setupConvex` called in a parent component. Reactive inputs are passed as +getters. See [`example-svelte/`](./example-svelte/) for the chat app. + +```svelte + + +
{stream.text}
+``` + +`stream.text` and `stream.status` update as the stream progresses. The HTTP +request only starts in the browser, never during server-side rendering. + ## Design Philosophy This component balances HTTP streaming with database persistence to try to diff --git a/example-svelte/README.md b/example-svelte/README.md new file mode 100644 index 0000000..3ddf677 --- /dev/null +++ b/example-svelte/README.md @@ -0,0 +1,18 @@ +# Svelte Chat Example App + +The chat app from [`example/`](../example/) built with Svelte 5 and the +`@convex-dev/persistent-text-streaming/svelte` bindings. It shares the Convex +backend in `example/convex` and the dependencies in the root `package.json`. + +## Running the app + +From the repository root: + +```bash +npm install +npm run dev # in one terminal +npm run dev:svelte # in another terminal +``` + +Set `OPENAI_API_KEY` as described in the +[React example's README](../example/README.md#establishing-your-openai_api_key). diff --git a/example-svelte/index.html b/example-svelte/index.html new file mode 100644 index 0000000..9fa6600 --- /dev/null +++ b/example-svelte/index.html @@ -0,0 +1,13 @@ + + + + + +