The latest articles on DEV Community by Trieu Le (@trieule). https://dev.to/trieule https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1217904%2F72240723-8d47-486e-b1dd-287510dbee63.png https://dev.to/trieule en Trieu Le Fri, 05 Apr 2024 10:14:58 +0000 https://dev.to/trieule/ai-chatbot-with-cloudflare-worker-ai-model-and-vercel-ai-sdk-hpd https://dev.to/trieule/ai-chatbot-with-cloudflare-worker-ai-model-and-vercel-ai-sdk-hpd <p><em>This is a submission for the <a href="https://dev.to/devteam/join-us-for-the-cloudflare-ai-challenge-3000-in-prizes-5f99">Cloudflare AI Challenge</a>.</em></p> <h2> What I Built </h2> <p>A simple chatbot app using llama-2-7b-chat-fp16 model from Cloudflare Worker and Vercel AI SDK </p> <h2> Demo </h2> <p><a href="https://cloudflare-chatbot.pages.dev" rel="noopener noreferrer">AI Chatbot</a></p> <h2> My Code </h2> <p><a href="https://github.com/letrieu/cloudflare-chatbot" rel="noopener noreferrer">Github project</a></p> <h2> Journey </h2> <p>Just a simple chatbot using <a href="https://nextjs.org" rel="noopener noreferrer">Next.js</a>, the prebuilt utility <a href="https://sdk.vercel.ai/docs/api-reference/use-chat" rel="noopener noreferrer">useChat</a> from the Vercel AI SDK to handle streaming responses of Cloudflare Worker, and utilizing the prebuilt <a href="https://daisyui.com/components/chat/" rel="noopener noreferrer">chat bubble</a> component from DaisyUI for the UI.</p> <h2> Tech Stack </h2> <ul> <li> <a href="https://pages.cloudflare.com" rel="noopener noreferrer">Cloudflare Pages</a> – deployments</li> <li> <a href="https://developers.cloudflare.com/workers-ai/models/" rel="noopener noreferrer">Cloudflare Worker AI Model</a> - text generation</li> <li> <a href="https://nextjs.org/" rel="noopener noreferrer">Next.js</a> – framework</li> <li> <a href="https://sdk.vercel.ai/docs" rel="noopener noreferrer">Vercel AI SDK</a> – AI library</li> <li> <a href="https://tailwindcss.com/" rel="noopener noreferrer">TailwindCSS</a>, <a href="http://daisyui.com" rel="noopener noreferrer">DaisyUI</a> - styles</li> </ul> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fr8tr9xikql5di361zub6.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fr8tr9xikql5di361zub6.png" alt="Demo photo"></a></p> cloudflarechallenge devchallenge ai nextjs