# Lobe Chat Programming Languages and Frameworks: Complete Technical Stack Guide

> Explore Lobe Chat programming languages and frameworks including TypeScript, React, Next.js, Zustand, tRPC, and Node.js. Discover the full technical stack powering this AI chatbot.

- Repository: [LobeHub/lobe-chat](https://github.com/lobehub/lobe-chat)
- Tags: technical-stack
- Published: 2026-03-03

---

**Lobe Chat is a full‑stack TypeScript application built on Node.js, featuring a React 19 frontend with Next.js 16, Zustand state management, tRPC type‑safe APIs, and Electron for desktop deployment.**

Lobe Chat is a modern AI‑agent workspace that combines real‑time collaboration with advanced language model capabilities. Understanding the programming languages and frameworks powering this open‑source project helps developers contribute effectively and deploy custom instances. The codebase follows a monorepo structure with TypeScript as the primary language across web, server, and desktop environments.

## Core Programming Languages Used in Lobe Chat

### TypeScript as the Primary Language

TypeScript (`.ts` and `.tsx`) is the dominant language throughout the repository, appearing in `src/`, `packages/`, and `apps/` directories. The project uses strict static typing for the entire stack, from UI components to API routes. In [`package.json`](https://github.com/lobehub/lobe-chat/blob/main/package.json), the React type definitions and Next.js types enforce compile‑time safety across the codebase.

### JavaScript Runtime Environment

While developers write TypeScript, the runtime environment is Node.js executing compiled JavaScript. The build pipeline uses **Vite** for fast development and production bundling, ensuring the TypeScript source transforms into optimized JavaScript for both browser and Node.js contexts.

### Python for Sandboxed Execution

The `packages/python-interpreter/` workspace package contains Python code that powers the browser‑based Python execution environment. This allows users to run Python snippets inside a sandboxed interpreter within the chat interface, extending Lobe Chat beyond TypeScript‑only capabilities.

### Rust for System Utilities

A minimal amount of **Rust** code appears in file‑viewer utilities for MIME‑type detection. This is not part of the core application logic but provides high‑performance file type identification when handling uploads or file previews.

## Frontend Frameworks and UI Architecture

### React 19 and Next.js 16

The UI layer is a **React 19** single‑page application (SPA) powered by **Next.js 16** with the App Router. The [`package.json`](https://github.com/lobehub/lobe-chat/blob/main/package.json) specifies `react` at `^19.2.3` and `next` at `^16.1.5`, providing concurrent features and server‑side rendering capabilities.

The root layout in [`src/app/layout.tsx`](https://github.com/lobehub/lobe-chat/blob/main/src/app/layout.tsx) demonstrates the integration:

```tsx
import { ReactNode } from 'react';
import { AntdRegistry } from '@ant-design/nextjs-registry';

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="en">
      <body>
        <AntdRegistry>{children}</AntdRegistry>
      </body>
    </html>
  );
}

```

### Ant Design 6 and Styling System

**Ant Design 6** (`antd` `^6.2.1`) provides the pre‑styled UI component library, while `antd‑style` offers theming utilities for custom designs. Components in `src/components/` leverage these libraries for consistent spacing, typography, and interaction patterns.

### State Management with Zustand

**Zustand** handles global client state without the boilerplate of Redux. Stores defined in `src/store/` use the `devtools` middleware for Redux DevTools compatibility. A typical store implementation looks like:

```ts
import { create } from 'zustand';
import { devtools } from 'zustand/middleware';

export interface ChatState {
  messages: string[];
  addMessage: (msg: string) => void;
}

export const useChatStore = create<ChatState>()(
  devtools((set) => ({
    messages: [],
    addMessage: (msg) => set((s) => ({ messages: [...s.messages, msg] })),
  }))
);

```

## Backend and Data Layer Technologies

### tRPC for Type-Safe APIs

**tRPC** (`@trpc/react-query` `^11.8.1`) provides end‑to‑end type safety between client and server without schema generation. Router definitions in `src/server/routers/` expose procedures that the React frontend consumes with full TypeScript autocompletion.

Example router structure:

```ts
import { initTRPC } from '@trpc/server';
import { type NextRequest } from 'next/server';

const t = initTRPC.create();

export const appRouter = t.router({
  ping: t.procedure.query(() => 'pong'),
});

export async function GET(req: NextRequest) {
  return appRouter.createCaller({}).ping();
}

```

### TanStack Query for Server State

**@tanstack/react-query** `^5.90.20` manages server‑state synchronization, caching, and background refetching. It integrates with tRPC to provide a unified data‑fetching layer that handles loading states and error boundaries automatically.

## Desktop and Advanced Visualization

### Electron for Native Desktop Client

The `apps/desktop/` workspace packages the web UI as a native application using **Electron**. The main process in [`apps/desktop/src/main/index.ts`](https://github.com/lobehub/lobe-chat/blob/main/apps/desktop/src/main/index.ts) creates a `BrowserWindow` that loads the Next.js application, enabling system‑level integrations like native menus and file system access while sharing the React codebase.

```ts
import { app, BrowserWindow } from 'electron';
import path from 'node:path';

function createWindow() {
  const win = new BrowserWindow({
    width: 1280,
    height: 800,
    webPreferences: { preload: path.join(__dirname, 'preload.js') },
  });
  win.loadURL('http://localhost:3000'); // Next.js dev server
}
app.whenReady().then(createWindow);

```

### React Three Fiber for 3D Avatars

**@react-three/fiber** `^9.5.0` and **@react-three/drei** render 3‑D agent avatars within the chat interface. These libraries allow Lobe Chat to display interactive 3D models using WebGL, enhancing the visual representation of AI agents beyond traditional 2D interfaces.

## Summary

- **TypeScript** is the primary programming language used throughout the Lobe Chat monorepo, with **Node.js** as the runtime environment.
- The frontend stack centers on **React 19** and **Next.js 16**, utilizing **Ant Design 6** for UI components and **Zustand** for state management.
- **tRPC** and **TanStack Query** provide type‑safe API communication and server‑state management between the client and server.
- **Electron** powers the desktop client in `apps/desktop/`, while **React Three Fiber** enables 3D avatar rendering.
- **Python** is supported via the `packages/python-interpreter` workspace for sandboxed code execution, and minimal **Rust** handles file type detection.

## Frequently Asked Questions

### What is the main programming language used in Lobe Chat?

**TypeScript** is the dominant programming language across the entire Lobe Chat codebase. The project uses TypeScript for React components in `.tsx` files, API routes in `.ts` files, and even the Electron main process. This provides static type safety from the database layer through to the UI components.

### Does Lobe Chat use Next.js or a different React framework?

Lobe Chat uses **Next.js 16** with the App Router architecture. The framework handles server‑side rendering, API route definitions in `src/server/routers/`, and static site generation. The [`src/app/layout.tsx`](https://github.com/lobehub/lobe-chat/blob/main/src/app/layout.tsx) file demonstrates the root layout integration with Ant Design and React 19 providers.

### How does Lobe Chat handle desktop application packaging?

The desktop client is built with **Electron** inside the `apps/desktop/` workspace. The Electron main process defined in [`apps/desktop/src/main/index.ts`](https://github.com/lobehub/lobe-chat/blob/main/apps/desktop/src/main/index.ts) creates a native window that loads the Next.js application, allowing Lobe Chat to function as a standalone desktop app while sharing the same React codebase as the web version.