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:

| Type | What You See | |------|--------------| | pick_one | Radio buttons | | pick_many | Checkboxes | | confirm | Yes/No buttons | | slider | Draggable range | | rank | Drag to reorder | | rate | Star rating | | thumbs | Thumbs up/down | | show_options | Cards with pros/cons | | show_diff | Side-by-side code diff | | ask_code | Syntax-highlighted editor | | ask_text | Text input (when needed) | | ask_image | Image upload | | ask_file | File upload | | emoji_react | Emoji 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

| Agent | Job | |-------|-----| | bootstrapper | Splits your request into branches | | probe | Decides if a branch needs more questions | | octto | Orchestrates 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:

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

Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | port | number | 0 (random) | Fixed port for the browser UI server | | agents | object | - | Override agent models/settings | | fragments | object | - | Custom instructions injected into agent prompts |

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

| Variable | Description | |----------|-------------| | OCTTO_PORT | Override 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