{"id":30761,"date":"2025-12-01T05:04:33","date_gmt":"2025-12-01T13:04:33","guid":{"rendered":"https:\/\/www.pingcap.com\/?p=30761"},"modified":"2026-01-19T18:57:12","modified_gmt":"2026-01-20T02:57:12","slug":"ai-agent-that-builds-full-stack-apps","status":"publish","type":"post","link":"https:\/\/www.pingcap.com\/ko\/blog\/ai-agent-that-builds-full-stack-apps\/","title":{"rendered":"How to Build an AI Agent that Builds Full-Stack Apps"},"content":{"rendered":"<p><em><strong>An open-source starter kit for building a &#8220;Lovable.dev&#8221;-style AI agent<\/strong><\/em><\/p>\n\n\n\n<p>More and more, we&#8217;re seeing AI agents build entire applications from a single prompt. Platforms like Lovable.dev and Manus are pioneering this space. Many of them are using <a href=\"\/ko\/tidb\/cloud\/\">TiDB Cloud<\/a> to power their data layer. So, we decided to build one too, as a <strong><a href=\"https:\/\/github.com\/pingcap\/full-stack-app-builder-ai-agent\">public, open-source dev kit available on GitHub<\/a><\/strong> that you can use as a starting point to build your own AI-driven development platform.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"full stack app builder ai agent\" width=\"500\" height=\"375\" src=\"https:\/\/www.youtube.com\/embed\/kyWZzj57wwY?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"What_can_this_agent_do\"><\/span>What can this agent do?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>This agent is an AI chat app and codegen platform that ties together everything you need to prompt (i.e., <em>vibe code<\/em>) complete web applications end-to-end. It can:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Generate complete web apps from a prompt<\/strong><strong>: <\/strong>You describe what you want to build, and the agent scaffolds it automatically with the correct files, dependencies, and setup.<\/li>\n\n\n\n<li><strong>Provision a <\/strong><strong>TiDB Cloud<\/strong><strong> database automatically<\/strong><strong>: <\/strong>Every generated project gets its own TiDB Cloud cluster including database, schema, and a connection string fully preconfigured. Each instruction within the same project is versioned as a separate TiDB Cloud branch, ensuring isolated and trackable iterations.<\/li>\n\n\n\n<li><strong>Track project versions<\/strong><strong>: <\/strong>The agent stores every generated app and its database credentials (user, password, branch info), so you can revisit previous versions or roll back safely. Most importantly, your database always stays in sync with the selected project version.<\/li>\n\n\n\n<li><strong>Run and preview apps instantly<\/strong><strong>: <\/strong>Test each generated project directly from the UI or open the preview URL immediately.<\/li>\n\n\n\n<li><strong>Keep context between generations<\/strong><strong>: <\/strong>The agent remembers your previous instructions and builds on them, enabling iterative refinement instead of isolated one-shot generations.<\/li>\n\n\n\n<li><strong>Scale down when idle<\/strong><strong>: <\/strong>Each generated app uses TiDB Cloud, which automatically scales to zero when unused.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Architecture_Overview\"><\/span>Architecture Overview<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"572\" src=\"https:\/\/static.pingcap.com\/files\/2025\/12\/01193226\/architecture-overview-4k1-1024x572.png\" alt=\"\" class=\"wp-image-30810\" srcset=\"https:\/\/static.pingcap.com\/files\/2025\/12\/01193226\/architecture-overview-4k1-1024x572.png 1024w, https:\/\/static.pingcap.com\/files\/2025\/12\/01193226\/architecture-overview-4k1-300x167.png 300w, https:\/\/static.pingcap.com\/files\/2025\/12\/01193226\/architecture-overview-4k1-768x429.png 768w, https:\/\/static.pingcap.com\/files\/2025\/12\/01193226\/architecture-overview-4k1-1536x857.png 1536w, https:\/\/static.pingcap.com\/files\/2025\/12\/01193226\/architecture-overview-4k1-2048x1143.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>This architecture transforms natural-language prompts into production-ready web apps by combining:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Codex (gpt-5.1-codex) or Claude Code<\/strong> for reasoning and codegen<\/li>\n\n\n\n<li><strong>TiDB Cloud<\/strong> for cluster-level, branchable data environments<\/li>\n\n\n\n<li><strong>Kysely<\/strong> for type-safe SQL<\/li>\n\n\n\n<li><strong>Vercel<\/strong> for execution and deployment<\/li>\n\n\n\n<li><strong>GitHub<\/strong> for version control<\/li>\n<\/ul>\n\n\n\n<p>At the center of this stack is <a href=\"https:\/\/www.pingcap.com\/ko\/tidb\/cloud\/\">TiDB Cloud<\/a>, acting as the central nervous system for the entire operation. It serves as both the control-plane database for the platform itself and provides the branchable, on-demand data environments for every app the agent generates.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_It_Works_The_Agents_End-to-End_Flow\"><\/span>How It Works: The Agent&#8217;s End-to-End Flow<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>This entire process can be broken down into two key parts: the tools the agent needs to do its job, and the step-by-step workflow it follows to build an application.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Part 1: The Agent&#8217;s Toolkit<\/h3>\n\n\n\n<p>Before the agent can generate or deploy anything, it must authenticate itself against all the external systems it orchestrates. These credentials form the <strong>control plane<\/strong> \u2014 the unified interface through which the agent provisions environments, generates code, manages data, and ships applications.<\/p>\n\n\n\n<p>The agent requires:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>GitHub <\/strong><strong>t<\/strong><strong>oken<\/strong><strong>s<\/strong>: Creates repositories, pushes generated code, and manages branches. GitHub becomes the source of truth for code checkpoints.<\/li>\n\n\n\n<li><strong>Vercel <\/strong><strong>t<\/strong><strong>oken<\/strong><strong>s<\/strong>: Creates ephemeral sandboxes, uploads build artifacts, and deploys web apps. Vercel acts as the execution layer.<\/li>\n\n\n\n<li><strong>Codex or Claude Code API <\/strong><strong>k<\/strong><strong>eys<\/strong>: Enable reasoning and planning. The model acts as the brain of the system.<\/li>\n\n\n\n<li><strong><a href=\"https:\/\/docs.pingcap.com\/tidbcloud\/api-overview\/\">TiDB Cloud API keys<\/a><\/strong>: Allow the agent to programmatically create, manage, and branch TiDB Cloud clusters. This provides isolated data environments and the backbone for safe iteration.<\/li>\n<\/ul>\n\n\n\n<p>Together, these credentials let the agent fully automate the lifecycle: <strong>plan \u2192 provision \u2192 generate \u2192 migrate \u2192 deploy \u2192 iterate.<\/strong><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Part 2: The App-Building Workflow in Action<\/h3>\n\n\n\n<p>Now, let&#8217;s see how the agent uses its toolkit in a real-world scenario. From the initial prompt to the final deployment, the agent follows a precise, automated sequence to turn an idea into a running application.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"559\" src=\"https:\/\/static.pingcap.com\/files\/2025\/12\/01194958\/workflow-fullstack-1024x559.png\" alt=\"\" class=\"wp-image-30814\" srcset=\"https:\/\/static.pingcap.com\/files\/2025\/12\/01194958\/workflow-fullstack-1024x559.png 1024w, https:\/\/static.pingcap.com\/files\/2025\/12\/01194958\/workflow-fullstack-300x164.png 300w, https:\/\/static.pingcap.com\/files\/2025\/12\/01194958\/workflow-fullstack-768x419.png 768w, https:\/\/static.pingcap.com\/files\/2025\/12\/01194958\/workflow-fullstack-1536x838.png 1536w, https:\/\/static.pingcap.com\/files\/2025\/12\/01194958\/workflow-fullstack-2048x1117.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Step 1: Prompt<\/h4>\n\n\n\n<p>It begins when the user creates a request, such as: &#8220;Build a Todo List app.&#8221;<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Step 2: Plan<\/h4>\n\n\n\n<p>Immediately upon receiving the prompt, the model analyzes the requirements and generates a comprehensive execution plan.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Step 3: Provision<\/h4>\n\n\n\n<p>Once the plan is set, the agent provisions the necessary infrastructure. It creates a new TiDB Cloud cluster, a Vercel Sandbox, and a GitHub repo while simultaneously configuring the required environment variables.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Step 4: Generate Code<\/h4>\n\n\n\n<p>With the environment ready, Codex or Claude Code proceeds to generate the application code. This includes creating pages, components, and API routes, alongside the Kysely schema and migration files.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Step 5: Database Migration<\/h4>\n\n\n\n<p>Next, to ensure data consistency, Kysely applies the typed migrations directly to the TiDB Cloud cluster.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Step 6: Deploy<\/h4>\n\n\n\n<p>Following the successful migration, the agent commits the code to GitHub and automatically triggers a Vercel deployment to bring the app live.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Step 7: Iterate with Follow-Up Instruction<\/h4>\n\n\n\n<p>Finally, the process becomes cyclical. For example, when you provide a follow-up instruction like &#8220;Add a username field,&#8221; the agent creates a new <a href=\"https:\/\/docs.pingcap.com\/tidbcloud\/branch-manage\/?plan=starter\">TiDB Cloud branch<\/a>. It then updates the schema, regenerates and applies migrations, updates the UI\/API code, and redeploys. Because of this branching capability, everything stays isolated and fully reversible.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"643\" src=\"https:\/\/static.pingcap.com\/files\/2025\/12\/01033041\/image-4-1024x643.png\" alt=\"\" class=\"wp-image-30765\" srcset=\"https:\/\/static.pingcap.com\/files\/2025\/12\/01033041\/image-4-1024x643.png 1024w, https:\/\/static.pingcap.com\/files\/2025\/12\/01033041\/image-4-300x188.png 300w, https:\/\/static.pingcap.com\/files\/2025\/12\/01033041\/image-4-768x482.png 768w, https:\/\/static.pingcap.com\/files\/2025\/12\/01033041\/image-4-1536x964.png 1536w, https:\/\/static.pingcap.com\/files\/2025\/12\/01033041\/image-4-2048x1285.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Magic_Features_Where_It_All_Clicks\"><\/span>Magic Features: Where It All Clicks<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>While the workflow seems straightforward, a few key techniques are what make this system robust, safe, and efficient. Let&#8217;s look at the &#8216;magic&#8217; that makes it all click.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Technique 1: Syncing Code and Data with Git + TiDB Branches<\/h3>\n\n\n\n<p>Every instruction becomes a lightweight checkpoint for both code and data. Each version stores the Git repo name and branch name alongside the TiDB Cloud cluster ID and branch name, ensuring perfect code\u2013data synchronization.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Example: Creating a TiDB Cloud Branch Programmatically<\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>import fetch from \"node-fetch\";\n\nconst SERVERLESS_API_BASE = \"https:\/\/serverless.tidbapi.com\/v1beta1\";\n\nasync function createBranch(clusterId, newBranchName, publicKey, privateKey) {\n  const url = `${SERVERLESS_API_BASE}\/clusters\/${clusterId}\/branches`;\n  const body = JSON.stringify({ displayName: newBranchName });\n\n  const response = await fetch(url, {\n    method: \"POST\",\n    headers: {\n      \"Content-Type\": \"application\/json\",\n      Authorization:\n        \"Basic \" + Buffer.from(`${publicKey}:${privateKey}`).toString(\"base64\"),\n    },\n    body,\n  });\n\n  if (!response.ok) {\n    const text = await response.text();\n    throw new Error(`Failed to create branch: ${response.status} ${text}`);\n  }\n\n  const data = await response.json();\n  return data.branchId;\n}\n\ncreateBranch(\n  \"1234567890\",\n  \"new-feature-branch\",\n  process.env.TIDB_CLOUD_PUBLIC_KEY,\n  process.env.TIDB_CLOUD_PRIVATE_KEY\n)\n  .then((branchId) =&gt; console.log(\"Branch created:\", branchId))\n  .catch(console.error);<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Technique 2: Safe, Type-Safe Schema Migrations with Kysely<\/h3>\n\n\n\n<p>When the agent needs to change the schema, it generates a Kysely migration file. This makes schema evolution safe, reversible, and fully automated.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Example: A Kysely Migration File<\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>import type { Kysely } from \"kysely\";\n\nexport async function up(db: Kysely&lt;any&gt;) {\n  await db.schema\n    .alterTable(\"todo_list\")\n    .addColumn(\"username\", \"varchar(255)\", (col) =&gt; col.notNull().defaultTo(\"\"))\n    .execute();\n}\n\nexport async function down(db: Kysely&lt;any&gt;) {\n  await db.schema\n    .alterTable(\"todo_list\")\n    .dropColumn(\"username\")\n    .execute();\n}<\/code><\/pre>\n\n\n\n<p>This is critical for iterative development. Because Kysely generates both an &#8220;up&#8221; and a &#8220;down&#8221; migration for every schema change, the agent can not only apply new structures but also safely reverse them. This ensures that every iteration is clean and fully reversible without manual database intervention.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Technique 3: On-Demand Dev Environments with Scale-to-Zero<\/h3>\n\n\n\n<p><strong>TiDB Cloud<\/strong> automatically scales down to <strong>$0 when idle<\/strong>.<strong> <\/strong>This enables:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Ephemeral, AI-generated apps.<\/li>\n\n\n\n<li>On-demand development environments.<\/li>\n\n\n\n<li>Branch-per-instruction workflows.<\/li>\n\n\n\n<li>Burst-heavy workloads from agents.<\/li>\n<\/ul>\n\n\n\n<p>The agent can create many isolated environments without persistent costs.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Wrapping_Up\"><\/span>Wrapping Up<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>This starter kit is more than just code; it&#8217;s a blueprint for building dynamic, AI-driven applications. The key takeaway is treating your database not as a static box, but as a programmable, API-driven resource. We&#8217;ve open-sourced the entire project for you to explore. We encourage you to fork the repo, use the code, and see what you can create.<\/p>\n\n\n\n<p><em>Ready to Build Your Own? <strong><a href=\"https:\/\/tidbcloud.com\/free-trial\/\">Try TiDB Cloud for free<\/a><\/strong> to test out the database branching and scale-to-zero features used in this project. No credit card is required to get started.<\/em><\/p>\n\n\n\n<p><\/p>","protected":false},"excerpt":{"rendered":"<p>An open-source starter kit for building a &#8220;Lovable.dev&#8221;-style AI agent More and more, we&#8217;re seeing AI agents build entire applications from a single prompt. Platforms like Lovable.dev and Manus are pioneering this space. Many of them are using TiDB Cloud to power their data layer. So, we decided to build one too, as a public, [&hellip;]<\/p>\n","protected":false},"author":326,"featured_media":30818,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"ub_ctt_via":"","footnotes":""},"categories":[436],"tags":[138,31,29],"class_list":["post-30761","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorial","tag-ai","tag-tidb-cloud","tag-tutorial"],"acf":[],"featured_image_src":"https:\/\/static.pingcap.com\/files\/2025\/12\/01195123\/banner-3-1.png","author_info":{"display_name":"Hao Huo","author_link":"https:\/\/www.pingcap.com\/ko\/blog\/author\/hao-huo\/"},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.9 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Full-Stack AI Agent: How to Builds a &quot;Lovable.dev&quot;-style AI agent<\/title>\n<meta name=\"description\" content=\"Learn to build a &quot;Lovable.dev&quot;-style AI agent that generates full-stack apps from a prompt. Get the open-source starter kit using TiDB Cloud.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.pingcap.com\/ko\/blog\/ai-agent-that-builds-full-stack-apps\/\" \/>\n<meta property=\"og:locale\" content=\"ko_KR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Full-Stack AI Agent: How to Builds a &quot;Lovable.dev&quot;-style AI agent\" \/>\n<meta property=\"og:description\" content=\"Learn to build a &quot;Lovable.dev&quot;-style AI agent that generates full-stack apps from a prompt. Get the open-source starter kit using TiDB Cloud.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.pingcap.com\/ko\/blog\/ai-agent-that-builds-full-stack-apps\/\" \/>\n<meta property=\"og:site_name\" content=\"TiDB\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/facebook.com\/pingcap2015\" \/>\n<meta property=\"article:published_time\" content=\"2025-12-01T13:04:33+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-01-20T02:57:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/static.pingcap.com\/files\/2025\/12\/01195019\/banner-2-11-1024x506.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"506\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Hao Huo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/static.pingcap.com\/files\/2025\/12\/01034533\/banner-2-1.png\" \/>\n<meta name=\"twitter:creator\" content=\"@PingCAP\" \/>\n<meta name=\"twitter:site\" content=\"@PingCAP\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Hao Huo\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6\ubd84\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.pingcap.com\/blog\/ai-agent-that-builds-full-stack-apps\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.pingcap.com\/blog\/ai-agent-that-builds-full-stack-apps\/\"},\"author\":{\"name\":\"Hao Huo\",\"@id\":\"https:\/\/www.pingcap.com\/#\/schema\/person\/e32d2c601309a7e11dd0b9c2046c39a4\"},\"headline\":\"How to Build an AI Agent that Builds Full-Stack Apps\",\"datePublished\":\"2025-12-01T13:04:33+00:00\",\"dateModified\":\"2026-01-20T02:57:12+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.pingcap.com\/blog\/ai-agent-that-builds-full-stack-apps\/\"},\"wordCount\":1121,\"publisher\":{\"@id\":\"https:\/\/www.pingcap.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.pingcap.com\/blog\/ai-agent-that-builds-full-stack-apps\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/static.pingcap.com\/files\/2025\/12\/01195123\/banner-3-1.png\",\"keywords\":[\"AI\",\"TiDB Cloud\",\"Tutorial\"],\"articleSection\":[\"Tutorial\"],\"inLanguage\":\"ko-KR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.pingcap.com\/blog\/ai-agent-that-builds-full-stack-apps\/\",\"url\":\"https:\/\/www.pingcap.com\/blog\/ai-agent-that-builds-full-stack-apps\/\",\"name\":\"Full-Stack AI Agent: How to Builds a \\\"Lovable.dev\\\"-style AI agent\",\"isPartOf\":{\"@id\":\"https:\/\/www.pingcap.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.pingcap.com\/blog\/ai-agent-that-builds-full-stack-apps\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.pingcap.com\/blog\/ai-agent-that-builds-full-stack-apps\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/static.pingcap.com\/files\/2025\/12\/01195123\/banner-3-1.png\",\"datePublished\":\"2025-12-01T13:04:33+00:00\",\"dateModified\":\"2026-01-20T02:57:12+00:00\",\"description\":\"Learn to build a \\\"Lovable.dev\\\"-style AI agent that generates full-stack apps from a prompt. Get the open-source starter kit using TiDB Cloud.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.pingcap.com\/blog\/ai-agent-that-builds-full-stack-apps\/#breadcrumb\"},\"inLanguage\":\"ko-KR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.pingcap.com\/blog\/ai-agent-that-builds-full-stack-apps\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"ko-KR\",\"@id\":\"https:\/\/www.pingcap.com\/blog\/ai-agent-that-builds-full-stack-apps\/#primaryimage\",\"url\":\"https:\/\/static.pingcap.com\/files\/2025\/12\/01195123\/banner-3-1.png\",\"contentUrl\":\"https:\/\/static.pingcap.com\/files\/2025\/12\/01195123\/banner-3-1.png\",\"width\":3616,\"height\":1184},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.pingcap.com\/blog\/ai-agent-that-builds-full-stack-apps\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.pingcap.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Build an AI Agent that Builds Full-Stack Apps\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.pingcap.com\/#website\",\"url\":\"https:\/\/www.pingcap.com\/\",\"name\":\"TiDB\",\"description\":\"TiDB | SQL at Scale\",\"publisher\":{\"@id\":\"https:\/\/www.pingcap.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.pingcap.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"ko-KR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.pingcap.com\/#organization\",\"name\":\"PingCAP\",\"url\":\"https:\/\/www.pingcap.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ko-KR\",\"@id\":\"https:\/\/www.pingcap.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/static.pingcap.com\/files\/2021\/11\/pingcap-logo.png\",\"contentUrl\":\"https:\/\/static.pingcap.com\/files\/2021\/11\/pingcap-logo.png\",\"width\":811,\"height\":232,\"caption\":\"PingCAP\"},\"image\":{\"@id\":\"https:\/\/www.pingcap.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/facebook.com\/pingcap2015\",\"https:\/\/x.com\/PingCAP\",\"https:\/\/linkedin.com\/company\/pingcap\",\"https:\/\/youtube.com\/channel\/UCuq4puT32DzHKT5rU1IZpIA\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.pingcap.com\/#\/schema\/person\/e32d2c601309a7e11dd0b9c2046c39a4\",\"name\":\"Hao Huo\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ko-KR\",\"@id\":\"https:\/\/www.pingcap.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/static.pingcap.com\/files\/2022\/10\/17234942\/avatar.jpg\",\"contentUrl\":\"https:\/\/static.pingcap.com\/files\/2022\/10\/17234942\/avatar.jpg\",\"caption\":\"Hao Huo\"},\"description\":\"Director of AI Innovation\",\"url\":\"https:\/\/www.pingcap.com\/ko\/blog\/author\/hao-huo\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Full-Stack AI Agent: How to Builds a \"Lovable.dev\"-style AI agent","description":"Learn to build a \"Lovable.dev\"-style AI agent that generates full-stack apps from a prompt. Get the open-source starter kit using TiDB Cloud.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.pingcap.com\/ko\/blog\/ai-agent-that-builds-full-stack-apps\/","og_locale":"ko_KR","og_type":"article","og_title":"Full-Stack AI Agent: How to Builds a \"Lovable.dev\"-style AI agent","og_description":"Learn to build a \"Lovable.dev\"-style AI agent that generates full-stack apps from a prompt. Get the open-source starter kit using TiDB Cloud.","og_url":"https:\/\/www.pingcap.com\/ko\/blog\/ai-agent-that-builds-full-stack-apps\/","og_site_name":"TiDB","article_publisher":"https:\/\/facebook.com\/pingcap2015","article_published_time":"2025-12-01T13:04:33+00:00","article_modified_time":"2026-01-20T02:57:12+00:00","og_image":[{"width":1024,"height":506,"url":"https:\/\/static.pingcap.com\/files\/2025\/12\/01195019\/banner-2-11-1024x506.png","type":"image\/png"}],"author":"Hao Huo","twitter_card":"summary_large_image","twitter_image":"https:\/\/static.pingcap.com\/files\/2025\/12\/01034533\/banner-2-1.png","twitter_creator":"@PingCAP","twitter_site":"@PingCAP","twitter_misc":{"Written by":"Hao Huo","Est. reading time":"6\ubd84"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.pingcap.com\/blog\/ai-agent-that-builds-full-stack-apps\/#article","isPartOf":{"@id":"https:\/\/www.pingcap.com\/blog\/ai-agent-that-builds-full-stack-apps\/"},"author":{"name":"Hao Huo","@id":"https:\/\/www.pingcap.com\/#\/schema\/person\/e32d2c601309a7e11dd0b9c2046c39a4"},"headline":"How to Build an AI Agent that Builds Full-Stack Apps","datePublished":"2025-12-01T13:04:33+00:00","dateModified":"2026-01-20T02:57:12+00:00","mainEntityOfPage":{"@id":"https:\/\/www.pingcap.com\/blog\/ai-agent-that-builds-full-stack-apps\/"},"wordCount":1121,"publisher":{"@id":"https:\/\/www.pingcap.com\/#organization"},"image":{"@id":"https:\/\/www.pingcap.com\/blog\/ai-agent-that-builds-full-stack-apps\/#primaryimage"},"thumbnailUrl":"https:\/\/static.pingcap.com\/files\/2025\/12\/01195123\/banner-3-1.png","keywords":["AI","TiDB Cloud","Tutorial"],"articleSection":["Tutorial"],"inLanguage":"ko-KR"},{"@type":"WebPage","@id":"https:\/\/www.pingcap.com\/blog\/ai-agent-that-builds-full-stack-apps\/","url":"https:\/\/www.pingcap.com\/blog\/ai-agent-that-builds-full-stack-apps\/","name":"Full-Stack AI Agent: How to Builds a \"Lovable.dev\"-style AI agent","isPartOf":{"@id":"https:\/\/www.pingcap.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.pingcap.com\/blog\/ai-agent-that-builds-full-stack-apps\/#primaryimage"},"image":{"@id":"https:\/\/www.pingcap.com\/blog\/ai-agent-that-builds-full-stack-apps\/#primaryimage"},"thumbnailUrl":"https:\/\/static.pingcap.com\/files\/2025\/12\/01195123\/banner-3-1.png","datePublished":"2025-12-01T13:04:33+00:00","dateModified":"2026-01-20T02:57:12+00:00","description":"Learn to build a \"Lovable.dev\"-style AI agent that generates full-stack apps from a prompt. Get the open-source starter kit using TiDB Cloud.","breadcrumb":{"@id":"https:\/\/www.pingcap.com\/blog\/ai-agent-that-builds-full-stack-apps\/#breadcrumb"},"inLanguage":"ko-KR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.pingcap.com\/blog\/ai-agent-that-builds-full-stack-apps\/"]}]},{"@type":"ImageObject","inLanguage":"ko-KR","@id":"https:\/\/www.pingcap.com\/blog\/ai-agent-that-builds-full-stack-apps\/#primaryimage","url":"https:\/\/static.pingcap.com\/files\/2025\/12\/01195123\/banner-3-1.png","contentUrl":"https:\/\/static.pingcap.com\/files\/2025\/12\/01195123\/banner-3-1.png","width":3616,"height":1184},{"@type":"BreadcrumbList","@id":"https:\/\/www.pingcap.com\/blog\/ai-agent-that-builds-full-stack-apps\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.pingcap.com\/"},{"@type":"ListItem","position":2,"name":"How to Build an AI Agent that Builds Full-Stack Apps"}]},{"@type":"WebSite","@id":"https:\/\/www.pingcap.com\/#website","url":"https:\/\/www.pingcap.com\/","name":"\ud2f0DB","description":"TiDB | SQL at Scale","publisher":{"@id":"https:\/\/www.pingcap.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.pingcap.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ko-KR"},{"@type":"Organization","@id":"https:\/\/www.pingcap.com\/#organization","name":"PingCAP","url":"https:\/\/www.pingcap.com\/","logo":{"@type":"ImageObject","inLanguage":"ko-KR","@id":"https:\/\/www.pingcap.com\/#\/schema\/logo\/image\/","url":"https:\/\/static.pingcap.com\/files\/2021\/11\/pingcap-logo.png","contentUrl":"https:\/\/static.pingcap.com\/files\/2021\/11\/pingcap-logo.png","width":811,"height":232,"caption":"PingCAP"},"image":{"@id":"https:\/\/www.pingcap.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/facebook.com\/pingcap2015","https:\/\/x.com\/PingCAP","https:\/\/linkedin.com\/company\/pingcap","https:\/\/youtube.com\/channel\/UCuq4puT32DzHKT5rU1IZpIA"]},{"@type":"Person","@id":"https:\/\/www.pingcap.com\/#\/schema\/person\/e32d2c601309a7e11dd0b9c2046c39a4","name":"Hao Huo","image":{"@type":"ImageObject","inLanguage":"ko-KR","@id":"https:\/\/www.pingcap.com\/#\/schema\/person\/image\/","url":"https:\/\/static.pingcap.com\/files\/2022\/10\/17234942\/avatar.jpg","contentUrl":"https:\/\/static.pingcap.com\/files\/2022\/10\/17234942\/avatar.jpg","caption":"Hao Huo"},"description":"Director of AI Innovation","url":"https:\/\/www.pingcap.com\/ko\/blog\/author\/hao-huo\/"}]}},"grav_blocks":false,"card_markup":"<a class=\"card-resource bg-white\" href=\"https:\/\/www.pingcap.com\/ko\/blog\/ai-agent-that-builds-full-stack-apps\/\"><div class=\"card-resource__image-container\"><img class=\"card-resource__image\" alt=\"banner 3-1\" src=\"https:\/\/static.pingcap.com\/files\/2025\/12\/01195123\/banner-3-1.png\" loading=\"lazy\" width=3616 height=1184 \/><\/div><div class=\"card-resource__content-container\"><div class=\"card-resource__content-head\"><div class=\"card-resource__category\">Tutorial<\/div><\/div><h5 class=\"card-resource__title\">How to Build an AI Agent that Builds Full-Stack Apps<\/h5><\/div><\/a>","_links":{"self":[{"href":"https:\/\/www.pingcap.com\/ko\/wp-json\/wp\/v2\/posts\/30761","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.pingcap.com\/ko\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.pingcap.com\/ko\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.pingcap.com\/ko\/wp-json\/wp\/v2\/users\/326"}],"replies":[{"embeddable":true,"href":"https:\/\/www.pingcap.com\/ko\/wp-json\/wp\/v2\/comments?post=30761"}],"version-history":[{"count":18,"href":"https:\/\/www.pingcap.com\/ko\/wp-json\/wp\/v2\/posts\/30761\/revisions"}],"predecessor-version":[{"id":31370,"href":"https:\/\/www.pingcap.com\/ko\/wp-json\/wp\/v2\/posts\/30761\/revisions\/31370"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.pingcap.com\/ko\/wp-json\/wp\/v2\/media\/30818"}],"wp:attachment":[{"href":"https:\/\/www.pingcap.com\/ko\/wp-json\/wp\/v2\/media?parent=30761"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.pingcap.com\/ko\/wp-json\/wp\/v2\/categories?post=30761"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.pingcap.com\/ko\/wp-json\/wp\/v2\/tags?post=30761"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}