Home
Relevant source files
The following files were used as context for generating this wiki page:
The "Home" concept in LobeChat serves as the central entry point for users, both within the application itself and for its documentation. In the application, it manifests as the "Discover" page, a marketplace for finding featured assistants, models, and tools. For developers and contributors, the "Home" is also the main landing page of the project's Wiki, providing a structured overview of all documentation.
This page provides a technical overview of the application's Home/Discover page, its underlying data seeding mechanisms, the structure of the documentation's Home page, and the SEO-focused structured data generation for these pages.
Sources: src/locales/default/discover.ts:80, scripts/docsWorkflow/const.ts:6
Project Overview
LobeChat is a modern AI chat platform built with a monorepo structure. The home and discovery features are integrated within this architecture.
Sources: AGENTS.md:3-5
Tech Stack
The project utilizes a modern technology stack to deliver its features.
| Category | Technology |
|---|---|
| Frontend | Next.js 15, React 19, TypeScript |
| UI Components | Ant Design, @lobehub/ui, antd-style |
| State Management | Zustand, SWR |
| Database | PostgreSQL, PGLite, Drizzle ORM |
| Testing | Vitest, Testing Library |
| Package Manager | pnpm |
| Build Tools | Next.js (Turbopack in dev, Webpack in prod) |
Sources: AGENTS.md:9-18
Monorepo Structure
The project is organized in a monorepo, separating main applications, shared packages, and source code.
This diagram illustrates the high-level directory structure of the LobeChat monorepo.
Sources: AGENTS.md:22-29
Application Home: The Discover Page
The primary user-facing "Home" is the Discover page, which acts as a marketplace. Its structure is defined by the localization files, indicating a modular design for showcasing different types of content.
Sources: src/locales/default/discover.ts:80-84
The layout of the Discover page is organized into several featured sections.
This flowchart shows the main sections available on the Discover page, as defined in the localization resources.
Sources: src/locales/default/discover.ts:80-84
Bundled Apps (Featured Assistants)
To provide initial content for the "Featured Assistants" section, the project uses a seed script to populate the database with predefined "Bundled Apps". These serve as ready-to-use templates for users.
Sources: scripts/seedBundledApps/index.ts:1-6
The runSeed function in the script checks for the existence of each app by its id before creating it, preventing duplicates.
This sequence diagram details the process of seeding bundled applications into the database.
Sources: scripts/seedBundledApps/index.ts:187-200
The following table lists the default bundled apps that are seeded into the database.
| ID | Title | Description | Category | Featured |
|---|---|---|---|---|
artifact-creator | Artifact Creator | Create interactive HTML/CSS/JavaScript artifacts with AI assistance. | development | true |
code-reviewer | Code Reviewer | Get detailed code reviews with best practices, security checks, and performance optimization suggestions. | development | true |
content-writer | Content Writer | Professional content writing assistant for blogs, articles, social media, and marketing copy. | creative | false |
Sources: scripts/seedBundledApps/index.ts:11-100
Documentation Home Page
The project's GitHub Wiki has its own Home.md page, which serves as a central index for all documentation. This file is not manually written but is automatically generated by the docsWorkflow script.
Sources: scripts/docsWorkflow/const.ts:6, scripts/docsWorkflow/index.ts:4-7
The script scans the contributing directory for markdown files, organizes them according to a Table of Contents (toc), and generates links for both English and Chinese versions. The final content is then written to Home.md and _Sidebar.md.
This diagram shows the workflow for automatically generating the Home.md and _Sidebar.md documentation files.
Sources: scripts/docsWorkflow/index.ts
Structured Data for SEO
To improve search engine visibility, the application generates JSON-LD (JSON for Linking Data) for its pages. The Ld class is responsible for creating this structured data.
Sources: src/server/ld.ts
Ld Class Architecture
The Ld class has a central generate method that orchestrates the creation of different schema types, such as WebSite, WebPage, Article, and Organization.
This class diagram outlines the methods within the Ld class used for generating JSON-LD structured data.
Sources: src/server/ld.ts:31-70
generate Method
The main generate method takes several parameters to build a complete @graph of linked data.
| Parameter | Type | Description |
|---|---|---|
image | string | URL for the primary image of the page. Defaults to /og/cover.png. |
article | object | Configuration for generating Article schema. |
url | string | The canonical URL of the page. |
title | string | The title of the page. |
description | string | The description of the page. |
date | string | The publication or modification date. |
locale | Locales | The locale of the page content. |
webpage | object | Configuration for generating WebPage schema. |
Sources: src/server/ld.ts:32-49
Organization and WebPage Schemas
genOrganization(): This method generates theOrganizationschema, including the company name (LobeHub), logo, contact information, founders, and social media links. This establishes a clear identity for the entity behind the website.genWebPage(): This method creates theWebPageschema, which describes the current page. It includes the title, description, publication date, and links it to the mainWebSiteandOrganizationschemas. It can also include aSearchActionto enable sitelinks search boxes in search results.
Sources: src/server/ld.ts:72-103, 115-156
Conclusion
The "Home" feature of LobeChat is a multifaceted component that serves as the primary user entry point for discovering AI agents and tools, and also as the main index for the project's technical documentation. The application's Discover page is populated with featured content via a database seeding script. Both the application pages and the documentation are optimized for search engines through a dedicated structured data generation module, ensuring high visibility and accessibility.