opencode-vibe
πββοΈ Next.js 16 web UI for OpenCode - real-time chat with streaming, SSE sync, and React Server Components
File Explorer
- config.json
- merged-stream-refactor.md
- README.md
- use-bun-instead-of-node-vite-npm-pnpm.mdc
- codeql.yml
- dependency-review.yml
- publish.yml
- CODEOWNERS
- dependabot.yml
- issues.jsonl
- memories.jsonl
- swarm.db
- index.ts
- status.ts
- watch.test.ts
- watch.ts
- main.ts
- output.test.ts
- output.ts
- spike-merged-stream.ts
- world-state.test.ts
- world-state.ts
- CHANGELOG.md
- mock-server.ts
- package.json
- README.md
- STREAMING_EXAMPLE.md
- test-manual.js
- test-manual2.js
- tsconfig.json
- icon.svg
- file.svg
- globe.svg
- manifest.json
- next.svg
- vercel.svg
- window.svg
- route.test.ts
- route.ts
- route.ts
- route.ts
- route.test.ts
- route.ts
- page.tsx
- page.tsx
- provider-detail.tsx
- compaction-indicator.tsx
- context-usage.test.tsx
- context-usage.tsx
- debug-panel.tsx
- error.tsx
- model-selector.tsx
- new-session-button.tsx
- page.tsx
- session-layout.tsx
- session-messages.test.tsx
- session-messages.tsx
- session-status.tsx
- error.tsx
- error.tsx
- favicon.ico
- globals.css
- hooks.ts
- layout-client.tsx
- layout.tsx
- page.tsx
- projects-list.test.tsx
- projects-list.tsx
- providers.tsx
- server-status.tsx
- artifact.tsx
- audit-memo.test.tsx
- canvas.tsx
- chain-of-thought.tsx
- checkpoint.tsx
- code-block.tsx
- confirmation.tsx
- connection.tsx
- context.tsx
- controls.tsx
- conversation.test.tsx
- conversation.tsx
- edge.tsx
- image.tsx
- inline-citation.tsx
- loader.tsx
- MEMO_AUDIT.md
- message.test.tsx
- message.tsx
- model-selector.tsx
- node.tsx
- open-in-chat.tsx
- panel.tsx
- part-renderer.test.tsx
- part-renderer.tsx
- plan.tsx
- prompt-input.tsx
- queue.tsx
- reasoning.test.tsx
- reasoning.tsx
- shimmer.tsx
- sources.tsx
- STALE_CLOSURE_AUDIT.md
- subagent-view.test.tsx
- subagent-view.tsx
- suggestion.test.tsx
- suggestion.tsx
- task.test.tsx
- task.tsx
- tool-card.test.tsx
- tool.test.tsx
- tool.tsx
- toolbar.tsx
- web-preview.tsx
- Autocomplete.test.tsx
- Autocomplete.tsx
- FilePill.test.tsx
- FilePill.tsx
- index.ts
- PromptInput.test.tsx
- PromptInput.tsx
- alert.tsx
- badge.tsx
- button-group.tsx
- button.tsx
- card.tsx
- carousel.tsx
- collapsible.tsx
- command.tsx
- dialog.tsx
- dropdown-menu.tsx
- hover-card.tsx
- input-group.tsx
- input.tsx
- progress.tsx
- scroll-area.tsx
- select.tsx
- separator.tsx
- textarea.tsx
- tooltip.tsx
- error-boundary.tsx
- opencode-logo.tsx
- sse-debug-panel.tsx
- theme-toggle.tsx
- transform-messages.ts
- use-sse-sync.test.ts
- use-sse-sync.ts
- utils.ts
- prompt-store.test.ts
- prompt-store.ts
- subagent-store.test.ts
- subagent-store.ts
- msw-handlers.ts
- setup.ts
- prompt.ts
- README.md
- .gitignore
- AI_ELEMENTS_SETUP.md
- components.json
- favicon.ico
- next.config.ts
- package.json
- postcss.config.mjs
- README.md
- tsconfig.json
- 005-inventory-core.md
- 005-inventory-react.md
- 005-react-design.md
- 005-router-design.md
- 009-continuation.md
- 013-pattern-comparison.md
- 013-phase1-api-proxy.md
- 013-phase2-ssr-plugin.md
- 013-phase3-factory-hooks.md
- 013-phase4-webapp-migration.md
- 001-nextjs-rebuild.md
- 002-effect-migration.md
- 003-swarm-control-plane.md
- 004-effect-atom-migration.md
- 005-swarmtools-extraction.md
- 006-core-extraction.md
- 007-nuclear-migration-plan.md
- 008-react-hooks-consolidation.md
- 009-dx-overhaul.md
- 010-store-architecture.md
- 011-sse-proxy-architecture.md
- 012-provider-removal-ssr.md
- 013-unified-same-origin-architecture.md
- 014-vercel-sandbox-swarm.md
- 015-event-architecture-simplification.md
- 016-core-layer-responsibility.md
- 017-session-management-core-layer.md
- 018-reactive-world-stream.md
- control-plane.md
- 01-SYNC-AUDIT.md
- 02-FEATURE-PARITY-AUDIT.md
- 03-MOBILE-UX-AUDIT.md
- 04-SUBAGENT-DISPLAY-AUDIT.md
- 05-AT-REFERENCES-AUDIT.md
- 06-LIB-LAYER-AUDIT.md
- 07-REACT-REEXPORTS-AUDIT.md
- 08-SESSION-HOOK-SPRAWL-AUDIT.md
- 09-UPLOADTHING-DX-RESEARCH.md
- 10-USESEEVENTS-WIRING-AUDIT.md
- EFFECT_PATTERNS_EVENTS_AUDIT.md
- EFFECT_PATTERNS_O11Y_AUDIT.md
- EFFECT_PATTERNS_RECOMMENDATIONS.md
- EFFECT_PATTERNS_RUNTIME_AUDIT.md
- EFFECT_PATTERNS_STATE_AUDIT.md
- HOOKS_ARCHITECTURE_AUDIT.md
- HOOKS_BUG_VERIFICATION.md
- HOOKS_DX_AUDIT.md
- HOOKS_IMPLEMENTATION_AUDIT.md
- HOOKS_RECOMMENDATIONS.md
- RULES_OF_HOOKS_AUDIT.md
- SWARM_FIX_PROMPT.md
- USEDEFERRED_VALUE_AUDIT.md
- AT_REFERENCES.md
- COMMANDS_AND_REFERENCES.md
- COMPACTION_SYNC.md
- CONTINUATION_API_PROXY.md
- DURABLE_STREAMING.md
- MOBILE_CLIENT_IMPLEMENTATION.md
- OPENCODE_VIBE_STREAMING.md
- ROUTER_MIGRATION.md
- SLASH_COMMANDS_FIX.md
- SSE_EVENT_WIRING.md
- SSE_STATUS_VERIFICATION.md
- SUBAGENT_DISPLAY.md
- SYNC_IMPLEMENTATION.md
- bootstrap-failure-audit.md
- createclient-routing-race-condition.md
- router-layer-usage-analysis.md
- send-message-fix-proposal.md
- session-routing-web-to-tui.md
- simplification-analysis.md
- sse-core-layer.md
- sse-duplication-verification.md
- sse-infinite-loop-2025-12-30.md
- sse-react-hooks.md
- sse-status-sources-verification.md
- sse-unified-proposal.md
- sse-web-integration.md
- ssr-usessesync-error-2025-12-31.md
- SSE_STUB_FIX_PLAN.md
- ADR-016-PHASE-0-REVIEW-FINDINGS.md
- commands.ts
- index.ts
- messages.test.ts
- messages.ts
- parts.test.ts
- parts.ts
- projects.test.ts
- projects.ts
- prompt.test.ts
- prompt.ts
- providers.test.ts
- providers.ts
- README.md
- servers.test.ts
- servers.ts
- sessions.test.ts
- sessions.ts
- sse.ts
- subagents.ts
- commands.ts
- index.ts
- messages.test.ts
- messages.ts
- parts.test.ts
- parts.ts
- projects.test.ts
- projects.ts
- prompt.test.ts
- prompt.ts
- providers.test.ts
- providers.ts
- servers.test.ts
- servers.ts
- sessions.test.ts
- sessions.ts
- sse.test.ts
- sse.ts
- subagents.test.ts
- subagents.ts
- client.test.ts
- client.ts
- index.ts
- discovery.test.ts
- discovery.ts
- index.ts
- server-discovery.test.ts
- server-discovery.ts
- server-routing.test.ts
- server-routing.ts
- server.ts
- index.ts
- app-layer.ts
- index.ts
- run-with-runtime.test.ts
- run-with-runtime.ts
- context-service.test.ts
- context-service.ts
- index.ts
- message-service.test.ts
- message-service.ts
- status-service.test.ts
- status-service.ts
- index.ts
- multi-server-sse.test.ts
- multi-server-sse.ts
- normalize-status.test.ts
- normalize-status.ts
- domain.ts
- events.ts
- index.ts
- messages.ts
- prompt.ts
- sdk.ts
- sessions.ts
- binary.test.ts
- binary.ts
- format.test.ts
- format.ts
- index.ts
- prompt-api.test.ts
- prompt-api.ts
- prompt-parsing.test.ts
- prompt-parsing.ts
- atoms.test.ts
- atoms.ts
- cursor-store.test.ts
- cursor-store.ts
- cursor.test.ts
- cursor.ts
- derived.test.ts
- derived.ts
- DIRECT_STREAMING_USAGE.md
- event-source.test.ts
- event-source.ts
- events.test.ts
- events.ts
- index.ts
- merged-stream.integration.test.ts
- merged-stream.test.ts
- merged-stream.ts
- metrics-endpoint.test.ts
- metrics-endpoint.ts
- metrics.ts
- onevent-callback.test.ts
- otel.test.ts
- otel.ts
- pubsub.ts
- README.md
- routing.test.ts
- routing.ts
- runtime.test.ts
- runtime.ts
- sse-service.test.ts
- sse-source.test.ts
- sse-source.ts
- sse.test.ts
- sse.ts
- stream.test.ts
- stream.ts
- swarm-db-cursor-init.test.ts
- types.test.ts
- types.ts
- index.ts
- bun.lock
- CHANGELOG.md
- package.json
- README.md
- STREAMING_IMPLEMENTATION.md
- tsconfig.build.json
- tsconfig.json
- index.ts
- STATUS_HOOK_AUDIT_FINDINGS.md
- use-compaction-state.test.ts
- use-compaction-state.ts
- use-context-usage.test.ts
- use-context-usage.ts
- use-live-time.test.ts
- use-live-time.ts
- use-messages-with-parts.test.ts
- use-messages-with-parts.ts
- use-messages.ts
- use-multi-server-sse.test.ts
- use-multi-server-sse.ts
- use-parts.ts
- use-provider.ts
- use-session-status.test.ts
- use-session-status.ts
- use-sse.test.ts
- use-sse.ts
- use-subagent-sync.test.ts
- use-subagent-sync.ts
- use-subagent.test.ts
- use-subagent.ts
- use-subagents.ts
- index.ts
- use-commands.ts
- use-create-session.test.ts
- use-create-session.ts
- use-file-search.ts
- use-multi-directory-sessions.ts
- use-multi-directory-status.ts
- use-projects.ts
- use-providers.test.ts
- use-providers.ts
- use-send-message.test.ts
- use-send-message.ts
- use-servers.ts
- use-session-data.test.ts
- use-session-data.ts
- use-session-facade.test.tsx
- use-session-facade.ts
- use-session-list.ts
- use-sse-state.test.tsx
- use-sse-state.ts
- use-world-connection.test.ts
- use-world-connection.ts
- use-world-messages.test.ts
- use-world-messages.ts
- use-world-session.test.ts
- use-world-session.ts
- use-world.test.ts
- use-world.ts
- bootstrap.test.ts
- bootstrap.ts
- client-stub.ts
- sse-utils.test.ts
- sse-utils.ts
- index.ts
- opencode-provider.tsx
- sse-provider.tsx
- index.ts
- status-utils.test.ts
- status-utils.ts
- store.test.ts
- store.ts
- types.ts
- events.ts
- message.ts
- prompt.ts
- sdk.ts
- factory-types.ts
- factory.test.ts
- factory.test.tsx
- factory.ts
- index.ts
- next-ssr-plugin.test.tsx
- next-ssr-plugin.tsx
- CHANGELOG.md
- package.json
- README.md
- tsconfig.build.json
- tsconfig.json
- .gitignore
- AGENTS.md
- biome.json
- bun.lock
- bunfig.toml
- CLAUDE.md
- CORE_LAYER_GAPS_AUDIT.md
- index.ts
- package.json
- REACT_LAYER_AUDIT.md
- README.md
- SECURITY_SUPPLY_CHAIN.md
- SELECTOR_STABILITY_AUDIT.md
- tsconfig.json
- turbo.json
- vitest.config.ts
- vitest.setup.ts
# Use via CDN
jsDelivrjsDelivr serves any public GitHub repository as a CDN with zero setup. Pick a version and a file to get a ready-to-paste link and snippet.
Command Glossary
Commands referenced in this DOCs, explained below.
bun build
View Details βΌ
bun build
Bundle JavaScript and TypeScript files with Bun's fast native bundler.
bun build {{path/to/entry.ts}} --outfile {{path/to/output.js}}
Bundle an entry point to a single output file:
bun build {{path/to/entry1.ts path/to/entry2.ts ...}} --outdir {{path/to/dist}}
Bundle multiple entry points to an output directory:
bun build {{path/to/entry.ts}} --outfile {{path/to/output.js}} --sourcemap
Bundle with source maps for debugging:
bun install
View Details βΌ
bun install
Install JavaScript dependencies for a project from `package.json`.
bun {{[i|install]}}
Install all dependencies listed in `package.json`:
bun {{[i|install]}} {{package_name}}@{{version}}
Install a single package (this is an alias for `bun add`):
bun {{[i|install]}} {{[-g|--global]}} {{package_name}}
Install a package globally:
bun run
View Details βΌ
bun run
Execute a JavaScript/TypeScript file, or a script from `package.json`.
bun run {{script_name}}
Run a script defined in `package.json`:
bun run {{path/to/file.ts}}
Run a JavaScript or TypeScript file directly:
bun run --watch {{path/to/file.ts}}
Run a file in "watch" mode (restarts automatically when the file changes):
bun test
View Details βΌ
bun test
Run tests using Bun's built-in test runner.
It is a fast, Jest-compatible test runner that looks for `*.test.ts` (and similar) files.
bun test
Run all test files found in the project:
bun test {{path/to/file.test.ts}}
Run a specific test file or directory:
bun test --watch
Run tests in "watch" mode (re-runs automatically on file changes):
bun
View Details βΌ
bun
JavaScript runtime and toolkit.
Includes a bundler, a test runner, and a package manager.
bun init
Create a new Bun project in the current directory:
bun run {{path/to/file|script_name}}
Run a JavaScript file or a `package.json` script:
bun test
Run unit tests:
lsof
View Details βΌ
lsof
List open files and the corresponding processes.
Note: Root privileges are required to list files opened by others.
lsof {{path/to/file}}
Find the processes that have a given file open:
lsof -i :{{port}}
Find the process that opened a local internet port:
lsof -t {{path/to/file}}
Only output the process ID (PID):
opencode
View Details βΌ
opencode
An AI coding agent.
Some subcommands such as `auth`, `models`, `web`, etc. have their own usage documentation.
opencode
Start the interactive TUI:
opencode {{[-c|--continue]}}
Continue the most recent session:
opencode run "{{message}}"
Run opencode in non-interactive mode by passing a prompt directly:
