当文科生开始捣鼓区块链和AI Agent

早上8点泡杯速溶咖啡，打开VSCode继续啃Rust。没错，我是非科班转码的文科生，做前端快两年了。最近产品经理突然要求做一个能实时追踪区块链数据、还能AI对话查询的内部工具。这正好是个练手机会。

技术选型

需求需要持续运行、自动抓取数据并处理异常，单纯API调用不够用。Claude Agent SDK的自主执行特性刚好匹配。作为前端，我对区块链理解尚浅，恶补文档后才搞懂通过RPC节点获取交易数据、解析智能合约事件。中间还因gas fee计算逻辑错误被测试数据误导。

前端优化

WebSocket保持实时连接，需处理断线重连和数据积压。CSS动画在数据更新频繁时掉帧，排查发现是will-change属性未用好，配合requestAnimationFrame时机不对。这种经验全靠踩坑积累。

.data-card {
  will-change: transform, opacity;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.data-card.updating {
  transform: translateY(-2px);
  opacity: 0.95;
}

Agent配置关键

配置Agent最折磨人。system prompt必须极其详尽，否则它会自行发挥，曾擅自把交易金额单位从ETH转为WEI，导致前端显示错乱。生产环境频繁触发rate limit，通过请求队列加指数退避重试才稳定。

const agent = new ClaudeAgent({
  model: 'claude-sonnet-4-20250514',
  systemPrompt: `你是一个区块链数据分析助手。
    严格遵循：
    1. 金额单位始终用ETH，不转换
    2. 地址格式保持原始大小写
    3. 异常交易标记为待审核`,
  maxRetries: 3,
  backoffStrategy: 'exponential'
});

安全底线

差点将API密钥硬编码在前端，及时改用环境变量并加请求签名验证。用户输入必须严格校验，测试时恶意prompt险些让agent返回内部配置，立即添加内容过滤和权限控制。安全问题越早考虑越好。

项目折腾两周，客户满意，产品经理点赞。作为文科转前端，跑通区块链、AI Agent加实时数据的技术栈，成就感十足。技术探索的关键不是会什么，而是敢去学。就像学Rust，虽还在与所有权系统较劲，但每次豁然开朗都让人上瘾。