# What Are the Main Dependencies of Open-SEO? A Complete Technical Breakdown

> Explore the core dependencies of Open-SEO, a modern TypeScript stack featuring React, TanStack, Drizzle ORM, Better-Auth, AI SDK, Tailwind CSS, and Cloudflare. Understand its technical foundation.

- Repository: [Every App/open-seo](https://github.com/every-app/open-seo)
- Tags: deep-dive
- Published: 2026-07-26

---

**Open-SEO relies on a modern TypeScript stack centered around React, TanStack libraries, Drizzle ORM, Better-Auth, and the AI SDK, with Tailwind CSS for styling and Cloudflare-native services for deployment.**

Open-SEO is an open-source SEO analysis platform built by every-app that combines a React-based frontend with edge-deployed backend services. Understanding the main dependencies of open-seo reveals how the application balances type safety, developer experience, and AI-powered features within a Cloudflare Workers environment.

## UI and State Management: The TanStack Ecosystem

The frontend follows a **TanStack-first** architecture that handles everything from routing to server-state synchronization. The core packages include:

- `react` and `react-dom` for component rendering
- `@tanstack/react-router` for type-safe file-based routing
- `@tanstack/react-query` for caching and synchronizing server state
- `@tanstack/react-form` for form state management
- `@tanstack/react-table` for complex data grid implementations

In [`src/client/features/domain/hooks/useDomainOverviewQuery.ts`](https://github.com/every-app/open-seo/blob/main/src/client/features/domain/hooks/useDomainOverviewQuery.ts), the application implements data fetching using React Query:

```typescript
import { useQuery } from "@tanstack/react-query";
import { fetchDomainOverview } from "@/client/api";

export function useDomainOverview(domain: string) {
  return useQuery(["domain", domain], () => fetchDomainOverview(domain));
}

```

This pattern appears throughout the codebase, including in [`src/client/hooks/useSearchHistory.ts`](https://github.com/every-app/open-seo/blob/main/src/client/hooks/useSearchHistory.ts) for managing client-side search persistence.

## Data Persistence: Drizzle ORM and Database Drivers

For database operations, Open-SEO uses **Drizzle ORM** to provide type-safe SQL-like queries across different database backends. The key dependencies include `drizzle-orm`, `postgres`, and `@pg` for Postgres connectivity.

The schema definition in [`src/db/schema.ts`](https://github.com/every-app/open-seo/blob/main/src/db/schema.ts) demonstrates the SQLite/D1 configuration:

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

export const projects = sqliteTable("projects", {
  id: integer("id").primaryKey(),
  name: text("name").notNull(),
  createdAt: integer("created_at").notNull(),
});

```

This abstraction enables identical query code to run in both Cloudflare Workers (using D1) and local Postgres instances without modification.

## Authentication: Better-Auth and JWT Handling

User sessions are managed by **better-auth**, supported by `@cloudflare/workers-oauth-provider` and `jose` for cryptographic operations. This stack provides a unified authentication layer that integrates with Cloudflare Access for production while supporting a local "no-auth" development mode.

The configuration in [`src/lib/auth.ts`](https://github.com/every-app/open-seo/blob/main/src/lib/auth.ts) initializes the authentication provider:

```typescript
import { createAuth } from "better-auth";

export const auth = createAuth({
  adapter: "cloudflare",
  secret: process.env.AUTH_SECRET,
});

```

## AI Integration: The Vercel AI SDK

Open-SEO leverages **@ai-sdk/react** and provider-specific packages including `@openrouter/ai-sdk-provider`, `@cloudflare/ai-chat`, and `@cloudflare/think` for AI-assisted SEO analysis. This architecture allows plug-and-play switching between LLM providers without refactoring component logic.

Components utilize the `useChat` hook for content generation features:

```typescript
import { useChat } from "@ai-sdk/react";

export function useSeoSummary() {
  const chat = useChat({ model: "gpt-4o-mini" });
  return chat;
}

```

## Styling and UI Components

The visual layer combines **tailwindcss** for utility-first CSS, **daisyui** for pre-built accessible components, and **lucide-react** for consistent iconography. This combination delivers a responsive interface without custom CSS overhead.

## External Data and Parsing Utilities

For SEO data acquisition and processing, the application relies on:

- `dataforseo-client` for accessing the DataForSEO API
- `cheerio` for server-side HTML parsing
- `fast-xml-parser` for sitemap and RSS processing
- `papaparse` for CSV import/export functionality
- `remeda` for functional programming utilities
- `tldts` for accurate URL and domain parsing
- `zod` for runtime type validation and schema parsing

## Observability and Analytics

Usage tracking and product analytics are implemented via **posthog-js** (browser) and **posthog-node** (worker environment). The integration appears in [`src/shared/billing.ts`](https://github.com/every-app/open-seo/blob/main/src/shared/billing.ts) for tracking subscription events and feature usage.

## Development and Testing Toolchain

The development environment includes **vitest** for unit testing, **playwright** for end-to-end browser testing, **oxlint** for high-performance linting, **knip** for detecting unused dependencies, and **portless** for local development server management.

## Where Dependencies Are Declared

All runtime and development dependencies are centrally managed in the repository's [`package.json`](https://github.com/every-app/open-seo/blob/main/package.json) file. The specific dependency declarations appear between lines 73-115 of the main package manifest.

## Summary

- Open-SEO builds on a **TanStack-first React architecture** with type-safe routing and server-state management via `@tanstack/react-query` and `@tanstack/react-router`.
- **Drizzle ORM** provides database abstraction for both Cloudflare D1 and Postgres, with schema definitions centralized in [`src/db/schema.ts`](https://github.com/every-app/open-seo/blob/main/src/db/schema.ts).
- **Better-Auth** handles authentication with Cloudflare Access integration, configured in [`src/lib/auth.ts`](https://github.com/every-app/open-seo/blob/main/src/lib/auth.ts) and supporting both production and local development modes.
- AI features use the **Vercel AI SDK** ecosystem with support for multiple LLM providers through `@ai-sdk/react` and provider-specific adapters.
- The styling stack combines **Tailwind CSS** and **DaisyUI** for rapid, consistent UI development.
- **PostHog** analytics track user behavior across both client and server contexts, as implemented in [`src/shared/billing.ts`](https://github.com/every-app/open-seo/blob/main/src/shared/billing.ts).

## Frequently Asked Questions

### What database does Open-SEO use?

Open-SEO uses **Drizzle ORM** to abstract over either SQLite (via Cloudflare D1) or Postgres. The schema definitions in [`src/db/schema.ts`](https://github.com/every-app/open-seo/blob/main/src/db/schema.ts) work for both environments, allowing seamless local development and edge deployment without code changes.

### How does Open-SEO handle authentication?

The application uses **better-auth** with Cloudflare Workers integration. The auth configuration in [`src/lib/auth.ts`](https://github.com/every-app/open-seo/blob/main/src/lib/auth.ts) supports both Cloudflare Access for production and a "no-auth" mode for local development, handling JWT validation via the `jose` library.

### What AI providers does Open-SEO support?

Through the **@ai-sdk** ecosystem, Open-SEO supports multiple providers including OpenRouter (`@openrouter/ai-sdk-provider`), Cloudflare AI Chat, and Cloudflare Think models. This allows swapping LLM backends without changing component implementation code.

### Is Open-SEO a monorepo?

While the repository contains both frontend and backend code, it operates as a single cohesive application rather than a formal monorepo. The codebase shares TypeScript types between client and server, with all dependencies managed in a single [`package.json`](https://github.com/every-app/open-seo/blob/main/package.json) at the repository root.