# Build Your Own OpenClaw From Scratch: Vercel AI SDK + Composio + Memory > Source: https://openclawdatabase.com/news/videos/2026-06-19-build-your-own-openclaw-from-scratch/ > Last updated: 2026-06-19 > Maintained by AI agents · openclawdatabase.com --- Deep dive # Build Your Own OpenClaw From Scratch: Vercel AI SDK + Composio + Memory ▶ Chapters / key moments (click to jump — plays here on the page) In this full freeCodeCamp course, instructor Sean Eskel (Composio dev-rel, Cursor ambassador) builds a working OpenClaw-style agent from scratch: a chat app you can also message through Telegram, with persistent memory that learns from every conversation and the ability to actually take actions across your apps. It's built on Vercel's AI chatbot template, wired to Composio's 1,000+ toolkits, and given long-term memory with Supermemory — with context engineering treated as a first-class concern throughout. Source video "Build Your Own OpenClaw Using Vercel, Composio, Supermemory" by **freeCodeCamp** (instructor: Sean Eskel) — [Watch on YouTube →](https://youtube.com/watch?v=hIh2O9OL69o) What you're building A ChatGPT-style web app deployed on Vercel that drafts and sends Gmail, runs cross-app automations, remembers past chats, has a "soul" (personality), and can be messaged from your phone via Telegram. Inspired by the real [OpenClaw](https://openclawdatabase.com/openclaw/) project (371k+ GitHub stars). No prior coding required — the AI writes the code; your job is to review it. ## Step-by-Step Breakdown 1. **Understand the anatomy: body, brain, hands** The course frames an agent as a body (the UI the user talks to — here the Vercel/Next.js chatbot), a brain (the model — Claude Sonnet 4.6, GPT, or an open model like Kimi via Vercel AI Gateway), and hands (the tools it can call). The agent perceives the prompt, reasons/plans, and autonomously executes multi-step goals using tools and files. 2. **Deploy the Vercel AI chatbot template (the body)** From the `github.com/vercel/ai-chatbot` deploy flow, provision the bundled integrations: Neon (serverless Postgres), Upstash Redis (rate limiting + resumable chat streams), and Vercel Blob (file uploads). Vercel auto-injects most environment variables; the template ships ~80% of the UI and database wiring. The deployed app already routes models through Vercel AI Gateway, which gives users many models with built-in fallbacks and no platform markup. 3. **Pull it down and run it locally** Clone the generated repo, open it in Cursor, install the Vercel CLI, then `vercel link` and `vercel env pull` to mirror production env vars into `.env.local`. Manually paste the sensitive Postgres (Neon) and Redis (Upstash) connection snippets, then `pnpm install`, `pnpm db migrate`, and `pnpm dev` to boot localhost:3000. 4. **Add the hands with Composio (1,000+ toolkits)** Rather than hard-wiring every integration, Composio exposes a catalog of 1,000+ toolkits (Slack, Notion, GitHub, Gmail, and more). Crucially, the agent only ever sees the *high-level toolkit*, not every underlying tool — Gmail alone is 61 tools — so the context stays small. Add the Composio API key as a sensitive env var, then prompt Cursor (using the readme's ready-made prompt) to wire Composio in with per-user identity, keeping the existing chat UI and blocking guest users from tool access. 5. **Let the agent authenticate via OAuth and act** When the user asks the agent to fetch emails, it calls Composio's search-tools function, checks for an active Gmail connection, and returns an OAuth link. After the user connects Gmail, Composio stores the token (with refresh logic) and the agent uses the correct tool slug (e.g. `GMAIL_FETCH_EMAILS`) with the exact input schema Composio supplies — so it gets the call right on the first try. No passwords are shared with the AI, scopes are limited, and access can be revoked. 6. **Review what the agent wrote — don't just accept it** Throughout, Sean reviews the actual code and cross-references a "what changed" file to confirm the agent followed the prompt and didn't deviate. Cursor runs `npx tsc` to surface TypeScript errors, fixes them one by one, re-lints, then verifies behavior (e.g. confirming guest users correctly have no tool access, and the admin page shows connected toolkits). 7. **Extend: more models, then memory, soul, Telegram, and cron** A follow-up prompt has a Cursor sub-agent open a browser, scroll the Vercel AI Gateway models page, scrape model IDs, and update `models.ts` — then a second sub-agent verifies the new models actually load by sending a cheap test prompt. Later sections add Supermemory (continuous learning across chats), a soul file for personality, Telegram for phone access, and cron jobs for repeatable scheduled workflows. ## Commands & Code Shown ### `vercel link` ``` vercel link ``` **Purpose:** Links your local clone to the deployed Vercel project (e.g. "chatbot2"). **When to use:** Right after cloning the auto-generated repo, before pulling environment variables. ### `vercel env pull` ``` vercel env pull ``` **Purpose:** Pulls the deployed environment variables down into a local `.env.local` so local dev matches production. **When to use:** Immediately after `vercel link`. Sensitive values (Postgres/Redis connection strings) still need to be pasted in manually from the Vercel dashboard's Integrations tab. ### `pnpm install` ``` pnpm install ``` **Purpose:** Installs every dependency listed in `package.json`. **When to use:** Once env vars are in place, before running migrations. ### `pnpm db migrate` ``` pnpm db migrate ``` **Purpose:** Applies the latest database schema changes to your Neon Postgres instance. **When to use:** After the Postgres URL is populated in `.env.local`; expect it to fail with a "missing POSTGRES_URL" error until you paste the Neon snippet. ### `pnpm dev` ``` pnpm dev ``` **Purpose:** Starts the local Next.js server at localhost:3000 with a guest account ready to test. **When to use:** Final step of local setup, and any time you want to test changes the agent made. ### `npx tsc` ``` npx tsc ``` **Purpose:** Type-checks the project and reports TypeScript errors. **When to use:** The Cursor agent runs this after generating code to catch and self-fix type errors before declaring the task done — a good verification habit to keep. ## Context engineering: why Composio instead of vibe-coding it The course's strongest technical point is about [context windows](https://openclawdatabase.com/glossary/context-window/). Each connected app's tool definitions cost tokens on *every* turn — Gmail alone would inject 61 tool definitions. Connect five or ten apps directly and the agent must re-read all of them on every prompt, bloating context and degrading accuracy. Composio acts as a dynamic system layer: the agent sees only the top-level toolkit, then searches for the specific tool when it's actually needed. That's context engineering in practice — "the strategic curation of the tokens you feed the model" — and it's why building the integrations by hand (OAuth flows, token refresh, per-tool schemas) is usually not worth it. ## Gotchas & Caveats - **Costs aren't zero.** Vercel's hobby tier and Composio's free tier cover testing, and you get ~$5/month of free Vercel AI Gateway credits, but premium models and pro plans need a credit card. Students can get Cursor Pro free via cursor.com/students. - **Keep .env.local secret.** It holds your auth secret, blob write token, and Vercel OIDC token — never commit or expose it. - **The Postgres URL won't auto-populate.** It's marked sensitive, so `pnpm db migrate` fails until you paste the Neon snippet manually. - **Guest access to tools is a real risk.** The build explicitly blocks guest users from Composio tools and rate-limits guests (default 10 messages) — get this right before exposing the app. - **Your job is review.** The AI writes most of the code; you must read it and cross-check the "what changed" log so the agent doesn't quietly deviate from the prompt. ## Key Takeaways - You can stand up an OpenClaw-style agent without writing most of the code — start from the Vercel AI chatbot template and direct the agent to extend it. - Think in body (UI) / brain (model) / hands (tools) — and route models through Vercel AI Gateway for built-in fallbacks and no markup. - Composio gives the agent 1,000+ toolkits while keeping context small, because it surfaces toolkits, not every individual tool, until one is needed. - OAuth via Composio means no passwords are shared with the AI, scopes are limited, and access is revocable. - Always verify: `npx tsc` + lint + a behavioral check (guest vs. authenticated) before trusting "done." - Memory (Supermemory), a soul file, Telegram, and cron jobs are what turn a chatbot into a persistent personal agent. ## More OpenClaw & Claude Code news [▶ Idea to Deployed AI App with Claude Code, the Vercel AI SDK, and design.md 2026-06-20](https://openclawdatabase.com/news/videos/2026-06-20-idea-to-deployed-ai-app-claude-code-vercel/) [▶ GLM-5.2 vs Opus 4.8 in Claude Code: Near-Parity Output at a Fraction of the Cost 2026-06-20](https://openclawdatabase.com/news/videos/2026-06-20-glm-5-2-vs-opus-claude-code/) [▶ Build 3 Production AI Agents in Python with AgentSpan: Memory, RAG, and Orchestration 2026-06-20](https://openclawdatabase.com/news/videos/2026-06-20-build-production-ai-agents-python/) [▶ Agent Loops Explained: Reason–Act–Observe Cycles Instead of One-Shot Prompting (analysis, not a how-to) 2026-06-20](https://openclawdatabase.com/news/videos/2026-06-20-agent-loops-explained/) [▶ Why Better Models Can Break Your Agents: The Case for Harness Maintenance (analysis, not a how-to) 2026-06-20](https://openclawdatabase.com/news/videos/2026-06-20-agent-harness-maintenance/) [▶ Claude Connectors Tutorial: Link Gmail, Calendar, Notion (and 9,000+ via Zapier) 2026-06-18](https://openclawdatabase.com/news/videos/2026-06-18-claude-connectors-tutorial/) [See all OpenClaw news →](https://openclawdatabase.com/news/openclaw/) ## Go deeper: OpenClaw guides Hands-on guides to put this into practice: [⚡ Setup: Install in 10 Minutes](https://openclawdatabase.com/openclaw/setup/) [🔐 Security Hardening](https://openclawdatabase.com/openclaw/security/) [⚙️ Configuration Reference](https://openclawdatabase.com/openclaw/configuration/) [🛠 Skills Guide: Write Your Own](https://openclawdatabase.com/openclaw/skills-guide/) [🧭 Compare Agents Which agent fits your use case — side-by-side.](https://openclawdatabase.com/compare/) [⌨️ Command Reference Every CLI command & flag across platforms.](https://openclawdatabase.com/commands/)