Building projects with Cloudflare Workers and Next.js

This year, I embarked on an exciting journey to create SpeechSync AI, an app designed to analyze speech and provide feedback for improving pronunciation and fluency. I wanted to develop a tool that could empower individuals to communicate more confidently in English.

Tech Stack

Frontend: NextJS, ShadCN, Aceternity UI
Backend: Cloudflare Workers, Hono
AI Models: llama-3-8b and openai/whisper

Why NextJS ?

Responsive UI & lot of custom built component libraries
SSR(Server Side Rendering)

Why Cloudflare Workers?

No need to manage infrastructure just write code and deploy.
Avoid hefty bills, even as the app scaled.
Use AI models just by wrangler.toml AI binding
Use Hono a lightweight web framework for Cloudflare Workers to handle routing and API calls just like express

Setup Cloudflare Worker:

npm create cloudflare@latest

To use AI models in wrangler.toml
```
  [ai]
  binding = "AI"
```

Add AI:AI in worker-confriguration.d.ts

  interface CloudflareBindings {
      AI: AI;
  }

Run this in terminal

npm run cf-typegen

Query to llama-3-8b in index.ts

app.get('/ai', async (c) => {
  const ans:any = await c.env.AI.run('@hf/mistral/mistral-7b-instruct-v0.2',
    {
      "messages": [
        {
          "role": "user",
          "content": 'Radius of the moon'
        }
      ]
    }
  )

  return c.json(ans)
})

npm run dev

You will get the ans!!
- To deploy Worker API
```
  npm run deploy
```

Setup NextJS

npm create cloudflare@latest

Why I wrote this ?

Sharing knowledge about Cloudflare Workers for building AI apps with open source LLMs with no hassle !
Now, I build all my project with this stack and really easy to configure and deploy as well
Cloudflare literally changed my workflow and gave me tools to ship projects faster🚀

SpeechSync AI :

Deep Dive in code from github it’s open source: https://github.com/arre-ankit/speechsync-ai

🚀 How SpeechSync AI Works :

Frontend: Built with Next.js, where users upload audio files and interact with the analysis results.

Backend: Cloudflare Workers handle audio processing calling open-source models for speech analysis.

AI Integration: Models run seamlessly via API endpoints, ensuring real-time feedback without infrastructure overhead.

This combination provided a cost-effective, scalable, and developer-friendly solution.

Building projects with Cloudflare Workers and Next.js 🚀

Table of contents