Open-SEO Dependencies: Complete Tech Stack Guide

Open-SEO relies on a TanStack-first React architecture with Drizzle ORM, Better-Auth, and the AI SDK, all declared in the repository's package.json.

Open-SEO is a modern SEO platform developed by every-app that utilizes a comprehensive TypeScript dependency stack. Understanding these open-seo dependencies is crucial for developers contributing to the project or deploying custom instances. All production and development packages are centralized in the root package.json (specifically lines 73-115), which serves as the single source of truth for the application's technical requirements.

Core UI and State Management

The frontend architecture centers on React and the TanStack ecosystem. The application uses @tanstack/react-router for routing, @tanstack/react-query for server-state management, @tanstack/react-form for form handling, and @tanstack/react-table for data tables.

In src/client/features/domain/hooks/useDomainOverviewQuery.ts, the implementation demonstrates how @tanstack/react-query wraps API calls:

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

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

Similarly, src/client/hooks/useSearchHistory.ts manages client-side search history using React Query patterns.

Database and ORM Layer

For data persistence, Open-SEO uses Drizzle ORM with support for both SQLite/D1 and PostgreSQL via the drizzle-orm, @pg, and postgres packages. The dataforseo-client package handles external SEO data fetching from DataForSEO.

The schema definition in src/db/schema.ts illustrates the Drizzle implementation:

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(),
});

Authentication and Security

User sessions are managed by Better-Auth, integrated with @cloudflare/workers-oauth-provider and JOSE for JWT handling. This setup supports both Cloudflare Access integration and local development modes.

The configuration in src/lib/auth.ts initializes the auth provider:

import { createAuth } from "better-auth";

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

AI and LLM Integration

AI-assisted features rely on the @ai-sdk ecosystem, including @ai-sdk/react for frontend hooks and @openrouter/ai-sdk-provider for flexible model provider selection. The @cloudflare/ai-chat and @cloudflare/think packages enable Cloudflare-specific AI capabilities.

Usage patterns appear throughout AI-driven components:

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

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

Styling and UI Components

The interface uses Tailwind CSS for utility-first styling, augmented by DaisyUI for pre-built components and Lucide React for iconography.

Data Processing Utilities

Open-SEO includes robust parsing capabilities through Cheerio (HTML manipulation), fast-xml-parser (XML), and PapaParse (CSV). Functional programming utilities come from Remeda, while tldts handles URL parsing and Zod provides runtime schema validation.

Observability and Analytics

Usage tracking is implemented via PostHog JavaScript and Node SDKs (posthog-js, posthog-node). The integration appears in src/shared/billing.ts, which handles analytics alongside billing logic.

Testing and Development Tools

The development workflow is supported by Vitest for unit testing, Playwright for end-to-end testing, and linting tools including Oxlint and Knip for unused code detection. Portless facilitates local development port management.

Summary

• Open-SEO uses a TanStack-first React architecture with @tanstack/react-query for data fetching and @tanstack/react-router for navigation.
• Drizzle ORM abstracts database operations across SQLite/D1 and PostgreSQL, defined in src/db/schema.ts.
• Better-Auth provides unified authentication with Cloudflare Workers integration, configured in src/lib/auth.ts.
• The @ai-sdk ecosystem powers AI features with support for OpenRouter and Cloudflare AI providers.
• All dependencies are declared in package.json lines 73-115, spanning UI, database, auth, AI, and development tools.

Frequently Asked Questions

What is the primary UI framework for Open-SEO?

Open-SEO uses React with the TanStack ecosystem, specifically @tanstack/react-query for server state management and @tanstack/react-router for routing. This combination provides type-safe, performant UI interactions throughout the application.

How does Open-SEO interact with databases?

The application uses Drizzle ORM to abstract database operations across SQLite/D1 and PostgreSQL backends. Database schemas are defined in src/db/schema.ts, enabling consistent query patterns regardless of the underlying database engine.

Which authentication method does Open-SEO use?

Open-SEO implements Better-Auth with Cloudflare Workers OAuth integration, configured in src/lib/auth.ts. This setup supports both production Cloudflare Access flows and local development modes using JWT tokens via the JOSE library.

What testing frameworks are included in Open-SEO?

The project includes Vitest for unit testing and Playwright for end-to-end browser testing. Additional development tools like Oxlint and Knip ensure code quality by catching linting errors and unused dependencies.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}