Skip to content

auenger/cc-prompter

BranchesTags

Repository files navigation

CC Prompter

哪里不对点哪里，So easy！

一个 Vite / Next.js 插件，将 Claude Code CLI 接入你的前端开发工作流。通过可视化元素定位 + 常驻 PTY 会话，实现「点击 → 描述 → 代码自动修改 → HMR 刷新」的闭环。

🎯 精确定位修改点 — 不再需要费劲描述「左上角那个蓝色按钮」或者截图了，直接点击页面元素，源码路径、行列号自动带上。

💰 节省 tokens 神器 — 不需要让 Claude 反复探索项目结构、搜索文件、猜测位置，一个点击搞定所有上下文。

⚡ 所见即所得 — 改完自动 HMR 刷新，边看边改，开发体验拉满。

Shift+Alt 点击页面元素 → Claude Code 直接改代码 → 页面自动刷新

CC Prompter Demo

快速开始

安装

macOS / Linux

npm install cc-prompter

macOS 和 Linux 开箱即用，PTY 模块（node-pty-prebuilt-multiarch）会自动安装。

Windows

Windows 需要额外安装 PTY 原生模块（npm 上的 PTY 包不含 Windows 预编译）：

# 1. 安装 cc-prompter
npm install cc-prompter

# 2. 安装 PTY 模块（跳过自动编译，只装 JS 部分）
cd node_modules/cc-prompter
npm install @homebridge/node-pty-prebuilt-multiarch --ignore-scripts

# 3. 下载 Windows 原生二进制
#    从 GitHub Releases 下载对应版本：
#    https://github.com/nicabar/node-pty-prebuilt-multiarch/releases
#    找到 win32-x64 的 prebuild .tar.gz 文件，下载并解压到：
#    node_modules/@homebridge/node-pty-prebuilt-multiarch/build/Release/

如果 GitHub 下载超时（国内网络），可以：

  • 使用 GitHub 镜像下载：https://ghfast.top/https://github.com/nicabar/node-pty-prebuilt-multiarch/releases/download/...
  • 或者在有网络的环境下载后拷贝过去
  • Node 18 / 20 / 22 均支持

前提：本地需要已安装 Claude Code CLI（终端执行 claude 命令可用）。插件仅在 dev 模式生效，npm run build 不会注入任何代码。

配置（Vite）

在 vite.config.ts 中添加插件（一行配置即可）：

import { ccPromptPlugin } from 'cc-prompter';
import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [
    ccPromptPlugin(),  // ← 这一行就够了
    react(),
  ],
});

配置（Next.js）

在 next.config.js 中使用 withCcPrompt 包装：

const { withCcPrompt } = require('cc-prompter/next');

module.exports = withCcPrompt()({
  // ... 正常 Next.js 配置
});

withCcPrompt() 内部自动完成三件事：

  1. 集成 code-inspector-plugin（编译时给 DOM 打上源码路径标签）
  2. 启动 Express sidecar 服务（管理 Claude PTY 会话）
  3. 通过 webpack entry 注入交互脚本（监听 Shift+Alt 点击，弹出面板）

支持 Next.js Pages Router + App Router（webpack 模式）。Turbopack 暂不支持。

配置（Webpack）

在 webpack.config.js 中添加插件（适用于任意 webpack 项目）：

const { CcPromptWebpackPlugin } = require('cc-prompter/webpack');

module.exports = {
  plugins: [
    new CcPromptWebpackPlugin(),  // ← 仅 dev 模式生效
    // ... 其他插件
  ],
};

CcPromptWebpackPlugin 是一个标准 webpack Plugin，自动完成与 Next.js 版相同的三件事。 默认在 NODE_ENV !== 'production' 时激活，也可手动传 dev: true/false。

一键安装（给 Claude Code 用）

复制下面这行，粘贴给 Claude Code，它会自动帮你完成安装和配置：

帮我安装 cc-prompter 并配置。这是一个 Vite/Next.js 插件，用于集成 Claude Code CLI 和 code-inspector 元素定位功能。
安装方法：
- macOS / Linux: 直接 npm install cc-prompter 即可
- Windows: npm install cc-prompter 后，还需要安装 PTY 原生模块：
  1. cd node_modules/cc-prompter
  2. npm install @homebridge/node-pty-prebuilt-multiarch --ignore-scripts
  3. 从 https://github.com/nicabar/node-pty-prebuilt-multiarch/releases 下载 win32-x64 的 prebuild 压缩包
  4. 解压到 node_modules/@homebridge/node-pty-prebuilt-multiarch/build/Release/
如果 GitHub 下载超时，使用 ghfast.top 镜像。

Vite 配置方法：在 vite.config.ts 的 plugins 数组中添加 ccPromptPlugin()，示例：
import { ccPromptPlugin } from 'cc-prompter';
plugins: [ccPromptPlugin(), react()]

Next.js 配置方法：在 next.config.js 中使用 withCcPrompt 包装，示例：
const { withCcPrompt } = require('cc-prompter/next');
module.exports = withCcPrompt()({ /* next config */ });

Webpack 配置方法：在 webpack.config.js 中添加 CcPromptWebpackPlugin，示例：
const { CcPromptWebpackPlugin } = require('cc-prompter/webpack');
plugins: [new CcPromptWebpackPlugin()]

怎么用

启动

npm run dev

启动后，浏览器打开你的开发页面，CC Prompter 已经在后台就绪了。

触发面板

操作 说明
Shift + Alt + 鼠标悬停 进入元素定位模式。鼠标移到哪个元素上，哪个元素会高亮标记，顶部浮出源码路径（如 src/components/Button.tsx:12:5）
Shift + Alt + 点击元素 弹出 CC Prompter 面板（浮动 iframe），自动将点击元素的文件路径、行列号附加到当前 session 的上下文中

面板弹出后，你可以直接在输入框描述想要的修改，比如「把按钮改成圆角蓝色」。Claude 会直接修改代码文件，Vite HMR 自动热更新页面。

面板控制

操作 说明
Escape 隐藏面板（面板不会销毁，会话保持）
Ctrl + Shift + P 重新显示面板 / 召回面板。随时用这个快捷键把隐藏的面板调出来
拖拽面板顶栏 自由移动面板位置
拖拽面板边缘/四角 调整面板大小

多 Session

面板顶部有 Tab 栏，支持多会话并行：

  • 点击 「+」 创建新 Session
  • 每个 Session 拥有独立的 Claude 进程、源码定位、对话上下文
  • 在 Session 1 执行修改的同时，可以在 Session 2 发起另一个请求
  • 切换 Tab 互不干扰，SSE 事件只渲染到对应 Session

中断生成

Claude 正在生成时，点击输入框旁边的 Stop 按钮，发送 Escape 中断。会话不会销毁，可以继续对话。

功能特性

  • 🎯 元素定位 — 内置 code-inspector-plugin，Shift+Alt 悬停即显示源码路径
  • 💬 多 Session — 多个独立 Claude 会话并行，Tab 切换互不干扰
  • ⚡ 流式渲染 — Markdown 实时渲染，工具调用按序展示，进度指示
  • ⏹ 随时中断 — Stop 按钮打断 Claude 生成，会话不销毁
  • 🖼 灵活面板 — 浮动 iframe，拖拽移动、边缘缩放、快捷键召回
  • 🔌 零配置 — 一行配置搞定所有集成（Vite / Next.js 均支持）
  • 🏭 零侵入 — 仅 dev 模式生效，生产构建不注入任何代码

构建工具兼容性

底层使用 code-inspector-plugin，已支持主流前端构建工具：

构建工具 CC Prompter 状态 说明
Vite ✅ 完整支持 ccPromptPlugin() — 默认配置
Webpack ✅ 完整支持 CcPromptWebpackPlugin — 通用 webpack 插件
Next.js (webpack) ✅ 完整支持 withCcPrompt() — Pages + App Router
Next.js (Turbopack) 🔜 计划中 code-inspector 已支持
esbuild 🔜 计划中 code-inspector 已支持
Mako 🔜 计划中 code-inspector 已支持

code-inspector-plugin 本身已支持上述五种构建工具。CC Prompter 的 sidecar 和脚本注入部分与构建工具无关，只需适配各工具的插件注册方式即可扩展。

配置选项

interface CcPromptOptions {
  /** Sidecar 端口，默认 3456（被占用时自动 +1） */
  port?: number;
  /** 项目根目录，默认 vite config.root */
  root?: string;
  /** 是否启用 code-inspector，默认 true */
  inspector?: boolean;
}

示例

// Vite — 自定义端口
ccPromptPlugin({ port: 4000 })

// Vite — 禁用内置 code-inspector（你自己配置）
ccPromptPlugin({ inspector: false })
// Next.js — 自定义端口
module.exports = withCcPrompt({ port: 4000 })({ /* next config */ })

// Next.js — 禁用 code-inspector
module.exports = withCcPrompt({ inspector: false })({ /* next config */ })

架构

┌─────────────────────────────────────────────────┐
│         Vite / Next.js Dev Server               │
│                                                  │
│  ┌──────────┐   ┌───────────┐   ┌────────────┐  │
│  │  React    │   │  inject.js│   │  panel.html│  │
│  │  App      │◄──│  (events) │──►│  (iframe)  │  │
│  └──────────┘   └─────┬─────┘   └─────┬──────┘  │
│                       │ postMessage       │ SSE   │
└───────────────────────┼──────────────────┼────────┘
                        │                  │
                   ┌────▼──────────────────▼────┐
                   │     Sidecar (Express)       │
                   │     localhost:3456          │
                   │                             │
                   │  ┌───────┐  ┌───────┐      │
                   │  │ PTY 1 │  │ PTY 2 │ ...  │
                   │  │ Claude│  │ Claude│      │
                   │  └───────┘  └───────┘      │
                   └─────────────────────────────┘
组件 技术 说明
vite-plugin TypeScript Vite 集成：code-inspector + sidecar + 脚本注入
next-plugin TypeScript Next.js 集成：webpack entry + DefinePlugin 注入
sidecar Express 管理 PTY session 生命周期，REST API + SSE 流
pty-session node-pty 管理 Claude CLI 进程，PTY 输出 + JSONL 双通道解析
panel.html 纯 HTML/CSS/JS iframe 面板 UI，多 session tab，Markdown 渲染
inject.js 纯 JS 注入主应用，监听 code-inspector 事件，管理面板容器

API 端点

Sidecar 自动启动在端口 3456（被占用时自动递增）：

方法 路径 说明
GET /api/sessions 列出所有会话
POST /api/sessions 创建新会话
POST /api/sessions/:id/message 发送消息（SSE 流式响应）
POST /api/sessions/:id/command 发送命令（/compact、/new）
POST /api/sessions/:id/interrupt 中断当前生成
DELETE /api/sessions/:id 销毁会话

开发

# 安装依赖
cd packages/cc-prompter && npm install

# 构建
npm run build

# 监听模式
npm run dev

# 在 demo 项目中测试
cd ../../demo && npm link cc-prompter
npm run dev

技术栈

  • TypeScript — 类型安全
  • tsup — ESM + CJS 双格式构建
  • node-pty — 终端模拟器，交互式 Claude CLI
  • Express — Sidecar HTTP 服务器
  • code-inspector-plugin — 编译时 DOM 打标 + 运行时交互
  • 纯 HTML/CSS/JS — 面板 UI，零框架依赖

License

MIT © 杨正武

About

在 Vite 项目中 Shift+Alt 点击任意元素， 弹出 Claude Code 面板，描述你想改什么，代码自动修改、页面自动刷新。

auenger.github.io/cc-prompter/

Resources

Readme

License

MIT license
Activity

Stars

3 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages