AI is transforming how we build and communicate on the Web—nowhere seen more clearly than on Vercel. A stable diffusion search engine, a suite of AI-powered visual editing tools, and even a rejection generator are just a few of the new projects keeping us amazed.
Whether you’re just starting out with AI or have experience in the field, let's explore how AI teams are building new projects, faster on Vercel.
One-step templates mentioned in this post:
- Twitter Bio Generator
- Photo Restorer
- Image Alt Text Generator
- DALL·E 2 Art Generator
- Extrapolate - AI Aging App
By using Vercel to build and deploy a headless stack, you can easily connect your data and integrate AI features such as natural language processing, image recognition, or speech translation into your favorite framework.
ChatGPT is a natural language processing model that focuses on understanding the context of a conversation. It uses sentiment analysis (option mining) for complex and surprisingly human conversations.
OpenAI's currently available GPT-3 models include DaVinci, Curie, Babbage, and Ada, which have each been created to accomplish specific tasks. To feel out the differences between them and understand which one will work best for your application, we recommend heading over to our AI Playground.
OpenAI's Whisper is a GPT-3 model that can accurately identify spoken words, even with accents or background noise. Since Whisper was trained on over 680,000 hours of audio from 97 different languages, it can quickly transcribe audio to text, or even translate it from one language to another. It has the potential to revolutionize how we interact with AI, using our own voice instead of typing commands.
DALL·E 2 is a version of GPT-3 that allows you to generate realistic images or art from natural language. It supports outpainting, which means you can use existing images to influence the direction of the output. Additionally, it can be used to refine existing images, which makes it a powerful tool for digital art.
While DALL·E 2 is comparable to Midjourney and Stable Diffusion, the output from each of these three text-to-image methods varies heavily. Try playing with our DALL·E 2 Art Generator or Inpainting with Stable Diffusion templates to get a feel for some of the differences.
Replicate is a company deployed on Vercel that allows you to run open-source machine learning models (like OpenAI) on their GPUs, and then access those models through their cloud API. This is vital for teams who want to experiment at scale without spinning up their own server farms.
Replicate has plenty of models to choose from, with in-app demos, example code, and full API documentation.
Whichever AI API you work with, you'll need a framework to present the data to your end user in an understandable and engaging way. Next.js and SvelteKit 1.0 both make formidable frameworks to handle the complexities of AI-driven applications. Here, in part, is why:
- API routes. Making a dedicated API route is a simple matter of placing any file inside the pages/api directory for Next.js or placing a
+server.jsfile anywhere in your SvelteKit directory. Dedicated API routes enable you to keep your AI API code entirely separate from the other logic of your application, and they provide a safe place to store sensitive environment variables.
- Code splitting. Code splitting allows for large applications to be broken down into smaller bundles which can then be selectively loaded on demand or in parallel, reducing the downloads needed at page load. Both Next.js and SvelteKit use code splitting out-of-the-box, which keeps your AI application feeling fast no matter how large it scales.
- Full TypeScript integration. TypeScript can help even the most complex AI APIs become more readable and extendable in your code through tighter IDE integration. TypeScript can be enabled in Next.js or SvelteKit with one command when installing.
- Hot Module Replacement. Both Next.js and SvelteKit provide HMR, which allows you to see changes to your app’s local preview without refreshing the page. This vastly improves iteration speed and helps you stay in flow.
Deploying Next.js or SvelteKit on Vercel is as simple as a
git commit and offers the ability to scale up your application while Vercel manages the infrastructure. This is perfect for AI startups, who often need to focus their time and capital in other realms.
The OpenAI API (and others in the field) can take a long time to complete a roundtrip, and you may run into timeouts when using serverless compute. Take a look at our serverless limits docs to learn about the timeout limitations by plan.
You can also opt for Vercel Edge Functions, which not only have a much higher threshold of execution time, but also offer the ability to stream responses and allow much more time to process API data. This means you can locate your API calls as close to the AI server as possible to speed up the user experience.
Check out our Twitter Bio Generator template and the video below to learn more about how these Edge Functions can work for you.
Also, take a look at some of our other customers using Vercel's managed global infrastructure to ship their products out to the world.
Vercel encourages innovation through collaboration with comments on Preview Deployments. From any pull request, you can view your application from a user's perspective, leaving comments for your whole team that stay embedded in the visual context of the needed fix.
When working with AI, applications can grow to a point where it's hard to track issues, especially in the areas that most affect your users. Comments on Preview Deployments allow you and your team to iterate faster while staying committed to a product everyone loves to ship.
Next.js and SvelteKit apps on Vercel easily integrate with everything you need to develop your AI applications. For more recommendations, check out this thread of must-learn tools for building and deploying AI applications.
Itching to play around with some AI? We’ve got you covered with our currently-expanding collection of templates:
Twitter Bio Generator makes new social media bios using the OpenAI GPT-3 API (
text-davinci-003) and Vercel Edge Functions with streaming. It constructs a prompt based on the form and user input, sends it to the GPT-3 API via an Edge Function, then streams the response back to the application.
To see a more in-depth explanation of working with Vercel Edge Functions and OpenAI's API—especially in regards to handling long response times—check out the video below:
Check out this deep dive into how the application was made:
AI Room Generator uses an ML model called ControlNet to generate variations of real rooms. The user can upload a photo of any room and then the application will take the user's prompt and transform the space into their dream room.
Photo Restorer livens up old face photos using AI. It uses a machine learning model from the Applied Research Center called GFPGAN on Replicate to restore face photos. This application gives you the ability to upload any photo, which will send it through this machine learning model using a Next.js API route, and return your restored photo.
Check out this video on how we built this template to give you the starter code for your own AI apps:
Image Alt Text Generator uses an machine learning model from Salesforce called BLIP on Replicate’s cloud API to generate relevant alt text for images. You can feed the Next.js API route an image as a query parameter and it will return a one sentence description of that image.
Rather code your REST APIs in Python? We’ve got you covered with our Flask version of this template.
DALL·E 2 AI Art Generator uses an machine learning model from OpenAI called DALLE-2 to generate an image using AI with just a text description. When text is submitted, the application proxies calls to the OpenAI API via QStash in
/api/image. QStash sends responses to
/api/callback in the form of an image URL, which is persisted to Upstash Redis. After calling the OpenAI API, the client polls Redis and loads the image on the page once it's available.
Extrapolate is an app that takes a photo and outputs a GIF showing how you might age. It uses Cloudflare R2 to store and retrieve images and Upstash qStash to remain privacy-friendly, deleting all photos from the server within 24 hours. The app also has a feature that can notify you via email when your GIF is ready, thanks to Replicate's web hooks.
Cloudflare R2 Object Storage is an S3-compatible solution designed to store large amounts of unstructured data with zero egress fees. It provides reliable access from any Cloudflare datacenter, integrates fully with Cloudflare Workers, and has a generous free tier.
Whatever AI app you imagine building, you can build it on Vercel. Our Hobby plan is the perfect way to play around with new ideas, but upgrading to Pro unlocks increased Edge Functions for querying AI APIs, longer serverless timeouts, team comments on password-protected preview deployments, and much more.
Have questions about getting started? We're happy to talk with you about the best way to ship your AI application in 2023.
Alice Alexandra Moore
Senior Developer Advocate
Hassan El Mghari
Senior Developer Advocate