{"id":51436838,"url":"https://github.com/claude-code-expert/chatbot","last_synced_at":"2026-07-05T07:07:33.199Z","repository":{"id":345847419,"uuid":"1148503219","full_name":"claude-code-expert/chatbot","owner":"claude-code-expert","description":null,"archived":false,"fork":false,"pushed_at":"2026-03-21T00:14:24.000Z","size":142,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-03-21T15:52:58.693Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/claude-code-expert.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-02-03T03:21:08.000Z","updated_at":"2026-03-21T00:14:28.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/claude-code-expert/chatbot","commit_stats":null,"previous_names":["claude-code-expert/chatbot"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/claude-code-expert/chatbot","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/claude-code-expert%2Fchatbot","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/claude-code-expert%2Fchatbot/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/claude-code-expert%2Fchatbot/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/claude-code-expert%2Fchatbot/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/claude-code-expert","download_url":"https://codeload.github.com/claude-code-expert/chatbot/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/claude-code-expert%2Fchatbot/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35146126,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-07-05T02:00:06.290Z","response_time":100,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-07-05T07:07:30.070Z","updated_at":"2026-07-05T07:07:33.148Z","avatar_url":"https://github.com/claude-code-expert.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# AI Chatbot\n\nAWS Bedrock의 Claude 모델을 활용한 웹 기반 AI 챗봇 애플리케이션입니다.\n실시간 스트리밍 응답과 도구 사용(Tool Use)을 지원합니다.\n\n## 기술 스택\n\n| 구분 | 기술 |\n|------|------|\n| Frontend | React 19, TypeScript, Vite, Tailwind CSS, shadcn/ui |\n| Backend | Node.js, Express 5, TypeScript |\n| AI | AWS Bedrock (Claude Sonnet 4.6 / Haiku 4.5) |\n| API | Converse API + ConverseStream |\n| 스트리밍 | Server-Sent Events (SSE) |\n| 테스트 | Jest (backend), Vitest (frontend) |\n\n## 아키텍처\n\n```\nReact (Vite) → Express API → AWS Bedrock\n     ↑              ↓\n     └── SSE 스트리밍 ──┘\n```\n\n**3-tier 구조**: 프론트엔드가 Express 서버에 요청을 보내고, 서버가 AWS Bedrock API를 호출하여 SSE로 응답을 스트리밍합니다.\n\n## 프로젝트 구조\n\n```\nchatbot/\n├── frontend/                     # React 클라이언트\n│   └── src/\n│       ├── components/\n│       │   ├── chat/             # MessageList, MessageInput, MarkdownRenderer, ToolResult\n│       │   ├── layout/           # Header, Sidebar, Layout\n│       │   └── ui/               # button, card, scroll-area, textarea (shadcn/ui)\n│       ├── hooks/                # useChat, useSession, useTheme\n│       ├── services/sse.ts       # SSE 스트리밍 클라이언트\n│       └── types/\n├── backend/                      # Express 서버\n│   └── src/\n│       ├── config/               # systemPrompt (페르소나)\n│       ├── middleware/           # errorHandler, requestLogger\n│       ├── routes/               # chat (SSE), sessions (CRUD)\n│       ├── services/             # bedrock, sessionManager, messageHistory, toolOrchestrator\n│       ├── tools/                # calculator, getCurrentTime, getWeather\n│       ├── types/                # Message, Session, Tool 인터페이스\n│       └── utils/                # fallback, permission, retry, timeout, validation\n│   └── tests/                    # 단위/통합 테스트\n└── docs/                         # 와이어프레임 등\n```\n\n## 주요 기능\n\n### 실시간 스트리밍 채팅\n- SSE를 통한 토큰 단위 실시간 응답\n- 스트리밍 취소 지원 (AbortController)\n\n### 도구 사용 (Tool Use)\nClaude가 자동으로 도구를 선택하여 실행합니다:\n- **calculator** - 수학 수식 계산 (사칙연산, 거듭제곱, 제곱근)\n- **get_current_time** - 타임존별 현재 시간 조회\n- **get_weather** - 도시별 현재 날씨 조회 (Open-Meteo API)\n\n### 세션 관리\n- 다중 채팅 세션 생성/조회/수정/삭제\n- 세션별 메시지 히스토리 관리 (인메모리)\n- user-assistant 쌍 단위 히스토리 트리밍\n\n### UI\n- 다크/라이트 테마 전환\n- Markdown 렌더링 (코드 하이라이팅 포함)\n- 도구 실행 상태 표시\n- 사이드바 세션 목록\n\n## 시작하기\n\n### 사전 요구사항\n\n- Node.js 18+\n- AWS 자격증명 (Bedrock 접근 권한)\n\n### 환경 변수 설정\n\n```bash\ncp backend/.env.example backend/.env\n```\n\n```env\nAWS_REGION=us-east-1\nBEDROCK_MODEL_ID=global.anthropic.claude-sonnet-4-6\nPORT=3001\n```\n\n### 설치 및 실행\n\n```bash\n# Backend\ncd backend\nnpm install\nnpm run dev          # http://localhost:3001\n\n# Frontend (별도 터미널)\ncd frontend\nnpm install\nnpm run dev          # http://localhost:5173\n```\n\n### 빌드\n\n```bash\n# Backend\ncd backend\nnpm run build        # dist/ 출력\n\n# Frontend\ncd frontend\nnpm run build        # dist/ 출력\n```\n\n## API 엔드포인트\n\n| Method | Path | 설명 |\n|--------|------|------|\n| GET | `/api/health` | 헬스 체크 |\n| POST | `/api/chat` | 채팅 (SSE 스트리밍) |\n| POST | `/api/sessions` | 세션 생성 |\n| GET | `/api/sessions` | 전체 세션 조회 |\n| GET | `/api/sessions/:id` | 세션 조회 |\n| PUT | `/api/sessions/:id` | 세션 수정 |\n| DELETE | `/api/sessions/:id` | 세션 삭제 |\n| GET | `/api/sessions/:id/messages` | 세션별 메시지 조회 |\n| DELETE | `/api/sessions/:id/messages` | 세션별 메시지 삭제 |\n\n### 채팅 요청 예시\n\n```bash\ncurl -N -X POST http://localhost:3001/api/chat \\\n  -H \"Content-Type: application/json\" \\\n  -d '{\"sessionId\": \"test-session\", \"message\": \"안녕하세요\"}'\n```\n\n### SSE 이벤트 타입\n\n| 이벤트 | 설명 |\n|--------|------|\n| `text` | 텍스트 토큰 스트리밍 |\n| `tool_start` | 도구 실행 시작 |\n| `tool_delta` | 도구 입력 스트리밍 |\n| `tool_result` | 도구 실행 결과 |\n| `done` | 응답 완료 (토큰 사용량 포함) |\n| `error` | 에러 발생 |\n\n## 테스트\n\n```bash\n# Backend 테스트\ncd backend\nnpm test\nnpm run test:watch   # watch 모드\n\n# Frontend 테스트\ncd frontend\nnpm test\nnpm run test:watch   # watch 모드\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fclaude-code-expert%2Fchatbot","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fclaude-code-expert%2Fchatbot","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fclaude-code-expert%2Fchatbot/lists"}