mirror of
https://github.com/czl9707/build-your-own-openclaw.git
synced 2026-08-14 00:47:59 +00:00
Zane Chen
131150d84d
* feat: add learning website with Next.js Add interactive web interface for the Build Your Own OpenClaw tutorial: - Next.js app with TypeScript and Tailwind CSS - Theme provider with dark/light mode toggle - Step card components with diff visualization - Utilities for loading step metadata and file diffs * chore: ignore worktrees directory * feat(web): implement learning website with step navigation and diff viewer - Landing page with hero section and steps overview grouped by phase - Step detail pages with README rendering and syntax highlighting (Shiki) - Diff comparison pages with side-by-side GitHub-style viewer - Custom 404 Not Found page - Components: ReadmeRenderer, CodeBlock, DiffViewer, DiffSelector - Generates 175 static pages (18 steps + 153 diff combinations) * feat(web): enhance UI with zane-portfolio theme and improved UX - Update color scheme to match zane-portfolio style (warm beige light, pure black dark) - Add scrollbar styling for light/dark modes - Fix card border visibility in dark mode - Add GitHub CTA section with clone command and copy button - Add star on GitHub call-to-action - Use favicons from zane-portfolio - Improve diff viewer with scroll sync and collapsible files - Add sticky header with file navigation dropdown - Rewrite README links to GitHub and internal step pages - Remove default create-next-app template files * ci: add GitHub Pages deployment workflow - Add workflow to build and deploy Next.js static site - Configure custom domain (build-your-own-openclaw.kiyo-n-zane.com) - Trigger on push to main branch * fix config * fix config * fix config
Build Your Own OpenClaw
A step-by-step tutorial to build your own AI agent, from a simple chat loop to a lightweight version of OpenClaw.
Overview
18 progressive steps that teach you how to build an minimal version of OpenClaw. Each step includes:
- A
README.mdgoing through key components and design decision. - A Runnable codebase.
Example Project: pickle-bot - our reference implementation
Tutorial Structure
Phase 1: Capable Single Agent (Steps 1-7)
Build a fully-functional agent that can chat, use tools, learn skills, remember conversations, and access the internet.
- 00-chat-loop - Just a Chat Loop
- 01-tools - Give your agent a tool.
- 02-skills - Extend your agent with
SKILL.md - 03-persistence - Save your conversations.
- 04-slash-commands - Direct user control over sessions.
- 05-compaction - Pack you history and carry on...
- 06-web-tools - Your Agent want to see the bigger world.
Phase 2: Event-Driven Architecture (Steps 8-11)
Refactor to event-driven architecture for scalability and multi-platform support.
- 07-event-driven - Expose you agent beyond CLI.
- 08-config-hot-reload - Edit without restart.
- 09-channels - Talk to your agent from on your phone.
- 10-websocket - Want to interact with you agent programatically?
Phase 3: Autonomous & Multi-Agent (Steps 12-16)
Add scheduled tasks, agent collaboration, and intelligent routing.
- 11-multi-agent-routing - Route right job to right agent.
- 12-cron-heartbeat - An Agent work while you are sleeping.
- 13-multi-layer-prompts - More Context, More Context, More Context.
- 14-post-message-back - Your Agent want to Speak to you.
- 15-agent-dispatch - Your Agent want friends to work with!
Phase 4: Production & Scale (Steps 17-18)
Production features for reliability and long-term memory.
- 16-concurrency-control - Too many Pickle is running at the same time?
- 17-memory - Remember me!
How to Use This Tutorial
Configure API Keys
Before running any step, you need to configure your API keys:
-
Copy the example config:
cp default_workspace/config.example.yaml default_workspace/config.user.yaml -
Edit
config.user.yamlwith your API keys: -
Just follow each steps, read and try it out.
Contributing
Each step is implemented in a separate session. Feel free to suggest improvements!