Run it locally. Deploy it safely. Extend it sanely.

StreamCanvas ships as a reference app plus reusable packages. This page is the fastest path from clone to working generative UI.

Guide

Quickstart

Install dependencies, start the reference app, then open the demo thread to see widget streaming and host callbacks.

Guide

Architecture

Use @streamcanvas/core for the stream contract, @streamcanvas/react for the UI primitives, and @streamcanvas/server for reference runtime helpers.

Guide

Deployment

Deploy behind nginx with a localhost-bound Docker container so the app stays isolated from existing services on the host.

Install

pnpm install
pnpm dev

Open http://localhost:3000 and use the demo prompts to verify message streaming, widget rendering, and client tool callbacks.

Use the packages

import {
  StreamCanvasProvider,
  ChatThread,
  WidgetSurface,
} from "@streamcanvas/react";

The React package expects the same NDJSON event stream generated by the server helpers or your own backend implementation.

Deploy

pnpm build
rsync -az apps/web/.next/standalone/ server:/opt/streamcanvas-web/
rsync -az apps/web/.next/static/ server:/opt/streamcanvas-web/apps/web/.next/static/
rsync -az apps/web/content/generated/ server:/opt/streamcanvas-web/content/generated/
systemctl enable --now streamcanvas-web

The preferred production path uses the Next.js standalone runtime behind nginx with the app bound only to 127.0.0.1:3210. Generated resource pages are loaded from the filesystem, so new articles can go live without rebuilding the app.

Scaffold

npx create-streamcanvas my-app
cd my-app
pnpm install
pnpm dev

Editorial bot

STREAMCANVAS_BOT_API_URL=...
STREAMCANVAS_BOT_API_KEY=...
STREAMCANVAS_BOT_MODEL=auto
pnpm content:generate -- --count=3 --force

The editorial pipeline publishes bilingual pages into the resource hub, updates the RSS feed, and expands the sitemap without restarting the site.

Public routes

/ marketing landing page
/platform architecture and deployment model
/solutions product-fit and workflow examples
/security safety and operational boundaries
/resources professional long-form content hub
/claude-generative-ui intent page for Claude-style OSS discovery
/demo live product demo
/feed.xml editorial RSS feed
/sitemap.xml dynamic XML sitemap
/llms.txt agent-readable site index
/api/health deployment health probe
/api/demo NDJSON demo stream endpoint