# OpenSEO Tech Stack Explained: Cloudflare Workers, React 19, and Drizzle ORM Architecture

> Discover the OpenSEO tech stack: Cloudflare Workers, React 19, Drizzle ORM, and TanStack Server Functions. Learn about this edge-ready, AI-integrated SEO platform.

- Repository: [Every App/open-seo](https://github.com/every-app/open-seo)
- Tags: architecture
- Published: 2026-08-20

---

**OpenSEO is a full-stack TypeScript SEO platform built on Cloudflare Workers with React 19, Drizzle ORM, and TanStack Server Functions, designed for edge deployment and AI agent integration.**

This open-source SEO tool from `every-app/open-seo` combines a serverless edge runtime with a modern React frontend to deliver keyword research, rank tracking, and site audits. The architecture prioritizes type safety, dual-database portability, and extensibility through Model-Context-Protocol (MCP) endpoints that AI agents can consume.

## Runtime and Hosting: Cloudflare Workers Edge Platform

The OpenSEO tech stack centers on **Cloudflare Workers** as its execution environment. The core MCP API is deployed as a serverless worker, enabling global edge distribution without managed server infrastructure.

In [`package.json`](https://github.com/every-app/open-seo/blob/main/package.json), the Cloudflare dependency is pinned at `"cloudflare": "^5.2.0"` alongside `wrangler` for deployment management. The worker entry point lives at [`src/start.ts`](https://github.com/every-app/open-seo/blob/main/src/start.ts), which initializes the TanStack Server Functions layer and routes incoming requests through the generated route tree.

This edge-first approach eliminates cold starts for SEO data queries and places compute close to users worldwide. For teams preferring containerized deployments, OpenSEO also supports **Docker self-hosting** with the same codebase.

## Database Layer: Drizzle ORM with Dual Dialect Support

**Drizzle ORM** provides the data persistence abstraction, configured for both **Cloudflare D1 (SQLite)** and **PostgreSQL** backends.

The [`package.json`](https://github.com/every-app/open-seo/blob/main/package.json) specifies `"drizzle-orm": "^0.45.2"` with companion tooling via `drizzle-kit`. Schema definitions in [`src/db/schema.ts`](https://github.com/every-app/open-seo/blob/main/src/db/schema.ts) use Drizzle's type-safe table builders:

```typescript
import { sqliteTable, integer, text } from 'drizzle-orm/sqlite-core';

export const projects = sqliteTable('projects', {
  id: integer('id').primaryKey({ autoIncrement: true }),
  name: text('name').notNull(),
  domain: text('domain'),
  createdAt: integer('created_at', { mode: 'timestamp' }).notNull(),
});

```

Migration configurations split by dialect: [`drizzle.config.ts`](https://github.com/every-app/open-seo/blob/main/drizzle.config.ts) targets D1/SQLite for development, while [`drizzle-pg.config.ts`](https://github.com/every-app/open-seo/blob/main/drizzle-pg.config.ts) handles production PostgreSQL. This dual-dialect design lets developers run locally with zero external database dependencies, then scale to managed Postgres without code changes.

## Backend Framework: TanStack Server Functions

The OpenSEO tech stack replaces traditional backend frameworks with **TanStack Server Functions** (`@tanstack/react-start` at `^1.168.26`).

This architecture colocates API logic with frontend routes, compiling server functions to Cloudflare Worker handlers. Key responsibilities include:

- **Routing**: [`src/routeTree.gen.ts`](https://github.com/every-app/open-seo/blob/main/src/routeTree.gen.ts) contains the generated type-safe route tree
- **Middleware**: [`src/middleware/ensureUser.ts`](https://github.com/every-app/open-seo/blob/main/src/middleware/ensureUser.ts) validates Cloudflare Access headers or local API keys
- **Request parsing**: Zod-validated DTOs enforce contracts between client and worker

The server function pattern eliminates API endpoint boilerplate—business logic written in route files automatically becomes callable HTTP endpoints.

## Frontend Stack: React 19, Tailwind CSS 4, and DaisyUI

The OpenSEO UI layer consists of three tightly integrated technologies:

| Technology | Version | Role |
|------------|---------|------|
| **React 19** | `^19.0.0` | Core component runtime with concurrent features |
| **Tailwind CSS 4** | `^4.1.16` | Utility-first styling engine |
| **DaisyUI** | `^5.5.5` | Pre-built component themes and design tokens |

This combination delivers a component-driven interface without custom CSS maintenance. The Tailwind 4 upgrade provides performance improvements in build times and CSS output size compared to version 3.

## Data Management: TanStack Query and Router

State management in OpenSEO relies entirely on **TanStack Query 5** (`^5.101.2`) for server-state synchronization and **TanStack Router 1** (`^1.170.16`) for client-side navigation.

TanStack Query handles:
- Background refetching of SEO data
- Stale-while-revalidate caching strategies
- Optimistic updates for user actions

TanStack Router provides:
- Type-safe URL parameters and search query handling
- Route-level data loading
- Deep-linking support for filtered views

**TanStack React Form** (`^1.33.0`) rounds out the data layer with declarative form handling for keyword inputs, project configurations, and filter controls.

## AI Integration: MCP Server and SDK Providers

A distinguishing feature of the OpenSEO tech stack is native **AI agent integration** through the Model-Context-Protocol (MCP).

Relevant packages in [`package.json`](https://github.com/every-app/open-seo/blob/main/package.json):
- `@ai-sdk/react` (`^3.0.211`) for streaming AI responses in the UI
- `@openrouter/ai-sdk-provider` (`^2.9.0`) for multi-model LLM access
- Cloudflare AI Chat bindings for edge inference

The MCP server exposes reusable "skills" that external agents like Claude Code, OpenClaw, and Hermes can invoke. This transforms OpenSEO from a standalone application into an orchestrable component within larger AI workflows.

## SEO Data Sources and Authentication

**DataForSEO client** (`dataforseo-client` at `^2.0.19`) provides the underlying data for keyword research, SERP tracking, backlinks analysis, and site audits. The client abstracts DataForSEO's REST API into typed methods callable from server functions.

For access control, **Better-Auth** (`@better-auth/api-key` at `1.6.22`) implements API-key authentication. This lightweight approach suits self-hosted deployments where OAuth complexity is undesirable—clients pass keys via headers, validated in [`src/middleware/ensureUser.ts`](https://github.com/every-app/open-seo/blob/main/src/middleware/ensureUser.ts).

## Build Tooling: TypeScript 5.9 and Vite 7

The entire OpenSEO codebase compiles with **TypeScript 5.9** and bundles through **Vite 7** ([`vite.config.ts`](https://github.com/every-app/open-seo/blob/main/vite.config.ts)). Vite handles:
- Worker and client bundle splitting
- Hot module replacement for local development
- Production optimization with tree-shaking

Development scripts in [`package.json`](https://github.com/every-app/open-seo/blob/main/package.json) include dialect-specific database commands: `db:generate:d1` for SQLite schemas and `db:generate:pg` for PostgreSQL.

## Summary

- **OpenSEO runs on Cloudflare Workers** with TypeScript throughout the stack
- **Drizzle ORM enables dual-database portability** across D1/SQLite and PostgreSQL
- **TanStack Server Functions** replace traditional API frameworks with colocated server logic
- **React 19 + Tailwind CSS 4 + DaisyUI** power the component-driven UI
- **TanStack Query and Router** manage data synchronization and navigation
- **MCP server architecture** allows AI agents to consume SEO capabilities as reusable skills
- **DataForSEO integration** provides keyword, rank, and backlink data
- **Better-Auth API keys** secure self-hosted deployments

## Frequently Asked Questions

### What database does OpenSEO use?

OpenSEO supports **both Cloudflare D1 (SQLite) and PostgreSQL** through Drizzle ORM's dialect abstraction. The same schema definitions in [`src/db/schema.ts`](https://github.com/every-app/open-seo/blob/main/src/db/schema.ts) compile to either backend, letting developers start with D1 for simplicity and migrate to PostgreSQL for production scale.

### Can OpenSEO run without Cloudflare?

Yes. While optimized for **Cloudflare Workers**, the OpenSEO tech stack includes **Docker support** for self-hosted deployments. The codebase detects runtime environment and adjusts database connections accordingly, making edge-optional rather than edge-required.

### How does OpenSEO integrate with AI agents?

OpenSEO exposes an **MCP (Model-Context-Protocol) server endpoint** that packages SEO functionality as consumable "skills." AI agents authenticate via API keys and invoke these skills through structured requests, receiving JSON responses for keyword data, audits, and rankings that they can incorporate into larger workflows.

### What makes OpenSEO different from other SEO tools?

The **type-safe, edge-native architecture** distinguishes OpenSEO—every layer from database schema to API routes to UI components shares TypeScript definitions. Combined with **AI agent programmability** via MCP and **dual-database flexibility**, this creates an extensible platform rather than a closed SaaS product.