claude-code-webui
Web-based interface for Claude CLI with streaming chat responses
파일 탐색기
최종 버전 다운로드 (.zip)- settings.json
- 1-bug.yml
- 2-feature.yml
- 3-documentation.yml
- config.yml
- ci.yml
- demo-comparison.yml
- release.yml
- tagpr.yml
- dependabot.yml
- pull_request_template.md
- release.yml
- args.ts
- deno.ts
- node.ts
- validation.ts
- abort.ts
- chat.test.ts
- chat.ts
- conversations.ts
- histories.ts
- projects.ts
- conversationLoader.ts
- grouping.ts
- parser.ts
- pathUtils.test.ts
- pathUtils.ts
- timestampRestore.ts
- config.ts
- deno.ts
- node.ts
- types.ts
- build-bundle.js
- copy-frontend.js
- generate-version.js
- prepack.js
- runtime.test.ts
- fs.ts
- logger.ts
- os.ts
- .gitignore
- .prettierignore
- app.ts
- deno.json
- deno.lock
- eslint.config.js
- package-lock.json
- package.json
- tsconfig.json
- types.ts
- vitest.config.ts
- screenshot-desktop-basic-dark.png
- screenshot-desktop-basic.png
- screenshot-desktop-codeGeneration-dark.png
- screenshot-desktop-codeGeneration.png
- screenshot-desktop-fileOperations-dark.png
- screenshot-desktop-fileOperations.png
- screenshot-mobile-basic-dark.png
- screenshot-mobile-basic.png
- screenshot-mobile-codeGeneration-dark.png
- screenshot-mobile-codeGeneration.png
- screenshot-mobile-fileOperations-dark.png
- screenshot-mobile-fileOperations.png
- capture-screenshots.ts
- compare-demo-videos.ts
- demo-constants.ts
- README.md
- record-demo.ts
- ChatInput.tsx
- ChatMessages.tsx
- DemoPermissionInputWrapper.tsx
- HistoryButton.tsx
- PermissionInputPanel.tsx
- PlanPermissionInputPanel.test.tsx
- PlanPermissionInputPanel.tsx
- CollapsibleDetails.tsx
- MessageContainer.tsx
- GeneralSettings.tsx
- ChatPage.tsx
- DemoPage.tsx
- HistoryView.tsx
- MessageComponents.tsx
- ProjectSelector.tsx
- SettingsButton.tsx
- SettingsModal.tsx
- TimestampComponent.tsx
- api.ts
- SettingsContext.tsx
- SettingsContextTypes.ts
- useAbortController.ts
- useChatState.ts
- usePermissionMode.test.ts
- usePermissionMode.ts
- usePermissions.test.ts
- usePermissions.ts
- usePlanApproval.test.ts
- useMessageProcessor.ts
- useStreamParser.test.ts
- useStreamParser.ts
- useClaudeStreaming.test.ts
- useClaudeStreaming.ts
- useDemoAutomation.ts
- useHistoryLoader.ts
- useMessageConverter.ts
- useSettings.ts
- settings.ts
- window.d.ts
- constants.ts
- contentUtils.ts
- environment.ts
- id.ts
- messageConversion.ts
- messageTypes.ts
- mockResponseGenerator.ts
- pathUtils.ts
- storage.ts
- time.ts
- toolUtils.test.ts
- toolUtils.ts
- UnifiedMessageProcessor.ts
- App.test.tsx
- App.tsx
- index.css
- main.tsx
- test-setup.ts
- types.ts
- vite-env.d.ts
- demo-validation.spec.ts
- plan-mode.spec.ts
- .gitignore
- eslint.config.js
- index.html
- package-lock.json
- package.json
- playwright.config.ts
- README.md
- tsconfig.app.json
- tsconfig.json
- tsconfig.node.json
- vite.config.ts
- types.ts
- .gitignore
- .lefthook.yml
- .mcp.json
- .tagpr
- CHANGELOG.md
- CLAUDE.md
- LICENSE
- Makefile
- README.md
# 설치 가이드
1. 코드 내려받기
git clone https://github.com/sugyan/claude-code-webui
깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.
cd claude-code-webui
방금 내려받은 프로젝트 폴더 안으로 이동합니다.
2. 공식 설치 스크립트
쉬움 추천사전 준비물
- Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다.
npm install -g claude-code-webui
npm 레지스트리에 배포된 패키지를 전역으로 설치합니다. 소스 클론이 필요 없습니다.
설치 후 새 터미널을 열고, 프로그램의 버전 확인 명령(예: --version)으로 정상 설치됐는지 확인하세요.
이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.
3. Node.js
쉬움사전 준비물
npm install -g claude-code-webui
npm 레지스트리에 배포된 패키지를 전역으로 설치합니다. 소스 클론이 필요 없습니다.
cd backend && npm run dev # Node.js runtime
방금 내려받은 프로젝트 폴더 안으로 이동합니다.
cd frontend && npm run dev
방금 내려받은 프로젝트 폴더 안으로 이동합니다.
npm run dev # Node.js runtime
개발/실행 서버를 켭니다.
npm run dev
개발/실행 서버를 켭니다.
명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.
이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.
4. Make
보통사전 준비물
- Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
- Make Linux/macOS는 보통 기본 설치되어 있습니다. Windows는 별도 설치(예: MSYS2, WSL)가 필요합니다.
make
생성된 빌드 설정을 바탕으로 실제 컴파일을 진행해 실행 파일을 만듭니다.
에러 없이 끝나면 성공입니다. 생성된 실행 파일을 직접 실행해보세요.
// repository documentation
Was this content helpful?
(0 ratings)
