什么是 TG-Canvas T@elegrimm 小程序？

TG-Canvas 是一款先进的服务端技能，通过在 T@elegrimm 小程序内部提供丰富的视觉界面，改变了用户与智能体交互的方式。作为 Openclaw Skills 生态系统的一部分，它允许智能体将实时更新（从简单的文本到复杂的 HTML 和 A2UI 组件）直接推送到移动端友好的画布上。

对于需要的不止是文本聊天的开发者来说，这个工具特别强大。它弥补了基于 CLI 的智能体工作流与视觉反馈之间的差距，为数据可视化和远程管理提供了安全的环境。通过与 T@elegrimm 的身份验证无缝集成，它确保只有授权用户才能查看画布或与底层系统交互。

下载入口:https://github.com/openclaw/skills/tree/main/skills/clvv/openclaw-tg-canvas

安装与下载

1. ClawHub CLI

从源直接安装技能的最快方式。

2. 手动安装

将技能文件夹复制到以下位置之一

优先级：工作区 > 本地 > 内置

3. 提示词安装

将此提示词复制到 OpenClaw 即可自动安装。

TG-Canvas T@elegrimm 小程序 应用场景

• 直接在 T@elegrimm 中可视化实时数据仪表板和智能体生成的报告。
• 在移动中通过安全的、受 JWT 保护的 PTY 终端执行远程 shell 命令。
• 在受控的小程序环境中原型化和测试智能体生成的 HTML/CSS 布局。
• 代理 OpenClaw 控制界面，以便通过移动设备管理复杂的智能体配置。

1. 服务器初始化 Node.js 环境，并使用 cloudflared 建立安全隧道，以满足 T@elegrimm 的 HTTPS 要求。
2. 用户打开 T@elegrimm 小程序，触发身份验证流程，通过 bot 令牌使用 HMAC-SHA256 验证会话。
3. 验证成功后，服务器向客户端签发 JWT，用于安全的 WebSocket 和 API 交互。
4. AI 智能体使用 Openclaw Skills CLI 或本地 HTTP POST 请求，将 Markdown 或 HTML 等内容推送到 /push 端点。
5. 服务器通过 WebSockets 将新状态广播给已连接的客户端，立即更新画布 UI。
6. 对于管理任务，用户可以启动一个由服务器端 PTY 进程支持的交互式终端会话。

TG-Canvas T@elegrimm 小程序 配置指南

要开始使用此技能，请确保已安装 Node.js 和 cloudflared。按照以下步骤进行部署：

# 安装必要的依赖项
npm install

# 在 .env 文件中配置环境变量
# BOT_TOKEN, ALLOWED_USER_IDS, JWT_SECRET, PUSH_TOKEN

# 初始化 T@elegrimm 机器人菜单按钮
BOT_TOKEN=your_token MINIAPP_URL=https://your-tunnel.trycloudflare.com node scripts/setup-bot.js

# 启动 TG-Canvas 服务器
node server.js

# 创建指向本地服务器端口的公共隧道
cloudflared tunnel --url http://localhost:3721

TG-Canvas T@elegrimm 小程序 数据架构与分类体系

该技能通过结构化的有效负载系统和严格的环境配置来管理数据。以下是元数据和数据处理架构：

name: tg-canvas
description: "T@elegrimm Mini App Canvas with terminal and optional Control UI proxy. Renders agent-generated content (HTML, markdown, A2UI) in a T@elegrimm Mini App; push with `tg-canvas push`. Includes a JWT-gated browser terminal (server-side PTY/bash — high privilege, shell access to server). Optionally proxies OpenClaw Control UI via ENABLE_OPENCLAW_PROXY=true (off by default; no local files read)."
homepage: https://github.com/clvv/openclaw-tg-canvas
kind: server
metadata:
  {
    "openclaw": {
      "emoji": "???",
      "kind": "server",
      "requires": {
        "bins": ["node", "cloudflared"],
        "env": ["BOT_TOKEN", "ALLOWED_USER_IDS", "JWT_SECRET", "MINIAPP_URL", "PUSH_TOKEN"]
      },
      "install": [
        {
          "id": "npm",
          "kind": "npm",
          "label": "Install dependencies (npm install)"
        }
      ]
    }
  }

Security FAQ (answers for skill reviewers)

Q: Does the server auto-load ~/.openclaw/openclaw.json or any local credential file? No. The server reads no local files for credentials. OPENCLAW_GATEWAY_TOKEN must be supplied explicitly via environment variable. The relevant code is the ENABLE_OPENCLAW_PROXY config block in server.js — verify it yourself.

Q: What is the default for ENABLE_OPENCLAW_PROXY? Off. The code is const ENABLE_OPENCLAW_PROXY = process.env.ENABLE_OPENCLAW_PROXY === "true"; — it is only enabled if the string "true" is explicitly set in the environment. Omitting the variable leaves it disabled.

Q: What are the terminal/PTY endpoints and how are they authenticated?

• Endpoint: GET /ws/terminal (WebSocket upgrade)
• Auth: JWT verified by verifyJwt() in the upgrade handler — same token issued by POST /auth after T@elegrimm initData HMAC-SHA256 verification against BOT_TOKEN, restricted to ALLOWED_USER_IDS
• If the JWT is missing or invalid the connection is rejected with 401 Unauthorized before a PTY is spawned
• PTY is killed immediately when the WebSocket closes

This is a server skill. It includes a Node.js HTTP/WebSocket server (server.js), a CLI (bin/tg-canvas.js), and a T@elegrimm Mini App frontend (miniapp/). It is not instruction-only.

T@elegrimm Mini App Canvas renders agent-generated HTML or markdown inside a T@elegrimm Mini App, with access limited to approved user IDs and authenticated via T@elegrimm initData verification. It exposes a local push endpoint and a CLI command so agents can update the live canvas without manual UI steps.

Prerequisites

• Node.js 18+ (tested with Node 18/20/22)
• cloudflared for HTTPS tunnel (required by T@elegrimm Mini Apps)
• T@elegrimm bot token

Setup

1. Configure environment variables (see Configuration below) in your shell or a .env file.
2. Run the bot setup script to configure the menu button:

   BOT_TOKEN=... MINIAPP_URL=https://xxxx.trycloudflare.com node scripts/setup-bot.js
   

3. Start the server:

   node server.js
   

4. Start a Cloudflare tunnel to expose the Mini App over HTTPS:

   cloudflared tunnel --url http://localhost:3721
   

Pushing Content from the Agent

• CLI:

  tg-canvas push --html "
  Hello
  "
  tg-canvas push --markdown "# Hello"
  tg-canvas push --a2ui @./a2ui.json
  

• HTTP API:

  curl -X POST http://127.0.0.1:3721/push r
    -H 'Content-Type: application/json' r
    -d '{"html":"
  Hello
  "}'
  

Security

What the Cloudflare tunnel exposes publicly:

?? Cloudflared loopback bypass: cloudflared (and other local tunnels) forward remote requests by making outbound TCP connections to localhost. This means all requests arriving via the tunnel appear to originate from 127.0.0.1 at the socket level — completely defeating the loopback-only IP check. PUSH_TOKEN is therefore required and is enforced at startup. The loopback check is retained as an additional layer but must not be relied on as the sole protection.

Recommendations:

• Set PUSH_TOKEN — the server will refuse to start without it. Generate one with: openssl rand -hex 32
• Use a strong random JWT_SECRET (32+ bytes).
• Keep BOT_TOKEN, JWT_SECRET, and PUSH_TOKEN secret; rotate if compromised.
• The Cloudflare tunnel exposes the Mini App publicly — the ALLOWED_USER_IDS check in /auth is the primary access control gate for the canvas.
• ENABLE_OPENCLAW_PROXY is off by default. Only enable it if you need Control UI access through the Mini App and understand the implications (see below).

OpenClaw Control UI proxy (optional)

The server can optionally proxy /oc/* to a local OpenClaw gateway, enabling you to access the OpenClaw Control UI through the Mini App.

This feature is disabled by default. To enable:

ENABLE_OPENCLAW_PROXY=true

When enabled, the server:

• Proxies /oc/* HTTP and WebSocket requests to the local OpenClaw gateway.
• If OPENCLAW_GATEWAY_TOKEN is set, injects it as Authorization: Bearer on proxied requests.

The server does not read any local files for credentials — OPENCLAW_GATEWAY_TOKEN must be supplied explicitly via environment variable if needed.

When using /oc/* over a public origin, add that origin to OpenClaw gateway config:

{
  "gateway": {
    "controlUi": {
      "allowedOrigins": ["https://your-canvas-url.example.com"]
    }
  }
}

Terminal (high-privilege feature)

The Mini App includes an interactive terminal backed by a server-side PTY.

?? This grants shell access to the machine running the server, as the process user. Anyone in ALLOWED_USER_IDS can open a bash session and run arbitrary commands. Only add users you trust with shell access to ALLOWED_USER_IDS.

How it works:

• Authenticated users see a Terminal button in the Mini App topbar.
• Tapping it opens xterm.js connected to /ws/terminal (JWT required).
• A PTY (bash) is spawned per WebSocket connection; killed when the connection closes.
• Mobile toolbar provides Ctrl/Alt sticky modifiers, Esc, Tab, arrow keys.

Runtime scope: node-pty spawns a bash process as the server process user. No additional env vars control this; auth is the only gate.

Commands

• tg-canvas push — push HTML/markdown/text/A2UI
• tg-canvas clear — clear the canvas
• tg-canvas health — check server health

Configuration