claw-on-byteplus/index.html at master · CoderPush/claw-on-byteplus · 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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>How I Built a Private AI Assistant on BytePlus for $4/Month</title>
    <style>
        :root {
            --primary: #2563eb;
            --secondary: #1e40af;
            --accent: #3b82f6;
            --text: #1f2937;
            --light: #f8fafc;
            --border: #e5e7eb;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; line-height: 1.6; color: var(--text); background: var(--light); max-width: 1200px; margin: 0 auto; padding: 20px; }
        header { text-align: center; margin-bottom: 3rem; padding-bottom: 2rem; border-bottom: 2px solid var(--border); }
        h1 { color: var(--primary); font-size: 2.5rem; margin-bottom: 1rem; }
        .meta { color: #6b7280; font-size: 0.9rem; margin-bottom: 1rem; }
        .toc { background: white; border: 1px solid var(--border); border-radius: 8px; padding: 1.5rem; margin: 2rem 0; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
        .toc h2 { color: var(--primary); margin-bottom: 1rem; }
        .toc ul { list-style: none; }
        .toc li { margin-bottom: 0.5rem; }
        .toc a { color: var(--text); text-decoration: none; padding: 0.25rem 0; display: block; border-left: 3px solid transparent; padding-left: 1rem; }
        .toc a:hover { border-left-color: var(--primary); color: var(--primary); }
        section { margin-bottom: 3rem; background: white; border-radius: 8px; padding: 2rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
        h2 { color: var(--primary); margin-bottom: 1.5rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--border); }
        h3 { color: var(--secondary); margin: 1.5rem 0 1rem; }
        p { margin-bottom: 1rem; }
        .screenshot { margin: 2rem 0; text-align: center; }
        .screenshot img { max-width: 100%; height: auto; border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
        .caption { font-size: 0.9rem; color: #6b7280; margin-top: 0.5rem; font-style: italic; }
        code { background: #f1f5f9; padding: 0.2rem 0.4rem; border-radius: 4px; font-family: 'JetBrains Mono', monospace; font-size: 0.9em; }
        pre { background: #1e293b; color: #e2e8f0; padding: 1rem; border-radius: 6px; overflow-x: auto; margin: 1rem 0; }
        .step-number { display: inline-block; background: var(--primary); color: white; width: 2rem; height: 2rem; border-radius: 50%; text-align: center; line-height: 2rem; margin-right: 0.5rem; font-weight: bold; }
        .warning { background: #fffbeb; border-left: 4px solid #f59e0b; padding: 1rem; margin: 1.5rem 0; border-radius: 4px; }
        .tip { background: #eff6ff; border-left: 4px solid var(--accent); padding: 1rem; margin: 1.5rem 0; border-radius: 4px; }
        footer { text-align: center; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--border); color: #6b7280; font-size: 0.9rem; }
        @media (max-width: 768px) {
            body { padding: 10px; }
            h1 { font-size: 2rem; }
            section { padding: 1rem; }
        }
    </style>
</head>
<body>
    <header>
        <h1>Claw on BytePlus</h1>
        <div class="meta">Private AI Assistant Story • February 12, 2026</div>
        <p>I started at <a href="https://www.byteplus.com/en/activity/clawdbot-cloud-sale">BytePlus ClawDBot Cloud Sale</a>, launched a private AI assistant for just $4/month, and brought it live immediately after connecting a Telegram bot.</p>
    </header>

    <div class="toc">
        <h2>📋 Complete Guide</h2>
        <ul>
            <li><a href="#part1">Part 1: Start on BytePlus</a></li>
            <li><a href="#part2">Part 2: Enable Model Access</a></li>
            <li><a href="#part3">Part 3: Go Live on Telegram</a></li>
        </ul>
    </div>

    <section id="part1">
        <h2>🚀 Part 1: Start on BytePlus</h2>
        <p>I began on the BytePlus sale page, picked the low-cost plan, and moved straight into the terminal setup.</p>

        <h3><span class="step-number">1</span> Open BytePlus Cloud and Terminal</h3>
        <div class="screenshot">
            <img src="assets/01-initial-terminal.jpg" alt="Initial terminal setup">
            <div class="caption">Step 1: Start from the BytePlus Cloud Sale page and open your terminal.</div>
        </div>

        <h3><span class="step-number">2</span> Install OpenClaw</h3>
        <div class="screenshot">
            <img src="assets/02-npm-installation.jpg" alt="NPM installation">
            <div class="caption">Step 2: Run <code>npm install -g openclaw</code> to install the assistant runtime.</div>
        </div>
    </section>

    <section id="part2">
        <h2>🧠 Part 2: Enable Model Access</h2>
        <p>Next I selected a model and completed billing setup so private inference would work without interruptions.</p>

        <h3><span class="step-number">3</span> Pick a Model</h3>
        <div class="screenshot">
            <img src="assets/03-model-selection.jpg" alt="Model selection">
            <div class="caption">Step 3: Choose your model (Claude, GPT-4, Gemini, or DeepSeek).</div>
        </div>

        <h3><span class="step-number">4</span> Handle the Billing Prompt</h3>
        <div class="screenshot">
            <img src="assets/04-deepseek-selection-error.jpg" alt="Payment error">
            <div class="caption">Step 4: If prompted, complete billing setup before continuing.</div>
        </div>

        <h3><span class="step-number">5</span> Add Payment Method in Ark.ai</h3>
        <div class="screenshot">
            <img src="assets/05-ark-ai-payment-setup.jpg" alt="Ark.ai payment">
            <div class="caption">Step 5: Open <code>ark.ai/account</code> and add your payment method.</div>
        </div>

        <h3><span class="step-number">6</span> Confirm Payment Success</h3>
        <div class="screenshot">
            <img src="assets/06-ark-ai-payment-success.jpg" alt="Payment success">
            <div class="caption">Step 6: Verify billing is active.</div>
        </div>

        <h3><span class="step-number">7</span> Return and Confirm Access</h3>
        <div class="screenshot">
            <img src="assets/07-payment-confirmation.jpg" alt="Payment confirmation">
            <div class="caption">Step 7: Finish confirmation and continue setup.</div>
        </div>
    </section>

    <section id="part3">
        <h2>🔧 Part 3: Go Live on Telegram</h2>
        <p>After the service was up, I connected a Telegram bot and it went live immediately. Then I dragged these screenshots into Telegram and asked the bot to generate this repository as a step-by-step guide.</p>

        <h3><span class="step-number">8</span> Choose Cloud Runtime Options</h3>
        <div class="screenshot">
            <img src="assets/08-aws-ecs-setup.jpg" alt="AWS ECS setup">
            <div class="caption">Step 8: Select the cloud runtime option that fits your deployment.</div>
        </div>

        <h3><span class="step-number">9</span> Open Web SSH Terminal</h3>
        <div class="screenshot">
            <img src="assets/09-terminal-ssh-web-interface.jpg" alt="Web SSH terminal">
            <div class="caption">Step 9: Use web SSH to finish setup directly on the instance.</div>
        </div>

        <h3><span class="step-number">10</span> Generate and Save Password</h3>
        <div class="screenshot">
            <img src="assets/10-openclaw-setup-password.jpg" alt="Password generation">
            <div class="caption">Step 10: Store the generated password safely.</div>
        </div>

        <h3><span class="step-number">11</span> Verify OpenClaw Is Running</h3>
        <div class="screenshot">
            <img src="assets/11-openclaw-running-chinese-version.jpg" alt="OpenClaw running">
            <div class="caption">Step 11: Confirm the service is running and ready to pair.</div>
        </div>

        <h3><span class="step-number">12</span> Pair Telegram Bot and Go Live</h3>
        <div class="screenshot">
            <img src="assets/12-telegram-pairing-command.jpg" alt="Telegram pairing">
            <div class="caption">Step 12: Run <code>openclaw pairing --channel telegram TOKEN</code>; the bot goes live immediately after pairing.</div>
        </div>
    </section>

    <footer>
        <p>Documented by Harley with Ngộ Không • February 12, 2026</p>
        <p>GitHub: <a href="https://github.com/CoderPush/claw-on-byteplus">CoderPush/claw-on-byteplus</a></p>
    </footer>
</body>
</html>