pixcode/public/features.html at main · alicomert/pixcode · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Pixcode Features - Claude Code, Codex, Cursor, Gemini, Qwen and OpenCode UI</title>
    <meta
      name="description"
      content="Pixcode feature overview: multi-CLI chat, files, shell, Git source control, changed file tracking, orchestration, provider models, API keys, Telegram notifications, MCP, plugins, themes, desktop installers, and Linux daemon mode."
    />
    <meta
      name="keywords"
      content="Pixcode features, Claude Code UI features, OpenAI Codex web UI, Cursor CLI dashboard, Gemini CLI web UI, OpenCode dashboard, Qwen Code UI, AI coding agent features, self-hosted AI developer tool"
    />
    <meta name="robots" content="index,follow,max-image-preview:large,max-snippet:-1" />
    <link rel="canonical" href="https://alicomert.github.io/pixcode/features.html" />
    <link rel="icon" href="favicon.png" />
    <link rel="stylesheet" href="site.css" />
  </head>
  <body>
    <nav class="site-nav" aria-label="Main navigation">
      <a class="brand" href="landing.html">
        <img src="logo.png" alt="" />
        <span>Pixcode</span>
      </a>
      <div class="nav-links">
        <a href="docs.html">Documentation</a>
        <a href="features.html">Features</a>
        <a href="orchestration.html">Orchestration</a>
        <a href="api-automation.html">API</a>
        <a href="https://github.com/alicomert/pixcode">GitHub</a>
      </div>
    </nav>

    <header class="hero docs-hero">
      <div>
        <div class="eyebrow">Feature map</div>
        <h1>Everything Pixcode brings into one workspace.</h1>
        <p class="lead">
          Pixcode combines AI coding CLIs, chat, file control, shell access, source control, orchestration, API automation, notifications, Telegram, MCP, plugins, themes, and desktop/server deployment.
        </p>
      </div>
      <div class="hero-summary">
        <strong>Product promise</strong>
        <p>
          Run agents, watch files, inspect commands, plan tasks, and automate the whole workspace without leaving your own machine.
        </p>
        <div class="chips tight">
          <span class="chip">Self-hosted</span>
          <span class="chip">API-first</span>
          <span class="chip">Task-aware</span>
          <span class="chip">Provider-neutral</span>
        </div>
      </div>
    </header>

    <main>
      <section class="section">
        <h2>Provider and model control</h2>
        <p class="sublead">
          Pixcode is provider-neutral at the UI level. Use the provider that fits the task, then keep auth, model selection, and session management in one place.
        </p>
        <div class="grid three">
          <div class="card"><strong>Claude Code</strong><p>Use Claude Code sessions, tool output, notifications, and MCP-aware workflows from the Pixcode interface.</p></div>
          <div class="card"><strong>OpenAI Codex</strong><p>Run Codex-backed coding tasks, reviews, and one-shot automation through chat or REST API.</p></div>
          <div class="card"><strong>Cursor CLI</strong><p>Bring Cursor CLI into the same project workspace as the rest of your providers.</p></div>
          <div class="card"><strong>Gemini CLI</strong><p>Use Gemini CLI for Google model workflows without leaving Pixcode.</p></div>
          <div class="card"><strong>Qwen Code</strong><p>Manage Qwen-based coding sessions alongside other agents.</p></div>
          <div class="card"><strong>OpenCode</strong><p>Select OpenCode models and use OpenCode as a first-class worker in orchestration.</p></div>
        </div>
      </section>

      <section class="section alt">
        <h2>Workspace features</h2>
        <div class="grid three">
          <div class="card"><strong>Chat and sessions</strong><p>Project-aware sessions, provider selection, mode handling, slash command support, and structured tool rendering.</p></div>
          <div class="card"><strong>Fixed prompt composer</strong><p>The main input stays at the bottom of chat/project views so the screen behaves like a real messaging workspace.</p></div>
          <div class="card"><strong>Processing visibility</strong><p>The UI is designed to show when an agent is thinking, running, waiting, or returning output.</p></div>
          <div class="card"><strong>Files panel</strong><p>Browse, open, edit, upload, rename, delete, and inspect files without leaving the agent workflow.</p></div>
          <div class="card"><strong>Shell panel</strong><p>Open the project shell as split view or full view on desktop; use mobile-safe panel behavior on small screens.</p></div>
          <div class="card"><strong>Source Control</strong><p>Review Git status, changed files, diffs, branches, commits, and repository actions.</p></div>
        </div>
      </section>

      <section class="section warm">
        <h2>Control and automation features</h2>
        <div class="grid two">
          <div class="panel">
            <h3>Changed files Command Center</h3>
            <p>Tracks local working-tree changes, highlights newly edited files, and opens relevant paths so users can see what an agent changed immediately.</p>
          </div>
          <div class="panel">
            <h3>Multi-agent orchestration</h3>
            <p>Coordinates multiple agents with roles, labels, instructions, model choices, fallback providers, workflow previews, streaming events, and cancellation.</p>
          </div>
          <div class="panel">
            <h3>API access</h3>
            <p>External automation can use `px_` API keys for project access, agent runs, orchestration preview/run flows, and integration scripts.</p>
          </div>
          <div class="panel">
            <h3>Notifications</h3>
            <p>Browser push and Telegram notifications help long-running sessions report completion, failure, or action-required states.</p>
          </div>
          <div class="panel">
            <h3>Orchestration</h3>
            <p>Pixcode coordinates background workflow, review, and verification tasks through project-aware CLI adapters.</p>
          </div>
          <div class="panel">
            <h3>Open-source readiness</h3>
            <p>The repository ships with README, LICENSE, contributing guide, code of conduct, security policy, issue templates, releases, screenshots, and static docs.</p>
          </div>
        </div>
      </section>

      <section class="section">
        <h2>Designed for real working loops.</h2>
        <p class="sublead">
          Pixcode is useful because the pieces talk to each other. A prompt can create file changes, the Command Center can show them, Source Control can review them, orchestration can hand work to another agent, and the API can automate the same flow.
        </p>
        <div class="flow-list">
          <div><strong>Prompt</strong><span>Send work to the provider that fits the task.</span></div>
          <div><strong>Observe</strong><span>See processing state, tool output, shell output, changed files, and orchestration steps.</span></div>
          <div><strong>Review</strong><span>Open changed files, inspect diffs, compare agent reports, and decide what ships.</span></div>
          <div><strong>Automate</strong><span>Use px_ API keys, Telegram, and orchestration workflows to keep work moving outside the browser.</span></div>
        </div>
      </section>
    </main>

    <footer class="footer">
      <strong>Pixcode features</strong> · <a href="docs.html">Documentation</a> · <a href="orchestration.html">Orchestration</a> · <a href="api-automation.html">API</a>
    </footer>
  </body>
</html>