SkillsLLM
CategoriesBlogAI NewsAbout
HomeAI Agentsopencode-web

opencode-web

by chris-tse

Pending

A web-based UI for interacting with the opencode API

107stars
32forks
TypeScript
Added 3/9/2026
View on GitHubDownload ZIP
AI Agentsagentic-aibunclaude-codeopencodereactvite
Installation
# Add to your Claude Code skills
git clone https://github.com/chris-tse/opencode-web
README.md

opencode-web

A web-based user interface for opencode, providing a modern chat interface to interact with AI coding agents.

Features

  • Real-time chat interface with AI coding agents
  • Live streaming responses via Server-Sent Events
  • Tool execution display with enhanced diff viewing for code changes
  • Model selection from multiple AI providers
  • Responsive design for desktop and mobile
  • Auto-session creation for immediate use

Getting Started

Prerequisites

  • Bun (recommended) or Node.js 18+
  • Running opencode API server

Installation

# Clone the repository
git clone https://github.com/your-username/opencode-ui.git
cd opencode-ui

# Install dependencies
bun install

# Start opencode server
cd /path/to/your-project
opencode serve

# Start development server
bun dev

The application will be available at http://localhost:5173

Configuration

The app will auto-detect your opencode API server. If running on a different host/port, configure the API endpoint in your environment.

Development

Available Scripts

  • bun dev - Start development server with hot reload
  • bun run build - Build for production
  • bun run lint - Run ESLint
  • bun run preview - Preview production build

Tech Stack

  • React 19 with TypeScript
  • Vite for build tooling
  • EventSource for real-time streaming
  • CSS Modules for styling

Project Structure

src/
├── components/
│   ├── Chat/           # Chat interface components
│   └── Debug/          # Development debugging tools
├── hooks/              # Custom React hooks
├── services/           # API integration
└── utils/              # Helper functions

Usage

  1. Start a conversation - Type your coding request in the chat input
  2. Watch AI work - See real-time tool execution and code changes
  3. Review results - Enhanced diff viewer shows exactly what changed
  4. Continue iterating - Build on previous responses naturally

License

This project is dual-licensed:

Open Source License

AGPL-3.0 for personal, educational, and open source projects.

Commercial License

Required for commercial use, proprietary software, or if you cannot comply with AGPL-3.0 terms.

Contact [your-email] for commercial licensing.

Contributing

  1. Fork the repository
  2. Create a feature branch
  3. Make your changes
  4. Run tests and linting
  5. Submit a pull request

Related Projects

  • opencode - The AI coding agent backend
  • opencode TUI - Terminal interface

Support

  • Documentation - Product requirements and features
  • Technical Specification - Architecture details
  • Issues - Bug reports and feature requests

Additional Links

  • opencode -...
Comments (0)
to leave a comment.

No comments yet. Be the first to share your thoughts!

Related Skills

gemini-cli

by google-gemini

An open-source AI agent that brings the power of Gemini directly into your terminal.
97,469
12,195
TypeScript
AI Agentsaiai-agents
View details
everything-claude-code

by affaan-m

The agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Codex, Opencode, Cursor and beyond.
73,757
9,228
JavaScript
AI Agentsai-agentsanthropic
View details
awesome-claude-skills

by ComposioHQ

A curated list of awesome Claude Skills, resources, and tools for customizing Claude AI workflows
43,513
4,373
Python
AI Agentsagent-skillsai-agents
View details
chatgpt-on-wechat

by zhayujie

CowAgent是基于大模型的超级AI助理,能主动思考和任务规划、访问操作系统和外部资源、创造和执行Skills、拥有长期记忆并不断成长。同时支持飞书、钉钉、企业微信应用、微信公众号、网页等接入,可选择OpenAI/Claude/Gemini/DeepSeek/ Qwen/GLM/Kimi/LinkAI,能处理文本、语音、图片和文件,可快速搭建个人AI助手和企业数字员工。
42,164
9,820
Python
AI Agentsaiai-agent
View details
cherry-studio

by CherryHQ

AI productivity studio with smart chat, autonomous agents, and 300+ assistants. Unified access to frontier LLMs
41,349
3,818
TypeScript
AI Agentsai-agentclaude-code
View details
ui-ux-pro-max-skill

by nextlevelbuilder

An AI SKILL that provide design intelligence for building professional UI/UX multiple platforms
40,598
3,923
Python
CLI Toolsai-skillsantigravity
View details