deep-research-web-ui

Deep Research Web UI supports two primary deployment modes depending on your hosting environment and how you want to manage API keys:

1. Client Mode: Users enter their own API keys directly in the browser. This is ideal for static deployments (e.g., EdgeOne Pages, GitHub Pages) using pnpm generate. It is highly secure as configuration and requests stay local to the user's browser.
2. Server Mode: API keys are configured via server-side environment variables. Users do not need to enter keys in the UI. This requires an SSR/Nitro runtime (e.g., a Docker container) and is not compatible with purely static deployments.

Deep Research Web supports two distinct deployment modes depending on your hosting environment and security requirements:

1. Client Mode (Traditional): API keys are entered by the user directly in the browser. This is ideal for static hosting (e.g., EdgeOne Pages, GitHub Pages) or using pnpm generate. It is highly private as configuration and requests stay in the browser.
2. Server Mode (Recommended): API keys are configured via server-side environment variables. Users do not need to enter keys in the UI. This requires an SSR/Nitro runtime (like Docker or a Nuxt server) and is not suitable for pure static deployment.

To develop locally, ensure you have pnpm installed, then follow these steps:

1. Install dependencies:

pnpm install

2. Start the development server:

pnpm dev

The server will be available at http://localhost:3000.

3. To build for production:

• For SSR (Server Side Rendering): pnpm build
• For SSG (Static Site Generation): pnpm generate

4. To preview a local production build:

pnpm preview

To develop locally or build the project from source, follow these steps:

1. Install dependencies

pnpm install

2. Run development server Starts a local server at http://localhost:3000.

pnpm dev

3. Build for production

• SSR Mode (for Server Mode deployment):

  pnpm build

- **SSG Mode** (for Client Mode/Static deployment):
  ```bash
pnpm generate

4. Preview production build

pnpm preview

Client Mode is used for static deployments where users provide their own keys in the UI.

Using a pre-built image:

docker run -p 3000:3000 --name deep-research-web -d anotia/deep-research-web:latest

Using a self-built image:

git clone https://github.com/AnotiaWang/deep-research-web-ui
cd deep-research-web-ui
docker build -t deep-research-web .
docker run -p 3000:3000 --name deep-research-web -d deep-research-web

Depending on your target deployment, use the appropriate build command:

• SSR Application (Requires a Node.js/Nitro runtime, e.g., Docker):

  pnpm build

• Static/SSG Application (For EdgeOne Pages, GitHub Pages, etc.):

  pnpm generate

To test your production build locally:

pnpm preview

The application's visual theme can be customized using the defineAppConfig function in app/app.config.ts. Currently, you can specify the primary color for the UI components. The value should be a valid color name or theme identifier (e.g., 'violet').

export default defineAppConfig({
  ui: {
    colors: {
      primary: 'violet',
    },
  },
})

The searchWeb function and createWebSearch factory allow you to perform web searches using different providers. You must provide a WebSearchConfig object specifying the provider and necessary credentials.

Supported providers and their specific configuration requirements:

• firecrawl or crw: Requires apiKey. You can optionally provide an apiBase URL.
  • Default Firecrawl API: https://api.firecrawl.dev
  • Default CRW API: https://fastcrw.com/api
• google-pse: Requires both apiKey and googlePseId. Supports a lang option in WebSearchOptions to filter results by language (e.g., en).
• tavily: Requires apiKey. Supports advanced search settings via tavilyAdvancedSearch (boolean) and tavilySearchTopic ('general' | 'news' | 'finance').

The internationalization (i18n) configuration for the project is defined using defineI18nConfig. It specifies the available languages, the fallback language used when a translation is missing, and the message objects for each locale.

Key configuration options:

• legacy: Set to false to use the Composition API instead of the Options API.
• fallbackLocale: The locale used when the requested translation is not found (currently set to 'zh').
• availableLocales: An array of supported locale codes (e.g., ['en', 'zh', 'nl']).
• messages: An object mapping locale codes to their respective translation JSON objects.

export default defineI18nConfig(() => ({
  legacy: false,
  fallbackLocale: 'zh',
  availableLocales: ['en', 'zh', 'nl'],
  messages: {
    en,
    zh,
    nl,
  },
}))

The following values are supported for provider configuration:

AI Providers (NUXT_PUBLIC_AI_PROVIDER):

• openai-compatible
• siliconflow
• 302-ai
• infiniai
• openrouter
• deepseek
• ollama

Web Search Providers (NUXT_PUBLIC_WEB_SEARCH_PROVIDER):

• tavily
• firecrawl
• crw (fastCRW)
• google-pse