Prerequisites

OpenCode must be installed on your system. Install it using one of these methods:

# Using bun
bun install -g opencode

# Using Homebrew (macOS)
brew install sst/tap/opencode

Overview

OpenCode Portal connects to a running OpenCode server and provides:

• Session management (create, view, delete sessions)
• Real-time chat interface with the AI assistant
• File mention support (@filename to reference files)
• Model selection
• Dark/light theme support

Why This Project?

OpenCode comes with its own official web UI that you can access by running:

opencode --port 4096

However, the official UI is currently under development and has some limitations:

• Not mobile responsive
• Limited mobile experience

This project was inspired by my personal need to access OpenCode from my mobile device when I don't have my laptop around. The goal is to provide a mobile-first, responsive interface for interacting with OpenCode instances remotely.

Use Case

This portal is designed for remote access to your OpenCode instance. Deploy the portal on a VPS alongside OpenCode, then use Tailscale (or similar VPN) to securely connect from your mobile device or any other machine.

Example setup:

[Your Phone] ---(Tailscale)---> [VPS running Portal + OpenCode]

Tech Stack

• React Router - React framework
• IntentUI - UI library
• Tailwind CSS - Styling
• Nitro - Server
• OpenCode SDK - OpenCode API client

Contributing

Contributions are welcome! Here's how you can help:

Feedback & Feature Requests

Visit oc-portal.userjot.com to submit feedback and feature requests.

Reporting Issues

• Bugs: Report bugs by opening an issue with a clear description and steps to reproduce

Development Setup

1. Fork the repository
2. Clone your fork:

   git clone https://github.com/YOUR_USERNAME/portal.git
   cd portal
   

3. Install dependencies:

   bun install
   

4. Run the development server:

   bun dev
   

Pull Request Process

1. Create a feature branch from main
2. Make your changes following the existing code style
3. Test your changes thoroughly
4. Update documentation if needed
5. Submit a pull request with a clear description

Code Style

• Use TypeScript for all new code
• Follow the existing component patterns in apps/web/src/components/
• Use Tailwind CSS for styling
• Maintain consistent naming conventions
• Add proper TypeScript types

Getting Help

• Join our Discord community
• Check existing issues before creating new ones
• Join the discussion in existing issues
• Be respectful and constructive in all interactions

License

MIT