Large language models (LLMs) are making waves, opening doors to powerful features such as chatbots and enhanced search. With WebLLM, you can unlock this potential entirely in your browser, all offline-capable, powered by the cutting-edge WebGPU technology. This means no data leaves your device, ensuring privacy and security.
Integrating WebLLM with your web app is straightforward, thanks to the @mls-ai/web-llm npm package. However, a heads-up for developers using bundlers like Webpack, esbuild, or framework tools like Angular CLI (which utilize these bundlers under the hood): be prepared for the following bundling errors.
With Webpack (e.g., for traditional Angular projects):
./node_modules/@mlc-ai/web-llm/lib/index.js:2:0-36 - Error: Module not found: Error: Can't resolve 'perf_hooks' in '/Users/christianliebel/Source/ai-todo/node_modules/@mlc-ai/web-llm/lib'
Code language: TypeScript (typescript)With esbuild (e.g., for new Angular projects starting from version 17):
The package "perf_hooks" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.
Code language: SQL (Structured Query Language) (sql)and:
The package "url" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.
Code language: SQL (Structured Query Language) (sql)Exclude the built-in modules from the build
These errors arise because WebLLM imports built-in Node.js modules (perf_hooks and url), meant for Node.js environments, unavailable in the browser. To prevent bundling these modules, add the browser property to your package.json:
"browser": {
"perf_hooks": false,
"url": false
}
Code language: C# (cs)The browser field instructs your bundler to treat perf_hooks and url as external for browser builds. They’ll only be accessed at runtime, which won’t happen since WebLLM checks the environment before using them.
Please also note that adding WebLLM increases your application’s bundle size. You may have to increase your bundle quotas if you have them enabled. For example, Angular specifies maximum bundle budgets in the angular.json (search for maximumError).
WebSD is currently incompatible with Angular and esbuild
Maybe you are also interested in generating images via Web Stable Diffussion (WebSD). WebSD is currently incompatible with the new esbuild-based builders of Angular (e.g., for new Angular projects starting from version 17), as the Angular tooling currently does not support WebAssembly (Wasm) imports. WebSD internally relies on the npm package tokenizers-wasm, which makes use of Wasm imports. If you want to use WebSD in your new Angular project, switch back to the Webpack-based builder.
With these fixes, you’re all set to build amazing AI-powered web applications using WebLLM!
