joelhooks

Opencode Vibe — Design skill for Claude Code

Design community

🏄‍♂️ Next.js 16 web UI for OpenCode - real-time chat with streaming, SSE sync, and React Server Components.

How to install Opencode Vibe

This entry records only its repository, not the path inside it, so there is no exact command to give. Open joelhooks/opencode-vibe and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Opencode Vibe does

🏄‍♂️ Next.js 16 web UI for OpenCode - real-time chat with streaming, SSE sync, and React Server Components.

Alternatives in Design

Studio — Launch the local design Studio — a live token editor over the latest extraction 3.6k ★
Claude Powerline — by Owloops - A vim-style powerline statusline for Claude Code with real-time usage tracking, git integration 940 ★
Home Assistant Vibecode Agent — Home Assistant MCP server agent 617 ★

README

opencode-vibe 🏄‍♂️

                                      _      │       _ _
  ___  _ __   ___ _ __   ___ ___   __| | ___ │__   _(_) |__   ___
 / _ \| '_ \ / _ \ '_ \ / __/ _ \ / _` |/ _ \│\ \ / / | '_ \ / _ \
| (_) | |_) |  __/ | | | (_| (_) | (_| |  __/│ \ V /| | |_) |  __/
 \___/| .__/ \___|_| |_|\___\___/ \__,_|\___│  \_/ |_|_.__/ \___|
      |_|                                   │

Next.js 16 rebuild of the OpenCode web application. Real-time chat UI with streaming message display, SSE sync, and React Server Components.

**Warning:** This project uses Next.js 16 canary - bleeding edge, expect rough edges. Catppuccin-themed because we're not savages.

Quick Start

**Prerequisites:** [Bun](https://bun.sh) v1.3+ and [OpenCode CLI](https://github.com/sst/opencode) running locally.

# 1. Install dependencies
bun install

# 2. Start OpenCode (any mode - TUI or serve)
cd /path/to/your/project
opencode

# 3. Start the web UI
bun dev

# 4. Open browser
# Navigate to: http://localhost:8423

The web UI auto-discovers all running OpenCode processes. No configuration needed.

What's Here

**Monorepo structure:**

apps/web/ - Next.js 16 web application (App Router, RSC, Tailwind)
apps/swarm-cli/ - CLI for visualizing world state across servers
packages/core/ - World stream, atoms, Effect services, types
packages/react/ - React bindings (hooks, providers, store)
docs/ - Architecture Decision Records and implementation guides

Features

World stream architecture - Push-based reactive state via createWorldStream()
Multi-server discovery - Finds all running OpenCode processes automatically via lsof
Cross-process messaging - Send from web UI, appears in your TUI
Real-time streaming - Messages stream in as the AI generates them
SSE sync - All updates pushed via Server-Sent Events
Slash commands - Type / for actions like /fix, /test, /refactor
**File