DOCS
Chat UI
Four packages, one shell. Import styles.css, pass endpoints and the embed token, and mount SvedaChat.
One widget, four packages
Vue, React, Svelte, and Solid mount the same chat. History, view mode, and resize stay on the widget. @sveda-ai/core still sends the turn when you skip the panel.
Packages
Pick one UI package. Each one mounts the same chat on an empty element, usually
#sveda-widget.
Import that package’s
styles.css
once.
@sveda-ai/chat
is the headless store those packages already depend on — install it only if you build your own shell.
No framework:
@sveda-ai/element.
Turns without a panel stay on
@sveda-ai/core.
npm i @sveda-ai/vue
npm i @sveda-ai/react
npm i @sveda-ai/svelte
npm i @sveda-ai/solidnpm i @sveda-ai/vue npm i @sveda-ai/react npm i @sveda-ai/svelte npm i @sveda-ai/solid
- Vue Install @sveda-ai/vue. createSveda() is the plugin. Mount SvedaChat on an empty element, usually #sveda-widget.
- React Install @sveda-ai/react. Wrap the tree in SvedaProvider and render SvedaChat.
- Svelte Install @sveda-ai/svelte. Build the client with createSveda(), then pass it into SvedaProvider.
- Solid Install @sveda-ai/solid. SvedaProvider wraps SvedaChat. render() mounts the tree on #sveda-widget.
Same shell
History opens a sidebar. Maximize enters immersive mode. The panel button switches floating and fixed. X minimizes. Drag the left edge in fixed mode, or the left edge, top edge, and corner in floating mode. A new empty chat stays a tab until it has a user message. Options match the JS client:
endpoints.stream
is required,
headers
carries
x-sveda-embed-token,
and
appearance
overlays
sveda.yaml.
The option list — endpoints, headers, models, quick prompts, appearance, and SvedaChat props — is on each package page.
Related
Vue
@sveda-ai/vue. createSveda() is the plugin.
React
@sveda-ai/react. Wrap the tree in SvedaProvider.
Svelte
@sveda-ai/svelte. createSveda(), then SvedaProvider.
Solid
@sveda-ai/solid. SvedaProvider around SvedaChat.
JS client
SvedaClient when you do not want a panel.
Appearance
preset, radius, and launcher on the same options object.
Web component
<sveda-chat> from @sveda-ai/element.
Get started
Install core, bind the runtime, mint a token.