제가 PinchChat을 만들었습니다, OpenClaw용 오픈소스 웹채팅 UI

Source: Dev.to

개요

저는 개인 AI 어시스턴트로 OpenClaw를 한동안 사용해 왔으며, 기본 터미널/CLI 인터페이스는 일상적인 사용에 충분하지 않았습니다. 그래서 저는 OpenClaw 전용으로 설계된 가볍고 자체 호스팅 가능한 웹‑채팅 UI인 PinchChat를 만들었습니다.
이는 여러분만의 에이전트를 위한 ChatGPT‑와 같은 인터페이스를 제공합니다.

기능

• Live tool‑call visualization – 에이전트가 실시간으로 무엇을 하는지(파일 읽기, 웹 검색, 코드 실행) 색상 배지와 확장 가능한 상세 정보로 확인합니다.
• Multi‑session management – 사이드바에 모든 활성 세션(크론 작업, 서브 에이전트, 다양한 채널의 DM)이 표시됩니다.
• Token usage tracking – 세션별 실시간 진행 막대로 남은 컨텍스트 양을 확인할 수 있습니다.
• Streaming – 에이전트가 생각하고 타이핑하는 과정을 토큰 단위로 실시간으로 볼 수 있습니다.
• Inline images – 생성되거나 읽힌 이미지가 채팅에 바로 표시되며 라이트박스 미리보기를 제공합니다.
• Context compaction button – 토큰 사용량이 많아지면 수동으로 압축을 트리거합니다.
• i18n – 8개 언어(EN, FR, ES, DE, JA, PT, ZH, IT)를 지원합니다.
• PWA installable – 모바일 및 데스크톱에서 독립 실행형 앱으로 동작합니다.
• Theming – 여러 색상 테마와 전체 다크 모드(Dark, Light, OLED Black)를 제공합니다.
• Slash‑command autocomplete – OpenClaw 명령에 빠르게 접근할 수 있습니다.
• Conversation export – 채팅을 Markdown 형식으로 다운로드합니다.
• Session info popover – 토큰 세부 내역과 메타데이터를 한눈에 볼 수 있습니다.

스택

• 프론트엔드: React + Vite + Tailwind CSS
• 배포: Docker image available on ghcr.io; one‑command deploy.

Try it

Badges

Demo

PinchChat은 MIT 라이선스를 따르며, PR을 환영합니다. 다른 OpenClaw 사용자들의 피드백을 받고 싶습니다—웹 채팅 UI에서 어떤 기능을 보고 싶으신가요?