Claude Code HTTP Hooks: 웹앱으로 AI 에이전트 제어하기

// Express.js 예시
app.post('/claude-hook', (req, res) => {
 const { event, context } = req.body;
 
 if (event.type === 'file_write') {
 // 파일 쓰기 승인 여부를 웹 대시보드에서 확인
 if (isDangerousPath(event.path)) {
 res.json({ approved: false, reason: 'Sensitive file' });
 } else {
 res.json({ approved: true });
 }
 }
});

// hooks/file-protection.ts
const PROTECTED_PATHS = [
 '.env',
 'secrets/',
 'config/production.yml'
];
 
app.post('/hook', async (req, res) => {
 if (req.body.event.type === 'file_write') {
 const path = req.body.event.path;
 
 if (PROTECTED_PATHS.some(p => path.includes(p))) {
 // Slack으로 알림 전송
 await slackNotify({
 text: ` Claude Code가 민감한 파일 수정 시도: ${path}`,
 channel: '#security'
 });
 
 return res.json({
 approved: false,
 message: '민감한 파일은 수동 승인이 필요합니다.'
 });
 }
 }
 
 res.json({ approved: true });
});

// hooks/cost-tracking.ts
app.post('/hook', async (req, res) => {
 const { event, context } = req.body;
 
 // API 호출 비용 추적
 if (event.type === 'api_call') {
 const cost = estimateCost(event.model, event.tokens);
 
 await db.usage.create({
 data: {
 userId: context.user,
 model: event.model,
 tokens: event.tokens,
 cost: cost
 }
 });
 
 // 일일 한도 체크
 const todayTotal = await db.usage.sum({ where: { 
 userId: context.user,
 date: new Date()
 }});
 
 if (todayTotal > DAILY_LIMIT) {
 return res.json({
 approved: false,
 message: '오늘 일일 한도를 초과했습니다.'
 });
 }
 }
 
 res.json({ approved: true });
});

// 실시간 승인 대시보드
app.get('/dashboard', (req, res) => {
 res.render('dashboard', {
 pendingActions: await getPendingActions()
 });
});
 
// 웹소켓으로 실시간 이벤트 전송
io.on('connection', (socket) => {
 socket.on('approve', async (eventId) => {
 await approveEvent(eventId);
 io.emit('event_approved', eventId);
 });
});

# 1. 로컬에서 웹 서버 실행
npm run dev # http://localhost:3000
 
# 2. Claude Code 설정
claude-code --http-hook=http://localhost:3000/hook

import express from 'express';
 
const app = express();
app.use(express.json());
 
app.post('/hook', (req, res) => {
console.log('Event:', req.body);
res.json({ approved: true });
});
 
app.listen(3000);

claude-code --http-hook=http://localhost:3000/hook