最近在逛Makeword的时候，发现一个关于Claude的项目非常好玩。简单来说，就是把claude的像素logo用3D打印机打印出来，配上一个屏幕来显示文字、表情等。这个项目是通过在手机上访问特定网页的形式，来实现屏幕上输出信息的。

结合最近在研究的Claude Code 的Hook功能，我觉得可以让这个项目更好玩，所以就有了这篇文章介绍的小项目。

问题引入

在使用claude code时，经常遇到的一个问题就是「随机时长的等待」。在AI生成结果时，我们很可能会切换到其他工作，但这个过程中claude可能需要我们参与权限判断，或已经生成了结果。我们需要时不时切换到终端去检查状态。

Claude其实有一个hook功能，在特定事件发生时，可以自动运行一个脚本。并且这些动作不依赖AI的判断，运行确定性高。详细hook使用，可以参考Claude的官方文档，官方目前定义了26种事件，同时不仅可以触发脚本，也可以发起HTTP请求。

原理介绍

这个ClaudeCode的外设原理如下：
1、使用esp32外接ST7735的屏幕，并在esp32上启动HTTP的服务。
2、esp32设备接收到外部HTTP请求时，会根据预设规则将POST的内容显示在屏幕上。
3、在Claude上配置hook规则，当发生「UserPromptSubmit」事件时，在屏幕上显示「COPY」，当发生「Stop」事件或「Notification」事件时，在屏幕上显示「DONE」。

• UserPromptSubmit事件解释：真实用户发出了一个问题或回复后立即触发。
• Stop事件解释：Claude完成了结果生成。
• Notification事件解释：Claude发出一个提醒。

效果演示

接下来就一步步来看看，如何制作一个这样的小装置：

硬件和组装

这个项目硬件构成比较简单：
1、esp32 c3 surper mini 开发板，需要选择带焊针，这样可以直接用杜邦线进行连接。
2、st7735屏幕一个，大小为1.8寸。
3、双母头杜邦线至少7根。
 

3、3D打印外壳，已上传到拓竹Makeword：https://makerworld.com.cn/zh/models/2374547-clawd-mochi-claude-code-shi-ti-ji-xiang-wu#profileId-2694151
4、此外还需要一些m2的螺丝和热熔胶来固定。
5、如下图接线：
 

6、开发板和屏幕还有其他型号，如果你使用了不同的零件，那接线和3D打印外壳都不适用了。

软件程序

esp32侧的程序

项目程序，使用流程如下：
1、下载安装Thonny这个软件，这个是用来上传程序到开发板的。
2、还需要安装CH340驱动程序，这个是为了连接串口用到。
3、使用数据线连接电脑和esp32，依次点击「运行」、「配置解释器」、「安装或更新MicroPython」、「Target port」选择连接esp32设备的串口、选择适合的MicroPython版本，进行安装。
4、在Thonny主界面右下角，选择对应串口的esp32设备。
 

5、从github仓库和gitee下载程序文件，并上传到esp32开发板。
6、在项目目录中，找到wificonfig.json文件打开编辑，修改为自己的网络名称和密码，并保存。
7、Ctrl+D软启动，应该可以看到shell中显示了esp32的局域网地址，记录下这个地址，随后需要用到。
 

8、后续日常使用，并不需要Thonny这个软件，只需要连接电源就可以。

ClaudeCode侧配置

1、打开ClaudeCode配置文件，路径类似为：/Users/xxxxx/.claude/settings.json，具体路径不同OS、不同用户名都不一致。
2、在配置文件中，增加如下内容，其中{esp32ip}需要替换为上一步获取到的esp32局域网地址。

{
  "hooks": {
    "Notification": [
      {
        "hooks": [
          {
            "type": "http",
            "url":"http://{esp32ip}/claude"
          }
        ]
      }
    ],
    "Stop": [
      {
        "hooks": [
          {
            "type": "http",
            "url":"http://{esp32ip}/claude"
          }
        ]
      }
    ],
    "UserPromptSubmit":[
      {
        "match":{"type":"human"},
        "hooks":[
          {
            "type":"http",
            "url":"http://{esp32ip}/claude"
          }

        ]

      }
    ]
  }
}

3、hooks配置部分，作为settings.json的一部分如下图。
 

更多可能

目前仅仅是一个很简单的版本，实现了基础流程拉通，还有很多细节可以完善。

比如，在文章开头提到的Makeword上的项目，实现了很多动画效果，如在屏幕上实现眼睛眨动这样的动态效果，如果增加这种动态效果而不仅仅是文字，那体验很好多。