本地跑起来，安全部署，理性扩展。

StreamCanvas 既是一个参考应用，也是一组可复用的软件包。这个页面是中文用户从 clone 到看到生成式 UI 运行起来的最快路径。

指南

快速开始

安装依赖、启动参考应用，然后打开演示线程验证消息流、组件渲染与客户端工具回调。

指南

架构

使用 @streamcanvas/core 负责流式协议，@streamcanvas/react 提供前端组件原语，@streamcanvas/server 提供参考运行时辅助。

指南

部署

推荐通过 nginx 反向代理把应用暴露在公网，同时让实际服务只绑定在 localhost 上，避免干扰已有系统。

安装

pnpm install
pnpm dev

打开 http://localhost:3000，使用演示 Prompt 验证消息流、组件渲染与客户端工具回调。

使用这些包

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

React 包消费的是同一套 NDJSON 事件流，不论这个流来自参考服务端还是你自己的后端实现。

部署

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

推荐的生产路径是 Next.js standalone 运行时加 nginx 反向代理，应用只监听127.0.0.1:3210。新增的资源文章从文件系统动态读取，因此每日内容发布无需重新构建应用。

脚手架

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

内容程序

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

这个内容程序会把中英文文章发布到资源中心，并同步扩展 RSS、sitemap 与站点的可发现性入口。

公开路由

/zh-CN 中文首页
/zh-CN/platform 架构与部署模型
/zh-CN/solutions 适用场景与产品匹配度
/zh-CN/security 安全边界与运营边界
/zh-CN/resources 中文内容中心
/zh-CN/demo 中文演示
/feed.xml RSS 订阅源
/sitemap.xml 动态站点地图
/llms.txt 面向 Agent 的站点索引
/api/health 健康检查
/api/demo NDJSON 演示流接口