vtemian/octto

Interactive brainstorming UI for OpenCode agents - multi-question forms, decisions, and real-time feedback

494

stars

228

commits

TypeScript

primary language

Sep 11, 2026

updated

README

octto

An interactive browser UI for AI brainstorming. Stop typing in terminals. Start clicking in browsers.

https://github.com/user-attachments/assets/9ba8868d-16f3-4451-9b73-6b7e1fc54655

When you describe your idea, octto opens an interactive UI:

  • Click options instead of typing
  • See all questions at once
  • Answer in any order
  • Watch follow-ups appear instantly
  • Review the final plan visually

10 minutes of terminal typing → 2 minutes of clicking.

Quick Start

Add to ~/.config/opencode/opencode.json:

{ "plugin": ["octto"] }

Select the octto agent:

I want to add a caching layer to the API

A browser window opens. Click your answers. Done.

The Interactive UI

Rich Question Types

No more typing everything. Pick from 14 visual input types:

TypeWhat You See
pick_oneRadio buttons
pick_manyCheckboxes
confirmYes/No buttons
sliderDraggable range
rankDrag to reorder
rateStar rating
thumbsThumbs up/down
show_optionsCards with pros/cons
show_diffSide-by-side code diff
ask_codeSyntax-highlighted editor
ask_textText input (when needed)
ask_imageImage upload
ask_fileFile upload
emoji_reactEmoji picker

Live Updates

  • Questions appear as you answer previous ones
  • Progress indicator shows remaining questions
  • Completed answers visible for context
  • Final plan rendered as reviewable sections

Parallel Branches

Your request is split into 2-4 exploration branches. All initial questions appear at once:

         ┌─ Branch 1: [question card]
Request ─┼─ Branch 2: [question card]
         └─ Branch 3: [question card]
                ↓
        Answer any, in any order

Each branch goes as deep as needed. Some finish in 2 questions, others take 4.

How It Works Behind the Scenes

3 Agents

AgentJob
bootstrapperSplits your request into branches
probeDecides if a branch needs more questions
octtoOrchestrates the session

The Flow

  1. Bootstrapper creates 2-4 branches from your request
  2. Each branch gets an initial question → all shown in browser
  3. You answer (click, not type)
  4. Probe agent evaluates: more questions or done?
  5. Repeat until all branches complete
  6. Final plan shown for approval
  7. Design saved to docs/plans/

Configuration

Optional ~/.config/opencode/octto.json:

{
  "model": "anthropic/claude-sonnet-4",
  "port": 3000,
  "agents": {
    "probe": { "model": "openai/gpt-4o" }
  }
}

Options

OptionTypeDefaultDescription
modelstring-Override the model for all agents at once
portnumber0 (random)Fixed port for the browser UI server
agentsobject-Per-agent overrides (model, temperature, etc.)
fragmentsobject-Custom instructions injected into agent prompts

Precedence: per-agent agents.<name>.model > top-level model > built-in default

Fragments

Inject custom instructions into agent prompts. Useful for customizing agent behavior per-project or globally.

Global config (~/.config/opencode/octto.json):

{
  "fragments": {
    "octto": ["Always suggest 3 implementation approaches"],
    "probe": ["Include emoji in every question"],
    "bootstrapper": ["Focus on technical feasibility"]
  }
}

Project config (.octto/fragments.json in your project root):

{
  "octto": ["This project uses React - focus on component patterns"],
  "probe": ["Ask about testing strategy for each feature"]
}

Fragments are merged: global fragments load first, project fragments append. Each fragment becomes a bullet point in a <user-instructions> block prepended to the agent's system prompt.

Environment Variables

VariableDescription
OCTTO_PORTOverride port (takes precedence over config file)

For Docker workflows, set a fixed port:

OCTTO_PORT=3000 opencode

Development

bun install
bun run build
bun test

License

MIT

Contributors

vtemian

216 commits

dezren39

2 commits

dankochetov

1 commits

vtemian/octto

Interactive brainstorming UI for OpenCode agents - multi-question forms, decisions, and real-time feedback

494

stars

228

commits

TypeScript

primary language

Sep 11, 2026

updated

README

octto

An interactive browser UI for AI brainstorming. Stop typing in terminals. Start clicking in browsers.

https://github.com/user-attachments/assets/9ba8868d-16f3-4451-9b73-6b7e1fc54655

When you describe your idea, octto opens an interactive UI:

  • Click options instead of typing
  • See all questions at once
  • Answer in any order
  • Watch follow-ups appear instantly
  • Review the final plan visually

10 minutes of terminal typing → 2 minutes of clicking.

Quick Start

Add to ~/.config/opencode/opencode.json:

{ "plugin": ["octto"] }

Select the octto agent:

I want to add a caching layer to the API

A browser window opens. Click your answers. Done.

The Interactive UI

Rich Question Types

No more typing everything. Pick from 14 visual input types:

TypeWhat You See
pick_oneRadio buttons
pick_manyCheckboxes
confirmYes/No buttons
sliderDraggable range
rankDrag to reorder
rateStar rating
thumbsThumbs up/down
show_optionsCards with pros/cons
show_diffSide-by-side code diff
ask_codeSyntax-highlighted editor
ask_textText input (when needed)
ask_imageImage upload
ask_fileFile upload
emoji_reactEmoji picker

Live Updates

  • Questions appear as you answer previous ones
  • Progress indicator shows remaining questions
  • Completed answers visible for context
  • Final plan rendered as reviewable sections

Parallel Branches

Your request is split into 2-4 exploration branches. All initial questions appear at once:

         ┌─ Branch 1: [question card]
Request ─┼─ Branch 2: [question card]
         └─ Branch 3: [question card]
                ↓
        Answer any, in any order

Each branch goes as deep as needed. Some finish in 2 questions, others take 4.

How It Works Behind the Scenes

3 Agents

AgentJob
bootstrapperSplits your request into branches
probeDecides if a branch needs more questions
octtoOrchestrates the session

The Flow

  1. Bootstrapper creates 2-4 branches from your request
  2. Each branch gets an initial question → all shown in browser
  3. You answer (click, not type)
  4. Probe agent evaluates: more questions or done?
  5. Repeat until all branches complete
  6. Final plan shown for approval
  7. Design saved to docs/plans/

Configuration

Optional ~/.config/opencode/octto.json:

{
  "model": "anthropic/claude-sonnet-4",
  "port": 3000,
  "agents": {
    "probe": { "model": "openai/gpt-4o" }
  }
}

Options

OptionTypeDefaultDescription
modelstring-Override the model for all agents at once
portnumber0 (random)Fixed port for the browser UI server
agentsobject-Per-agent overrides (model, temperature, etc.)
fragmentsobject-Custom instructions injected into agent prompts

Precedence: per-agent agents.<name>.model > top-level model > built-in default

Fragments

Inject custom instructions into agent prompts. Useful for customizing agent behavior per-project or globally.

Global config (~/.config/opencode/octto.json):

{
  "fragments": {
    "octto": ["Always suggest 3 implementation approaches"],
    "probe": ["Include emoji in every question"],
    "bootstrapper": ["Focus on technical feasibility"]
  }
}

Project config (.octto/fragments.json in your project root):

{
  "octto": ["This project uses React - focus on component patterns"],
  "probe": ["Ask about testing strategy for each feature"]
}

Fragments are merged: global fragments load first, project fragments append. Each fragment becomes a bullet point in a <user-instructions> block prepended to the agent's system prompt.

Environment Variables

VariableDescription
OCTTO_PORTOverride port (takes precedence over config file)

For Docker workflows, set a fixed port:

OCTTO_PORT=3000 opencode

Development

bun install
bun run build
bun test

License

MIT

Contributors

vtemian

216 commits

dezren39

2 commits

dankochetov

1 commits

Languages

TypeScript

96.5%

JavaScript

1.9%