Feature: Discover Marketplace
Relevant source files
The following files were used as context for generating this wiki page:
- src/app/[variants]/(main)/discover/(list)/(home)/page.tsx
- src/store/discover/store.ts
- src/server/services/discover/index.ts
- src/server/routers/lambda/market/index.ts
- scripts/seedBundledApps/index.ts
- src/locales/default/discover.ts
- packages/database/src/repositories/dataImporter/tests/fixtures/agentsToSessions.json
The Discover Marketplace is a central hub within LobeChat where users can find, explore, and add pre-configured AI Assistants (Agents), Models, and Plugins to their chat sessions. It serves as a curated collection of tools and personalities that extend the core functionality of the application, allowing users to quickly start conversations with specialized AI agents tailored for specific tasks like code reviewing, content writing, or data visualization.
The marketplace is designed to be a dynamic and expandable platform, featuring both official and community-submitted content. It includes functionalities for searching, filtering, and viewing details for each item, providing a rich user experience for discovering new AI capabilities.
Architecture and Data Flow
The Discover Marketplace follows a client-server architecture, with a Next.js frontend, a Zustand store for state management, and a tRPC backend that serves data from a database.
The diagram below illustrates the high-level data flow from the user's interaction on the Discover page to the backend services.
This diagram shows that the user interacts with the Discover Page, which uses a Zustand store to manage state. The store fetches data via a tRPC client, which communicates with the backend Market router. The router uses a Discover Service to query the database, which is initially populated by a seeding script.
Sources: src/app/[variants]/(main)/discover/(list)/(home)/page.tsx, src/store/discover/store.ts, src/server/routers/lambda/market/index.ts, src/server/services/discover/index.ts, scripts/seedBundledApps/index.ts
Frontend Implementation
The frontend for the Discover Marketplace is built with Next.js and React. It is responsible for rendering the user interface, managing client-side state, and communicating with the backend to fetch marketplace data.
Discover Home Page
The main entry point for the marketplace UI is the Discover Home Page. This page is a server-side component that fetches initial data for featured items. It displays curated lists of recommended assistants, models, and plugins to the user.
Key responsibilities:
- Fetching featured assistants and plugins on the server.
- Rendering sections for "Featured Assistants" and "Featured Tools".
- Providing navigation to more detailed list pages.
Sources: src/app/[variants]/(main)/discover/(list)/(home)/page.tsx
Client-Side State Management (Zustand)
Client-side state for the Discover feature is managed by a Zustand store. This store holds the lists of agents, plugins, loading states, and search keywords.
The DiscoverStore is defined with the following structure:
| Slice | Description |
|---|---|
agentSlice | Manages state related to agents, including the agent list, search keywords, and loading status. |
pluginSlice | Manages state for plugins, including the plugin list and search functionality. |
The store exposes actions to fetch data from the backend, such as getAgentList and getPluginList.
The following sequence diagram shows how the agent list is fetched when a user navigates to the discover page.
Localization
All user-facing text in the Discover Marketplace is internationalized. The localization keys are organized hierarchically in src/locales/default/discover.ts. This allows for easy translation and maintenance of UI text.
Example categories defined for assistants:
academic: '学术'career: '职业'copywriting: '文案'design: '设计'programming: '编程'
Sources: src/locales/default/discover.ts:100-116
Backend Implementation
The backend is powered by tRPC, providing type-safe API endpoints for the frontend to consume. It consists of routers, services, and database models.
Market API Router
The tRPC router for the marketplace is defined in src/server/routers/lambda/market/index.ts. It exposes procedures for fetching marketplace data.
| Procedure | Description | Input | Output |
|---|---|---|---|
getAgentList | Fetches a list of all available agents. | keyword (optional string) | Agent[] |
getAgentById | Fetches a single agent by its identifier. | id (string) | Agent or null |
getPluginList | Fetches a list of all available plugins. | keyword (optional string) | Plugin[] |
Sources: src/server/routers/lambda/market/index.ts:10-21
Discover Service
The DiscoverService class contains the business logic for retrieving data from the database. It handles fetching and filtering of agents and plugins. For example, the getAgentList method retrieves a list of public agents, including bundled apps.
Sources: src/server/services/discover/index.ts:13-21
Data Model and Seeding
The marketplace content, particularly the initial set of assistants, is managed through a database that is populated by a seed script.
Bundled Apps
"Bundled Apps" are pre-configured AI assistants that are available to all users by default. These are defined in a seed script and inserted into the bundled_apps table in the database.
A NewBundledApp has the following structure:
| Field | Type | Description | Example |
|---|---|---|---|
id | string | Unique identifier for the app. | artifact-creator |
avatar | string | Emoji or icon for the assistant. | 🎨 |
backgroundColor | string | Background color for the avatar. | #6366f1 |
category | string | Category for discoverability. | development |
chatConfig | object | Configuration for the chat interface. | { "displayMode": "chat" } |
config | object | LLM model and parameters. | { "model": "gemini-2.0-flash-exp" } |
description | string | A short description of the assistant. | 'Create interactive HTML/CSS/JavaScript artifacts...' |
systemRole | string | The system prompt defining the assistant's behavior. | 'You are an expert artifact creator assistant...' |
tags | string[] | Searchable tags. | ['creative', 'development'] |
title | string | The display name of the assistant. | Artifact Creator |
isFeatured | boolean | Whether the app is featured on the home page. | true |
isPublic | boolean | Whether the app is publicly visible. | true |
openingMessage | string | The initial message from the assistant. | 'Hi! I can help you create interactive artifacts.' |
openingQuestions | string[] | Suggested user questions. | ['Create a V8 engine animation...'] |
Sources: scripts/seedBundledApps/index.ts:11-53, packages/database/src/repositories/dataImporter/tests/fixtures/agentsToSessions.json
The diagram below shows the entity relationship for a Bundled App.
This ER diagram outlines the fields of a BUNDLED_APP entity as defined in the seed script.
Sources: scripts/seedBundledApps/index.ts:11-53
Seeding Process
The seed:bundled-apps script (scripts/seedBundledApps/index.ts) is used to populate the database with the default assistants. It iterates through a predefined list of BUNDLED_APPS and creates a new entry in the database for each one if it doesn't already exist. This ensures that a fresh installation of LobeChat comes with a set of useful, ready-to-use assistants.
Sources: scripts/seedBundledApps/index.ts:223-243
Conclusion
The Discover Marketplace is a core feature of LobeChat that significantly enhances its utility by providing a browsable and searchable repository of AI assistants, models, and plugins. Its architecture is robust, leveraging a modern stack (Next.js, Zustand, tRPC) to deliver a responsive and type-safe experience. The system is designed for easy expansion, with a clear process for adding new "Bundled Apps" via a seed script, making it simple to enrich the marketplace with new content over time.