Tự Build Lovable Clone: AI Sinh Code, Live Preview và Tool-Call Edit

Posted on: 5/14/2026 4:28:02 PM

Lovable, v0.dev, Bolt.new — chỉ trong 18 tháng cuối, một loạt sản phẩm "AI app builder" đã định hình lại cách non-technical user dựng ra phần mềm: gõ một câu mô tả, nhìn UI hiện ra trong browser, tinh chỉnh bằng chat, xuất GitHub repo. Cảm giác giống "có một developer ngồi cạnh và làm theo lệnh". Nhưng nhìn kỹ, Lovable không phải magic — nó là sự ghép nối khéo léo của 4 thành phần đã có sẵn: LLM với tool use, một virtual file system, một runtime để preview, và một streaming UI để render từng bước. Bài này hướng dẫn bạn tự xây phiên bản tối giản — đủ để chạy thật, đủ để hiểu mọi quyết định kiến trúc bên trong sản phẩm thật.

1. Lovable thực sự làm gì bên trong?

Tách bỏ marketing, một AI app builder kiểu Lovable là vòng lặp 4 bước chạy trong browser tab của bạn:

graph LR
    U["User prompt
(chat input)"] --> AGENT["Agent Loop
(LLM + tools)"]
    AGENT -->|"tool_use"| FS["Virtual
File System"]
    FS -->|"file change events"| PREVIEW["Sandbox Preview
(WebContainer)"]
    AGENT -->|"text stream"| UI["Chat UI
(thinking + diffs)"]
    PREVIEW -->|"iframe"| USER2["User"]
    UI --> USER2
    USER2 -.->|"new prompt"| U

    classDef u fill:#e94560,stroke:#fff,color:#fff
    classDef a fill:#16213e,stroke:#fff,color:#fff
    classDef sb fill:#ff9800,stroke:#fff,color:#fff
    classDef st fill:#f8f9fa,stroke:#e94560,color:#2c3e50
    class U,USER2 u
    class AGENT a
    class PREVIEW sb
    class FS,UI st

Mỗi component đều có lựa chọn thay thế. Bài này sẽ chọn stack đơn giản nhất nhưng đủ "thật":

2. Trái tim của hệ thống — Tool schema

Lovable chạy được vì LLM không tự sinh ra giao diện chat. Nó được trang bị một bộ tool có schema rõ ràng, và mỗi response của model là một chuỗi tool call lên virtual file system. Đây là 5 tool tối thiểu — học từ pattern của Anthropic Computer Use và Cursor Composer:

// lib/tools.ts
import Anthropic from "@anthropic-ai/sdk";

export const TOOLS: Anthropic.Tool[] = [
  {
    name: "write_file",
    description: "Tạo MỚI hoặc GHI ĐÈ TOÀN BỘ một file. Dùng khi tạo component mới hoặc thay đổi >50% nội dung.",
    input_schema: {
      type: "object",
      properties: {
        path: { type: "string", description: "Đường dẫn tương đối từ root, vd: src/App.tsx" },
        content: { type: "string", description: "Toàn bộ nội dung file" },
      },
      required: ["path", "content"],
    },
  },
  {
    name: "edit_file",
    description: "Edit từng phần file qua str_replace. Hiệu quả hơn write_file cho thay đổi nhỏ.",
    input_schema: {
      type: "object",
      properties: {
        path: { type: "string" },
        old_str: { type: "string", description: "Đoạn text CHÍNH XÁC cần thay (phải unique trong file)" },
        new_str: { type: "string", description: "Đoạn text mới" },
      },
      required: ["path", "old_str", "new_str"],
    },
  },
  {
    name: "read_file",
    description: "Đọc nội dung một file. Bắt buộc đọc trước khi edit_file.",
    input_schema: {
      type: "object",
      properties: { path: { type: "string" } },
      required: ["path"],
    },
  },
  {
    name: "run_command",
    description: "Chạy shell command trong  (vd npm install lucide-react).",
    input_schema: {
      type: "object",
      properties: { command: { type: "string" } },
      required: ["command"],
    },
  },
  {
    name: "list_files",
    description: "Liệt kê file trong thư mục.",
    input_schema: {
      type: "object",
      properties: { path: { type: "string", description: "vd: src" } },
      required: ["path"],
    },
  },
];

3. Virtual File System trong React state

Không cần database hay disk. Một Map<string, string> trong Zustand là đủ:

// store/files.ts
import { create } from "zustand";

interface FileStore {
  files: Map<string, string>;
  versions: Array<Map<string, string>>; // snapshot rollback

  write: (path: string, content: string) => void;
  edit: (path: string, oldStr: string, newStr: string) => { ok: boolean; error?: string };
  read: (path: string) => string | null;
  list: (prefix: string) => string[];
  snapshot: () => void;
  rollback: () => void;
}

export const useFiles = create<FileStore>((set, get) => ({
  files: new Map(),
  versions: [],

  write: (path, content) => set((s) => {
    const next = new Map(s.files);
    next.set(path, content);
    return { files: next };
  }),

  edit: (path, oldStr, newStr) => {
    const cur = get().files.get(path);
    if (!cur) return { ok: false, error: `File ${path} không tồn tại` };
    const idx = cur.indexOf(oldStr);
    if (idx === -1) return { ok: false, error: `old_str không tìm thấy trong ${path}` };
    if (cur.indexOf(oldStr, idx + 1) !== -1) {
      return { ok: false, error: `old_str xuất hiện nhiều lần trong ${path} — cần đoạn unique hơn` };
    }
    const updated = cur.replace(oldStr, newStr);
    get().write(path, updated);
    return { ok: true };
  },

  read: (path) => get().files.get(path) ?? null,
  list: (prefix) => [...get().files.keys()].filter((k) => k.startsWith(prefix)),

  snapshot: () => set((s) => ({ versions: [...s.versions, new Map(s.files)] })),
  rollback: () => set((s) => {
    const last = s.versions[s.versions.length - 1];
    return last ? { files: new Map(last), versions: s.versions.slice(0, -1) } : s;
  }),
}));

4. Live Preview với WebContainer

WebContainer chạy Node.js trong WebAssembly ngay trong browser tab — không cần backend. Nó nhận FileSystemTree, mount vào VM ảo, chạy npm install và dev server, rồi expose qua iframe URL.

// lib/preview.ts
import { WebContainer } from "@webcontainer/api";

let wcInstance: WebContainer | null = null;

export async function getContainer() {
  if (wcInstance) return wcInstance;
  wcInstance = await WebContainer.boot();
  return wcInstance;
}

export async function syncFiles(files: Map<string, string>) {
  const wc = await getContainer();
  const tree: Record<string, any> = {};
  for (const [path, content] of files) {
    const parts = path.split("/");
    let node = tree;
    for (let i = 0; i < parts.length - 1; i++) {
      node[parts[i]] ??= { directory: {} };
      node = node[parts[i]].directory;
    }
    node[parts[parts.length - 1]] = { file: { contents: content } };
  }
  await wc.mount(tree);
}

export async function startDevServer(): Promise<string> {
  const wc = await getContainer();
  const install = await wc.spawn("npm", ["install"]);
  if ((await install.exit) !== 0) throw new Error("npm install failed");

  const dev = wc.spawn("npm", ["run", "dev"]);
  return new Promise((resolve) => {
    wc.on("server-ready", (_port, url) => resolve(url));
  });
}

Sau đó trong React, một effect đơn giản auto-resync mỗi khi files thay đổi:

// components/Preview.tsx
const files = useFiles((s) => s.files);
const [previewUrl, setPreviewUrl] = useState<string | null>(null);

useEffect(() => {
  syncFiles(files); // hot-reload Vite/Next dev server tự pick up
}, [files]);

useEffect(() => {
  startDevServer().then(setPreviewUrl);
}, []);

return previewUrl
  ? <iframe src={previewUrl} className="w-full h-full border-0" />
  : <div>Đang khởi động ...</div>;

5. System prompt — bộ não của agent

Đây là phần quan trọng nhất, quyết định "tính cách" của builder. Một system prompt tốt cho Lovable-clone cần:

1. Role + scope: tôi là code generator cho Vite + React + TypeScript + Tailwind app.
2. Conventions: file structure (src/components, src/App.tsx), naming, dependencies cho phép.
3. Tool usage rules: khi nào write vs edit, bắt buộc read_file trước khi edit_file.
4. Definition of Done: model phải kết thúc bằng text mô tả thay đổi (không trả tool call vô hạn).

export const SYSTEM_PROMPT = `Bạn là AI engineer xây dựng web app cho user.

STACK BẮT BUỘC:
- Vite + React 19 + TypeScript + Tailwind CSS v4
- Không thêm framework khác (Next.js, Remix, ...) —  không hỗ trợ.
- File entry: src/main.tsx, src/App.tsx; html ở index.html.

QUY TẮC SỬ DỤNG TOOL:
1. Tạo file MỚI → write_file
2. Sửa file cũ → BẮT BUỘC read_file trước, sau đó edit_file với str_replace
3. Cần dependency mới → run_command "npm install <pkg>"
4. Khi xong, KHÔNG gọi tool nữa — viết 1-2 câu tóm tắt thay đổi cho user

QUY TẮC CODE:
- Mọi component có TypeScript prop types rõ ràng
- Tailwind utility classes, không inline style
- Không thêm comment thừa, không giải thích trong code
- Mỗi file < 200 dòng, tách nhỏ component khi cần

KHI USER CHỈ SỬA UI NHỎ:
- Chỉ touch những file thực sự cần thay
- Không refactor lan man, không tạo file thừa`;

6. Conversation loop với streaming

Đây là nơi tất cả ráp lại. API route trên Next.js nhận messages, gọi Anthropic streaming, mỗi tool_use được apply ngay vào virtual FS, mỗi delta text được stream về client.

// app/api/chat/route.ts
import Anthropic from "@anthropic-ai/sdk";
import { NextRequest } from "next/server";
import { SYSTEM_PROMPT } from "@/lib/prompt";
import { TOOLS } from "@/lib/tools";

const client = new Anthropic();

export async function POST(req: NextRequest) {
  const { messages, files } = await req.json();
  const encoder = new TextEncoder();
  const fsState = new Map<string, string>(Object.entries(files));

  const stream = new ReadableStream({
    async start(controller) {
      const send = (event: string, data: any) =>
        controller.enqueue(encoder.encode(`event: ${event}\ndata: ${JSON.stringify(data)}\n\n`));

      let convo: Anthropic.MessageParam[] = [...messages];

      // Agent loop — tối đa 10 vòng để tránh runaway
      for (let turn = 0; turn < 10; turn++) {
        const response = await client.messages.stream({
          model: "claude-sonnet-4-6",
          max_tokens: 8192,
          system: SYSTEM_PROMPT,
          tools: TOOLS,
          messages: convo,
        });

        const toolResults: Anthropic.ToolResultBlockParam[] = [];
        const assistantBlocks: Anthropic.ContentBlock[] = [];

        for await (const event of response) {
          if (event.type === "content_block_delta") {
            if (event.delta.type === "text_delta") {
              send("text", { delta: event.delta.text });
            }
          }
        }

        const final = await response.finalMessage();
        assistantBlocks.push(...final.content);

        // Apply tool calls vào virtual FS
        for (const block of final.content) {
          if (block.type !== "tool_use") continue;
          send("tool_call", { name: block.name, input: block.input });
          const result = applyTool(block.name, block.input as any, fsState);
          send("tool_result", { name: block.name, result });
          toolResults.push({
            type: "tool_result",
            tool_use_id: block.id,
            content: typeof result === "string" ? result : JSON.stringify(result),
            is_error: typeof result === "object" && "error" in result,
          });
        }

        convo.push({ role: "assistant", content: assistantBlocks });

        if (toolResults.length === 0) {
          send("done", { files: Object.fromEntries(fsState) });
          break; // Model trả lời text → kết thúc turn
        }
        convo.push({ role: "user", content: toolResults });
      }
      controller.close();
    },
  });

  return new Response(stream, {
    headers: { "Content-Type": "text/event-stream", "Cache-Control": "no-cache" },
  });
}

function applyTool(name: string, input: any, fs: Map<string, string>) {
  switch (name) {
    case "write_file": fs.set(input.path, input.content); return `OK wrote ${input.path}`;
    case "edit_file": {
      const cur = fs.get(input.path);
      if (!cur) return { error: `File ${input.path} không tồn tại` };
      if (!cur.includes(input.old_str)) return { error: `old_str không tìm thấy` };
      if (cur.split(input.old_str).length > 2) return { error: `old_str không unique` };
      fs.set(input.path, cur.replace(input.old_str, input.new_str));
      return `OK edited ${input.path}`;
    }
    case "read_file": return fs.get(input.path) ?? { error: "Không có file" };
    case "list_files": return [...fs.keys()].filter((k) => k.startsWith(input.path));
    case "run_command": return `Sandbox sẽ exec sau: ${input.command}`;
    default: return { error: "Unknown tool" };
  }
}

7. Render UI streaming

Phía client subscribe SSE và update store. Thay vì hiện cục text khô khan, mỗi tool call được render thành block riêng giống Lovable thật:

// hooks/useChat.ts
export function useChat() {
  const [messages, setMessages] = useState<Msg[]>([]);
  const filesStore = useFiles();

  async function send(prompt: string) {
    setMessages((m) => [...m, { role: "user", text: prompt }, { role: "assistant", parts: [] }]);
    filesStore.snapshot();

    const res = await fetch("/api/chat", {
      method: "POST",
      body: JSON.stringify({
        messages: messages.concat({ role: "user", content: prompt }),
        files: Object.fromEntries(filesStore.files),
      }),
    });
    const reader = res.body!.getReader();
    const decoder = new TextDecoder();

    let buf = "";
    while (true) {
      const { value, done } = await reader.read();
      if (done) break;
      buf += decoder.decode(value, { stream: true });
      const events = buf.split("\n\n");
      buf = events.pop() || "";
      for (const ev of events) {
        const [eline, dline] = ev.split("\n");
        const eventName = eline.replace("event: ", "");
        const data = JSON.parse(dline.replace("data: ", ""));
        handleEvent(eventName, data);
      }
    }
  }
  // ...
}

Trong React component, render mỗi part theo loại:

// components/Message.tsx
function MessagePart({ part }: { part: Part }) {
  if (part.type === "text") return <p>{part.text}</p>;
  if (part.type === "tool_call") {
    const icons: Record<string, string> = {
      write_file: "📝", edit_file: "✏️", read_file: "👀",
      run_command: "⚡", list_files: "📁",
    };
    return (
      <div className="border rounded-md px-3 py-2 my-1 bg-gray-50 text-sm font-mono">
        {icons[part.name]} {part.name}({describe(part.input)})
      </div>
    );
  }
  if (part.type === "tool_result" && part.error) {
    return <div className="text-red-600 text-xs">Lỗi: {part.error}</div>;
  }
  return null;
}

8. Snapshot & rollback — tính năng "Revert" của Lovable

Mỗi lần user gửi prompt mới, gọi filesStore.snapshot() trước. Khi user click "Revert", rollback() trả về phiên bản trước. Đơn giản nhưng đây là feature giữ chân user — vì AI sai là chuyện thường.

sequenceDiagram
    participant U as User
    participant Chat as Chat Loop
    participant FS as File Store
    participant Prev as Preview
    U->>Chat: "Đổi nút thành màu xanh"
    Chat->>FS: snapshot() — push state v3
    Chat->>FS: edit_file(Button.tsx, "bg-red", "bg-blue")
    FS->>Prev: hot reload
    Prev-->>U: nút xanh
    U->>Chat: "Hỏng rồi, revert đi"
    Chat->>FS: rollback() — pop về v3
    FS->>Prev: hot reload
    Prev-->>U: nút đỏ trở lại

Nâng cấp: thay vì lưu full snapshot mỗi turn (tốn memory), lưu diff (Myers diff hoặc immer Patch) — Lovable production làm vậy để giữ vài chục version mà không phình bộ nhớ.

9. Chi phí và bảo mật — 5 thứ phải nghĩ trước khi mở public

10. Seed template — vì sao Lovable luôn bắt đầu nhanh?

User vừa gõ prompt đầu tiên là Lovable đã có UI khung chạy ngay. Bí mật: seed template — một bộ file Vite + React + Tailwind đã có sẵn trong virtual FS từ giây đầu, không phải đợi LLM tạo từ zero.

// lib/seed.ts
export const SEED_FILES: Record<string, string> = {
  "package.json": JSON.stringify({
    name: "ai-app", type: "module",
    scripts: { dev: "vite", build: "vite build" },
    dependencies: { react: "^19.0.0", "react-dom": "^19.0.0" },
    devDependencies: {
      vite: "^6.0.0", "@vitejs/plugin-react": "^4.3.0",
      typescript: "^5.7.0", tailwindcss: "^4.0.0",
      "@tailwindcss/vite": "^4.0.0",
    },
  }, null, 2),

  "vite.config.ts": `import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwind from "@tailwindcss/vite";
export default defineConfig({ plugins: [react(), tailwind()] });`,

  "index.html": `<!DOCTYPE html><html><head><title>App</title></head>
<body><div id="root"></div><script type="module" src="/src/main.tsx"></script></body></html>`,

  "src/main.tsx": `import React from "react";
import { createRoot } from "react-dom/client";
import "./index.css";
import App from "./App";
createRoot(document.getElementById("root")!).render(<App />);`,

  "src/index.css": `@import "tailwindcss";`,

  "src/App.tsx": `export default function App() {
  return <div className="min-h-screen flex items-center justify-center text-2xl">
    Hello from your AI-built app
  </div>;
}`,
};

LLM chỉ cần edit App.tsx để hoàn thành prompt đầu tiên — TTFP (Time-To-First-Preview) còn 2-3 giây thay vì 30 giây.

11. Roadmap nâng cấp — từ MVP đến product

12. Những bài học khi xây thật

13. Kết luận

Lovable trông phức tạp nhưng tháo rời ra chỉ là một agent loop với tool use, một virtual FS, một preview, và một streaming UI. ~700 dòng code đủ chạy được phiên bản tối giản — và một khi đã chạy được, mỗi feature mới của Lovable thật (deploy, multiplayer, connect Supabase, AI redesign...) chỉ là thêm một tool hoặc một component, không phải đập lại kiến trúc.

Giá trị thật của bài này không phải clone Lovable để cạnh tranh — bạn không thắng được team đã đốt $200M build sản phẩm. Giá trị là hiểu rõ cách AI app builder thực sự vận hành, để khi bạn cần build feature tương tự (internal tool generator, BI dashboard builder, email template designer bằng AI), bạn biết chính xác phải code gì trong tuần đầu, không phải dò từ paper.

Nguồn tham khảo

• Anthropic — Tool use overview
• Anthropic — Prompt caching documentation
• StackBlitz — WebContainer API
• StackBlitz — bolt.new (open-source reference)
• Vercel — AI SDK — Chatbot with Tool Calls
• CodeSandbox — Sandpack docs
• Anthropic Engineering — Raising the bar on SWE-bench Verified with Claude (str_replace pattern)