composable-svelte-chat

Implement streaming chat with presence tracking for Composable Svelte apps.

3|Updated Oct 26, 2025
One-click install
npx skills add https://github.com/jonathanbelolo/composable-svelte --skill composable-svelte-chat
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: composable-svelte-chat
Source: https://github.com/jonathanbelolo/composable-svelte/tree/main/.claude/skills/composable-svelte-chat
Command: npx skills add https://github.com/jonathanbelolo/composable-svelte --skill composable-svelte-chat

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Streaming chat with collaboration enables developers to build transport-agnostic, real-time chat interfaces for Composable Svelte apps, including LLM streaming, presence tracking, and typing indicators.

Core Features & Use Cases

  • Streaming chat: Receive and render partial assistant responses as they arrive.
  • Collaborative features: Presence, typing indicators, and live cursors for multi-user chats.
  • WebSocket integration: Real-time message routing and connection management.
  • Use Case: Build a team chat that streams AI responses while showing active participants and live cursors.

Quick Start

Use the streaming chat package to initialize a chat store, wire the streaming reducer, and provide a sendMessage dependency that streams chunks to the client.

Frequently Asked Questions about composable-svelte-chat

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I implement streaming chat with typing indicators and presence in a Svelte app?

Streaming chat with typing indicators and presence in a Svelte app is implemented using a transport-agnostic pattern with a typed action system, reducer-based state management, and WebSocket support to track active participants and live cursors.

Can I stream LLM responses chunk by chunk in real-time using Svelte?

Yes, you can stream LLM responses chunk by chunk in real-time using Svelte by wiring a streaming reducer and providing a sendMessage dependency that routes partial assistant responses to the client as they arrive.

Does this streaming chat pattern require a specific transport protocol like WebSockets?

The streaming chat pattern is transport-agnostic, meaning it does not strictly require a specific protocol, but it includes built-in WebSocket support for real-time message routing and connection management in collaborative workspaces.

What is the best way to manage state for a collaborative real-time chat interface?

The best way to manage state for a collaborative real-time chat interface is using a reducer-based state management system paired with a typed action system, which handles streaming messages, presence tracking, and typing indicators.

Can I add file attachments and voice streaming to a Svelte collaborative chat workspace?

Yes, you can add file attachments and voice streaming to a Svelte collaborative chat workspace, as the streaming chat pattern includes optional support for attachments and voice streaming alongside its core real-time messaging features.

When should I use a reducer-based action system for real-time messaging scenarios?

You should use a reducer-based typed action system for real-time messaging scenarios when you need to manage complex collaborative states like streaming LLM responses, live cursors, and typing indicators across multiple participants simultaneously.