Noureddine RAMDI / claude-office: integrating Claude Code into a full-stack TypeScript environment

Created Sat, 23 May 2026 20:41:14 +0000 Modified Sat, 23 May 2026 20:41:27 +0000

paulrobello/claude-office

claude-office is a full-stack environment built around Anthropic’s Claude Code CLI, designed to provide a developer-friendly interface for running and visualizing Claude Code commands. It combines a TypeScript backend and frontend with Python tooling, aiming to streamline the interaction with Claude Code or OpenCode agents through a local web interface.

What claude-office is and its architecture

At its core, claude-office is a TypeScript project that integrates tightly with Claude Code CLI or OpenCode running on Bun. It provides a web UI on localhost (default port 3000) where users can execute Claude Code commands and see their results visualized.

The architecture consists of three main components:

  • Backend: A TypeScript service that handles command execution, API requests, and AI enhancements. It requires Python 3.13+ and the Python package manager uv for backend dependency management.

  • Frontend: A TypeScript-based UI built with Bun package manager, serving the web interface for user interaction.

  • Hooks: Custom integrations installed into Claude Code to extend its capabilities within this environment.

Optional AI-powered features, such as agent name generation and task summaries, are enabled by providing a Claude Code OAuth token in a .env file within the backend folder.

This setup leverages both JavaScript/TypeScript and Python ecosystems, reflecting a pragmatic approach to combining tooling best suited for each task. The use of Bun for frontend dependency management signals a modern, fast runtime choice.

Technical strengths and design tradeoffs

One notable strength is the modular separation of concerns: backend logic, frontend UI, and hooks are clearly partitioned, facilitating maintainability and extensibility.

The backend’s reliance on Python 3.13+ alongside TypeScript is an interesting tradeoff. It allows the use of Python’s rich ecosystem (e.g., uv package manager) for some backend tasks, while TypeScript provides strong typing and modern JavaScript features for the rest.

Using Bun on the frontend offers faster install times and runtime performance compared to traditional Node.js setups, improving developer experience. However, Bun is still relatively new and might present compatibility challenges or a smaller ecosystem.

The integration with Claude Code CLI or OpenCode means developers can work with AI agents directly in their environment, but it requires proper configuration and authentication, which may be a barrier for newcomers.

The optional AI enhancements dependent on OAuth tokens introduce an external dependency on Claude Code’s authentication system, which adds complexity but enables richer features.

Quick start

For a quick setup, the repository provides a straightforward set of commands:

git clone https://github.com/paulrobello/claude-office.git
cd claude-office
make install-all
make dev-tmux

After running these commands, the web interface becomes available at http://localhost:3000, where any Claude Code command can be run and visualized.

Prerequisites before installation include:

  • Python 3.13 or newer
  • Node.js 20 or newer (Bun is auto-detected if installed)
  • Python package manager uv
  • Claude Code CLI installed and configured, or alternatively OpenCode with Bun

For manual installation, backend and frontend dependencies can be installed separately:

# Backend
cd backend && uv sync && cd ..

# Frontend
cd frontend && bun install && cd ..

# Install hooks into Claude Code
make hooks-install

Docker deployment commands are also provided for containerized environments, supporting build, up, down, and logs operations.

verdict

claude-office is relevant for developers who want to integrate Anthropic’s Claude Code CLI into a web-based environment with a modern tech stack. Its use of TypeScript across backend and frontend, combined with Python tooling, provides flexibility but may require comfort with multiple languages and runtimes.

The project assumes some familiarity with AI CLI tooling and authentication, which might limit its accessibility for beginners. However, for those already working with Claude Code or OpenCode, claude-office offers a neat way to visualize and manage AI commands locally.

The tradeoff of mixing Python and TypeScript ecosystems introduces complexity but also leverages the strengths of both. The use of Bun is a forward-looking choice that could improve developer experience, though it might face ecosystem limitations.

Overall, claude-office is a practical integration project rather than a standalone AI framework. Its best use case is as an interface layer for Claude Code users wanting a richer local development experience with AI agents.


→ GitHub Repo: paulrobello/claude-office ⭐ 353 · TypeScript