{"id":2832,"date":"2025-11-18T14:11:50","date_gmt":"2025-11-18T14:11:50","guid":{"rendered":"https:\/\/rssfeedtelegrambot.bnaya.co.il\/index.php\/2025\/11\/18\/launch-a-chat-ui-agent-with-docker-and-the-vercel-ai-sdk\/"},"modified":"2025-11-18T14:11:50","modified_gmt":"2025-11-18T14:11:50","slug":"launch-a-chat-ui-agent-with-docker-and-the-vercel-ai-sdk","status":"publish","type":"post","link":"https:\/\/rssfeedtelegrambot.bnaya.co.il\/index.php\/2025\/11\/18\/launch-a-chat-ui-agent-with-docker-and-the-vercel-ai-sdk\/","title":{"rendered":"Launch a Chat UI Agent with Docker and the Vercel AI SDK"},"content":{"rendered":"<p>Running a Chat UI Agent doesn\u2019t have to involve a complicated setup. By combining <strong>Docker<\/strong> with the <strong>Vercel AI SDK<\/strong>, it\u2019s possible to build and launch a conversational interface in a clean, reproducible way. Docker ensures that the environment is consistent across machines, while the Vercel AI SDK provides the tools for handling streaming responses and multi-turn interactions. Using Docker Compose, the entire stack can be brought online with a single command, making it easier to experiment locally or move toward production.<\/p>\n<p>The <strong>Vercel AI SDK<\/strong> gives you a simple yet powerful framework for building conversational UIs, handling streaming responses, and managing multi-turn interactions. Pair it with Docker, and you\u2019ve got a portable, production-ready Chat UI Agent that runs the same way on your laptop, staging, or production.<\/p>\n<p>We\u2019ll start with the<a href=\"https:\/\/vercel.com\/templates\/ai\/nextjs-ai-chatbot\" rel=\"nofollow noopener\" target=\"_blank\"> Next.js AI Chatbot template<\/a> from Vercel, then containerize it using a <strong>battle-tested Dockerfile<\/strong> from <a href=\"https:\/\/github.com\/kristiyan-velkov\/frontend-prod-dockerfiles\/blob\/main\/next.js\/Dockerfile.standalone\" rel=\"nofollow noopener\" target=\"_blank\">demo repo<\/a>. This way, you don\u2019t just get a demo \u2014 you get a production-ready deployment.<\/p>\n<p>One command, and your Chat UI is live.<\/p>\n<h2 class=\"wp-block-heading\">Why this setup works<\/h2>\n<ul class=\"wp-block-list\">\n<li><strong>Next.js 15:<\/strong> Modern App Router, API routes, and streaming.<\/li>\n<li><strong>Vercel AI SDK:<\/strong> Simple React hooks and streaming utilities for chat UIs.<\/li>\n<li><strong>Docker (standalone build):<\/strong> Optimized for production \u2014 lean image size, fast startup, and reliable deployments.<\/li>\n<\/ul>\n<p>This stack covers both <strong>developer experience<\/strong> and <strong>production readiness<\/strong>.<\/p>\n<h2 class=\"wp-block-heading\">Step 1: Clone the template<\/h2>\n<p>Start with the official Vercel chatbot template:<\/p>\n<div class=\"wp-block-syntaxhighlighter-code \">\n<pre class=\"brush: plain; gutter: false; title: ; notranslate\">\nnpx create-next-app@latest chat-ui-agent -e https:\/\/vercel.com\/templates\/ai\/nextjs-ai-chatbot\n<\/pre>\n<\/div>\n<p>This scaffolds a full-featured chatbot using the Vercel AI SDK.<\/p>\n<h2 class=\"wp-block-heading\">Step 2: Configure API keys<\/h2>\n<p>Create a <code>.env.local<\/code> file in the root:<\/p>\n<div class=\"wp-block-syntaxhighlighter-code \">\n<pre class=\"brush: plain; gutter: false; title: ; notranslate\">\nOPENAI_API_KEY=your_openai_key_here\n<\/pre>\n<\/div>\n<p>Swap in your provider key if you\u2019re using Anthropic or another backend.<\/p>\n<h2 class=\"wp-block-heading\">Step 3: Add the production Dockerfile<\/h2>\n<p>Instead of writing your own Dockerfile, grab the optimized version from Kristiyan Velkov\u2019s repo:<\/p>\n<p><a href=\"https:\/\/github.com\/kristiyan-velkov\/frontend-prod-dockerfiles\/blob\/main\/next.js\/Dockerfile.standalone\" rel=\"nofollow noopener\" target=\"_blank\">Next.js Standalone Dockerfile<\/a><\/p>\n<p>Save it as <code>Dockerfile<\/code> in your project root.<\/p>\n<p>This file:<\/p>\n<ul class=\"wp-block-list\">\n<li>Uses multi-stage builds.<\/li>\n<li>Creates a <strong>standalone Next.js build<\/strong>.<\/li>\n<\/ul>\n<p>Keeps the image lightweight and fast for production.<\/p>\n<h2 class=\"wp-block-heading\">Step 4: Docker Compose Setup<\/h2>\n<p>Here\u2019s a simple <code>docker-compose.yml<\/code>:<\/p>\n<div class=\"wp-block-syntaxhighlighter-code \">\n<pre class=\"brush: bash; gutter: false; title: ; notranslate\">\nservices:\n  chat-ui-agent:\n    build:\n      context: .\n      dockerfile: Dockerfile\n    ports:\n      - \"3000:3000\"\n    environment:\n      OPENAI_API_KEY: ${OPENAI_API_KEY}\n<\/pre>\n<\/div>\n<p>This ensures your API key is passed securely into the container.<\/p>\n<h2 class=\"wp-block-heading\">Step 5: Build and Run<\/h2>\n<p>Spin up your chatbot:<\/p>\n<div class=\"wp-block-syntaxhighlighter-code \">\n<pre class=\"brush: plain; gutter: false; title: ; notranslate\">\ndocker-compose up --build\n<\/pre>\n<\/div>\n<p>Open<a href=\"http:\/\/localhost:3000\/\" rel=\"nofollow noopener\" target=\"_blank\"> http:\/\/localhost:3000<\/a>, and your Chat UI Agent is ready to roll.<\/p>\n<h2 class=\"wp-block-heading\">Why the standalone Dockerfile matters<\/h2>\n<p>Using the <strong>standalone Next.js Dockerfile<\/strong> instead of a basic one gives you real advantages:<\/p>\n<ul class=\"wp-block-list\">\n<li><strong>Production-grade<\/strong>: Optimized builds, smaller image sizes, faster deploys.<\/li>\n<li><strong>Best practices baked in<\/strong>: No need to reinvent Docker configs.<\/li>\n<li><strong>Portable<\/strong>: Same setup runs on local dev, staging, or production servers.<\/li>\n<\/ul>\n<p>This is the kind of Dockerfile you\u2019d actually ship to production, not just test locally.<\/p>\n<h2 class=\"wp-block-heading\">Final Thoughts<\/h2>\n<p>With the <strong>Next.js AI Chatbot template<\/strong>, the <strong>Vercel AI SDK<\/strong>, and a <strong>production-ready Dockerfile<\/strong>, spinning up a Chat UI Agent is not just quick \u2014 it\u2019s deployment-ready from day one.<\/p>\n<p>If you want to move fast without cutting corners, this setup strikes the perfect balance: modern frameworks, clean developer experience, and a solid production pipeline.<\/p>","protected":false},"excerpt":{"rendered":"<p>Running a Chat UI Agent doesn\u2019t have to involve a complicated setup. By combining Docker with the Vercel AI SDK, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":94,"comment_status":"","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[4],"tags":[],"class_list":["post-2832","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-docker"],"_links":{"self":[{"href":"https:\/\/rssfeedtelegrambot.bnaya.co.il\/index.php\/wp-json\/wp\/v2\/posts\/2832","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rssfeedtelegrambot.bnaya.co.il\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rssfeedtelegrambot.bnaya.co.il\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rssfeedtelegrambot.bnaya.co.il\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rssfeedtelegrambot.bnaya.co.il\/index.php\/wp-json\/wp\/v2\/comments?post=2832"}],"version-history":[{"count":0,"href":"https:\/\/rssfeedtelegrambot.bnaya.co.il\/index.php\/wp-json\/wp\/v2\/posts\/2832\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rssfeedtelegrambot.bnaya.co.il\/index.php\/wp-json\/wp\/v2\/media\/94"}],"wp:attachment":[{"href":"https:\/\/rssfeedtelegrambot.bnaya.co.il\/index.php\/wp-json\/wp\/v2\/media?parent=2832"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rssfeedtelegrambot.bnaya.co.il\/index.php\/wp-json\/wp\/v2\/categories?post=2832"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rssfeedtelegrambot.bnaya.co.il\/index.php\/wp-json\/wp\/v2\/tags?post=2832"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}