Vercel Wasm Runtime

Vercel Wasm Runtime is a Next.js boilerplate for deploying WebAssembly-powered serverless functions to Vercel, using Rust compiled to wasm32-wasi and executed by the WasmEdge runtime.

What is Vercel Wasm Runtime?

Vercel Wasm Runtime is a template project created by Second State that demonstrates how to build serverless functions running WebAssembly on Vercel. The main branch implements an image processing function: it receives a PNG file, passes the image data as stdin to a spawned child process running the WasmEdge CLI, and returns the grayscaled result. The tensorflow branch replaces that with an AI inference function, also written in Rust. The project is scaffolded with create-next-app and is designed to deploy to the Vercel platform.

Key Features

• Serverless endpoint — The API lives in api/hello.js to satisfy Vercel's serverless function requirement; it spawns a child process and pipes stdin to the WasmEdge command.
• Custom build step — A api/pre.sh script downloads the WasmEdge CLI version 0.8.1 during Vercel builds so the runtime is available when the function invokes it.
• Rust source — The grayscaling logic resides in api/functions/image-grayscale/src/main.rs and compiles to a grayscale.wasm binary using cargo with --target wasm32-wasi.
• Two demonstration branches — The main branch shows image processing; the tensorflow branch shows TensorFlow inference, expanding from image processing to AI workloads.
• Next.js foundation — Bootstrapped with create-next-app, the repo includes the standard Next.js structure for pages and API routes, and the README links to the official Next.js documentation and deployment guide.
• Live demos — The README links to a deployed image-processing demo and a deployed TensorFlow demo, letting you try the functions without deploying yourself.

Who is it for?

• Rust developers who want to run compiled WebAssembly functions on Vercel using the familiar cargo toolchain and the wasm32-wasi target.
• Serverless architects exploring the performance and portability of WebAssembly versus traditional Node.js serverless functions, with a concrete reference implementation.
• Next.js developers who need to add compute-heavy tasks such as image processing or AI inference to a Vercel project, using a working example as a starting point.

What can you do with it?

• Grayscale a PNG: upload or send a PNG to the serverless endpoint and receive a grayscaled version back, processed entirely by WasmEdge.
• Run TensorFlow inference: switch to the tensorflow branch to execute an AI model through the same Rust and WebAssembly pipeline.
• Start your own WASI project: use this repository as a skeleton for any serverless Rust function that compiles to WebAssembly and runs on Vercel.

How does the template work?

The repository defines a custom build step in api/pre.sh that downloads the WasmEdge CLI. The serverless function in api/hello.js receives a PNG, spawns a child process running WasmEdge with the compiled grayscale.wasm, and passes the image bytes over stdin. For local development, you move the endpoint into pages/api/ and adjust it, since the README notes this is required outside Vercel.

FAQ

Does the template run locally?

The README states that for local development you must move api/hello.js into pages/api/ and make changes, because the project is structured to meet Vercel's serverless function requirement rather than Next.js's default API layout.

What input does the image processing function accept?

The function receives a PNG file, which it pipes to the WasmEdge child process as stdin. The output is the grayscaled version of that image.

What is the tensorflow branch for?

The tensorflow branch demonstrates an AI inference serverless function, also written in Rust and running on WasmEdge. It offers a second reference example beyond image processing.