个人中心
今日签到
私信列表
消息中心
搜索全站
q_code

扫码关注官方微信
cell_code

扫码下载APP
返回顶部
技能集市 > AI智能 > contextui
c

contextui上下文用户界面

Build, run, and publish visual workflows on ContextUI — a local-first desktop platform for AI agents. Create React TSX workflows (dashboards, tools, apps, visualizations), manage local Python backend servers, test workflows via scoped UI automation within the ContextUI app window, and optionally publish to the ContextUI Exchange. All tools operate locally on the user's machine under standard OS permissions — no remote execution or privilege escalation. Python backends bind to localhost. See SECU

作者: admin | 来源: ClawHub
下载
源自
ClawHub
版本
V 1.0.7
安全检测
已通过
2,085
下载量
免费
免费
0
收藏
概述
安装方式
版本历史

contextui

ContextUI — 智能体工作流平台

ContextUI 是一个本地优先的桌面平台，AI 智能体可以在其中构建、运行和销售可视化工作流。把它想象成你的工作台——你编写 React TSX，它即时渲染。无需框架设置，无需打包器配置，无需浏览器。

你可以构建的内容： 仪表盘、数据工具、聊天界面、3D 可视化、音乐生成器、视频编辑器、PDF 处理器、演示文稿、终端——任何 React 能渲染的内容。

为什么重要： 你获得了一个可视化界面。你可以为自己、为人类构建工具，或者发布到交易所供其他智能体购买。

快速开始

1. 前置条件

  • - 本地安装 ContextUI（从 contextui.ai 下载）
  • 配置 MCP 服务器（将你的智能体连接到 ContextUI）

2. 通过 MCP 连接

配置你的 MCP 客户端以连接到 ContextUI 服务器：

json
{
contextui: {
command: node,
args: [/path/to/contextui-mcp/server.cjs],
transport: stdio
}
}

MCP 服务器暴露了 32 个工具。查看 references/mcp-tools.md 获取完整 API。

3. 验证连接

bash
mcporter call contextui.list_workflows

如果返回文件夹名称（examples、user_workflows），说明已连接。

构建工作流

工作流是单个 React TSX 文件，带有可选的元数据和 Python 后端。

文件结构

WorkflowName/
├── WorkflowNameWindow.tsx # 主要 React 组件（必需）
├── WorkflowName.meta.json # 图标、颜色元数据（必需）
├── description.txt # 功能描述（交易所必需）
├── backend.py # 可选的 Python 后端
└── components/ # 可选的子组件
└── MyComponent.tsx

关键规则

  1. 1. 全局变量无需导入 — React、hooks 和工具函数由 ContextUI 全局提供
  2. Tailwind CSS — 所有样式使用 Tailwind 类。禁止使用 styled-components。
  3. 组件声明 — export const MyToolWindow: React.FC = () => { ... } 或 const MyToolWindow: React.FC = () => { ... } — 两种方式均可
  4. 命名 — 文件应为 WorkflowNameWindow.tsx（所有示例均使用此命名）。文件夹名为 WorkflowName/（不含Window）。例如 CowsayDemo/CowsayDemoWindow.tsx
  5. Python 后端 — 使用 ServerLauncher 模式（参见 references/server-launcher.md）
  6. 禁止嵌套按钮 — React/HTML 禁止
  7. 仅本地导入 — 可以导入本地 ./ui/ 子组件。不能从 npm 包导入。

⚠️ 关键：导入与全局变量

这是错误的头号来源。搞错了工作流就无法打开。

可作为全局变量使用的内容（无需导入）

tsx
// 这些直接可用——不要导入它们
React
useState, useEffect, useRef, useCallback, useMemo, useReducer, useContext

可以导入的内容

tsx
// 工作流文件夹内的本地子组件——这是唯一允许的导入类型
import { MyComponent } from ./ui/MyComponent;
import { useServerLauncher } from ./ui/ServerLauncher/useServerLauncher;
import { ServerLauncher } from ./ui/ServerLauncher/ServerLauncher;
import { MyTab } from ./ui/MyTab;

❌ 错误——常见导致工作流崩溃的错误

tsx
// ❌ 绝对不要——window.ContextUI 不可靠定义
const { React, Card, Button } = window.ContextUI;

// ❌ 绝对不要——没有 npm/node_modules 导入
import React from react;
import styled from styled-components;
import axios from axios;

// ❌ 绝对不要——styled-components 不可用
const Container = styled.div...;

✅ 正确模式

两种 hook 访问方式均可——选择一种并保持一致：

tsx
// 方式 1：裸全局变量（CowsayDemo、Localchat2、ImageToText 使用）
const [count, setCount] = useState(0);
const ref = useRef(null);

// 方式 2：React.* 前缀（ThemedWorkflowTemplate、MultiColorWorkflowTemplate 使用）
const [count, setCount] = React.useState(0);
const ref = React.useRef(null);

完整示例：
tsx
// 仅从工作流文件夹中的本地文件导入
import { useServerLauncher } from ./ui/ServerLauncher/useServerLauncher;
import { ServerLauncher } from ./ui/ServerLauncher/ServerLauncher;
import { MyFeatureTab } from ./ui/MyFeatureTab;

// 全局变量直接可用——直接使用它们
export const MyToolWindow: React.FC = () => {
const [count, setCount] = useState(0); // useState 是全局变量
const ref = useRef(null); // useRef 是全局变量

useEffect(() => {
// useEffect 是全局变量
}, []);

return (


{/ 所有样式使用 Tailwind 类 /}

);
};

子组件

./ui/ 中的子组件遵循相同规则——全局变量可用，无 npm 导入：

tsx
// ui/MyFeatureTab.tsx
// React/hooks 无需导入——它们在这里也是全局变量

interface MyFeatureTabProps {
serverUrl: string;
connected: boolean;
}

export const MyFeatureTab: React.FC = ({ serverUrl, connected }) => {
const [data, setData] = useState([]);

// 从 Python 后端获取数据
const loadData = async () => {
const res = await fetch(${serverUrl}/data);
const json = await res.json();
setData(json.items);
};

return (




);
};

最小完整示例（无后端）

tsx
// MyTool/MyTool.tsx — 最简单的工作流

export const MyToolWindow: React.FC = () => {
const [count, setCount] = useState(0);

return (


我的工具


onClick={() => setCount(c => c + 1)}
className=px-4 py-2 bg-blue-600 hover:bg-blue-500 text-white rounded-lg
>
点击了 {count} 次


);
};

最小完整示例（带 Python 后端）

tsx
// MyServer/MyServerWindow.tsx — 带 Python 后端的最简单工作流

import { useServerLauncher } from ./ui/ServerLauncher/useServerLauncher;
import { ServerLauncher } from ./ui/ServerLauncher/ServerLauncher;

export const MyServerWindow: React.FC = () => {
const server = useServerLauncher({
workflowFolder: MyServer,
scriptName: server.py,
port: 8800,
serverName: my-server,
packages: [fastapi, uvicorn[standard]],
});

const [tab, setTab] = useState(setup);

useEffect(() => {
if (server.connected) setTab(main);
}, [server.connected]);

return (


{/ 标签栏 /}


标签

skill ai

通过对话安装

该技能支持在以下平台通过对话安装：

OpenClaw WorkBuddy QClaw Kimi Claude

方式一：安装 SkillHub 和技能

帮我安装 SkillHub 和 contextui-1776372282 技能

方式二：设置 SkillHub 为优先技能安装源

设置 SkillHub 为我的优先技能安装源，然后帮我安装 contextui-1776372282 技能

通过命令行安装

skillhub install contextui-1776372282

下载

⬇ 下载 contextui v1.0.7（免费）

文件大小: 31.49 KB | 发布时间: 2026-4-17 14:58

v1.0.7 最新 2026-4-17 14:58
- Added SECURITY.md to clearly document security boundaries and trust model.
- Updated SKILL.md description to clarify local-only operation, removal of remote execution, and security scope.
- Declared new environment variable CONTEXTUI_API_KEY for using the ContextUI Exchange.
- Provided Exchange dashboard and YouTube links in metadata.
- Emphasized that all workflow execution and Python backends are strictly local, with no privilege escalation.

相关推荐

s

self-improvement

Captures learnings, errors, and corrections to enable continuous improvement. Use when: (1) A command or operation fails unexpectedly, (2) User corrects Claude ('No, that's wrong...', 'Actually...'), (3) User requests a capability that doesn't exist, (4) An external API or tool fails, (5) Claude realizes its knowledge is outdated or incorrect, (6) A better approach is discovered for a recurring task. Also review learnings before major tasks.

⭐ 3209 ⬇ 392959
AI智能
s

self-improvement

Captures learnings, errors, and corrections to enable continuous improvement. Use when: (1) A command or operation fails unexpectedly, (2) User corrects Claude ('No, that's wrong...', 'Actually...'), (3) User requests a capability that doesn't exist, (4) An external API or tool fails, (5) Claude realizes its knowledge is outdated or incorrect, (6) A better approach is discovered for a recurring task. Also review learnings before major tasks.

⭐ 3209 ⬇ 392958
AI智能
s

self-improvement

Captures learnings, errors, and corrections to enable continuous improvement. Use when: (1) A command or operation fails unexpectedly, (2) User corrects Claude ('No, that's wrong...', 'Actually...'), (3) User requests a capability that doesn't exist, (4) An external API or tool fails, (5) Claude realizes its knowledge is outdated or incorrect, (6) A better approach is discovered for a recurring task. Also review learnings before major tasks.

⭐ 3195 ⬇ 389590
AI智能
s

self-improvement

Captures learnings, errors, and corrections to enable continuous improvement. Use when: (1) A command or operation fails unexpectedly, (2) User corrects Claude ('No, that's wrong...', 'Actually...'), (3) User requests a capability that doesn't exist, (4) An external API or tool fails, (5) Claude realizes its knowledge is outdated or incorrect, (6) A better approach is discovered for a recurring task. Also review learnings before major tasks.

⭐ 3177 ⬇ 386645
AI智能

多链集团旗下-闲社网

闲社网热线
免费联系电话
0527-80111111
            qqline

服务时间：周一到周日 8:00-24:00

  • 公众号
    闲社 APP下载 闲社
关注闲社网
  • wxkf

    闲社在线客服

  • wx

    关注闲社网微信

  • app

    闲社网APP

Archiver·手机版·闲社网·闲社论坛·羊毛社区· 多链控股集团有限公司 · 苏ICP备2025199260号-1

Powered by Discuz! X5.0   © 2024-2025 闲社网·线报更新论坛·羊毛分享社区·http://xianshe.com

p2p_official_large