diff --git a/openapi_v2.yaml b/openapi_v2.yaml
index 5b4e205..6e0f57d 100644
--- a/openapi_v2.yaml
+++ b/openapi_v2.yaml
@@ -8,11 +8,11 @@ info:
     **Authentication:**
     All API requests must be authenticated with a Bearer Token.
     Provide your API key in the `Authorization` header: `Authorization: Bearer YOUR_API_KEY`.
-  version: "2.3.0"
+  version: '2.3.0'
   contact:
     name: Firecrawl Team
     email: team@firecrawl.dev
-    url: "https://firecrawl.dev"
+    url: 'https://firecrawl.dev'
 servers:
   - url: https://api.firecrawl.dev/v2
     description: Production Server
@@ -42,43 +42,42 @@ paths:
         content:
           application/json:
             schema:
-              $ref: "#/components/schemas/ScrapeRequestV2"
+              $ref: '#/components/schemas/ScrapeRequestV2'
             examples:
               llm_extraction_example:
                 summary: LLM Extraction
                 value:
-                  url: "https://mendable.ai"
+                  url: 'https://mendable.ai'
                   pageOptions:
                     onlyMainContent: true
                   extractorOptions:
-                    mode: "llm-extraction"
-                    extractionPrompt: "Extract the pricing information and features for each plan."
+                    mode: 'llm-extraction'
+                    extractionPrompt: 'Extract the pricing information and features for each plan.'
                     extractionSchema:
-                      type: "object"
+                      type: 'object'
                       properties:
                         plans:
-                          type: "array"
+                          type: 'array'
                           items:
-                            type: "object"
+                            type: 'object'
                             properties:
-                              name: { type: "string" }
-                              price: { type: "string" }
-                              features:
-                                { type: "array", items: { type: "string" } }
+                              name: { type: 'string' }
+                              price: { type: 'string' }
+                              features: { type: 'array', items: { type: 'string' } }
               markdown_example:
                 summary: Markdown Content
                 value:
-                  url: "https://firecrawl.dev/blog/how-to-scrape-amazon"
+                  url: 'https://firecrawl.dev/blog/how-to-scrape-amazon'
                   pageOptions:
                     onlyMainContent: true
       responses:
-        "200":
+        '200':
           description: Successfully scraped the URL.
           content:
             application/json:
               schema:
-                $ref: "#/components/schemas/ScrapeResponse"
-        "202":
+                $ref: '#/components/schemas/ScrapeResponse'
+        '202':
           description: Scrape job accepted for asynchronous processing (when a webhook is provided).
           content:
             application/json:
@@ -88,17 +87,17 @@ paths:
                   jobId:
                     type: string
                     description: The ID of the accepted job.
-                    example: "c6a2c5a0-4a6a-4f9a-9b8a-3e2b1f1c7a6d"
-        "400":
-          $ref: "#/components/responses/BadRequest"
-        "401":
-          $ref: "#/components/responses/Unauthorized"
-        "422":
-          $ref: "#/components/responses/UnprocessableEntity"
-        "429":
-          $ref: "#/components/responses/TooManyRequests"
-        "500":
-          $ref: "#/components/responses/InternalServerError"
+                    example: 'c6a2c5a0-4a6a-4f9a-9b8a-3e2b1f1c7a6d'
+        '400':
+          $ref: '#/components/responses/BadRequest'
+        '401':
+          $ref: '#/components/responses/Unauthorized'
+        '422':
+          $ref: '#/components/responses/UnprocessableEntity'
+        '429':
+          $ref: '#/components/responses/TooManyRequests'
+        '500':
+          $ref: '#/components/responses/InternalServerError'
 
   /crawl:
     post:
@@ -114,17 +113,17 @@ paths:
         content:
           application/json:
             schema:
-              $ref: "#/components/schemas/CrawlRequestV2"
+              $ref: '#/components/schemas/CrawlRequestV2'
             examples:
               basic_crawl:
                 summary: Basic Crawl
                 value:
-                  url: "https://firecrawl.dev"
+                  url: 'https://firecrawl.dev'
                   crawlerOptions:
                     maxDepth: 2
                     maxPages: 10
       responses:
-        "200":
+        '200':
           description: Crawl job started successfully.
           content:
             application/json:
@@ -134,17 +133,17 @@ paths:
                   jobId:
                     type: string
                     description: The ID for the initiated crawl job.
-                    example: "e8a3b5c0-4b6a-4f9a-9b8a-3e2b1f1c7a6d"
-        "400":
-          $ref: "#/components/responses/BadRequest"
-        "401":
-          $ref: "#/components/responses/Unauthorized"
-        "422":
-          $ref: "#/components/responses/UnprocessableEntity"
-        "429":
-          $ref: "#/components/responses/TooManyRequests"
-        "500":
-          $ref: "#/components/responses/InternalServerError"
+                    example: 'e8a3b5c0-4b6a-4f9a-9b8a-3e2b1f1c7a6d'
+        '400':
+          $ref: '#/components/responses/BadRequest'
+        '401':
+          $ref: '#/components/responses/Unauthorized'
+        '422':
+          $ref: '#/components/responses/UnprocessableEntity'
+        '429':
+          $ref: '#/components/responses/TooManyRequests'
+        '500':
+          $ref: '#/components/responses/InternalServerError'
 
   /crawl/status/{jobId}:
     get:
@@ -163,22 +162,22 @@ paths:
           schema:
             type: string
             format: uuid
-            example: "e8a3b5c0-4b6a-4f9a-9b8a-3e2b1f1c7a6d"
+            example: 'e8a3b5c0-4b6a-4f9a-9b8a-3e2b1f1c7a6d'
       responses:
-        "200":
+        '200':
           description: The current status of the crawl job.
           content:
             application/json:
               schema:
-                $ref: "#/components/schemas/CrawlStatusResponse"
-        "401":
-          $ref: "#/components/responses/Unauthorized"
-        "404":
-          $ref: "#/components/responses/NotFound"
-        "429":
-          $ref: "#/components/responses/TooManyRequests"
-        "500":
-          $ref: "#/components/responses/InternalServerError"
+                $ref: '#/components/schemas/CrawlStatusResponse'
+        '401':
+          $ref: '#/components/responses/Unauthorized'
+        '404':
+          $ref: '#/components/responses/NotFound'
+        '429':
+          $ref: '#/components/responses/TooManyRequests'
+        '500':
+          $ref: '#/components/responses/InternalServerError'
 
   /crawl/cancel:
     post:
@@ -201,9 +200,9 @@ paths:
                 jobId:
                   type: string
                   description: The ID of the crawl job to cancel.
-                  example: "e8a3b5c0-4b6a-4f9a-9b8a-3e2b1f1c7a6d"
+                  example: 'e8a3b5c0-4b6a-4f9a-9b8a-3e2b1f1c7a6d'
       responses:
-        "200":
+        '200':
           description: The job was successfully cancelled.
           content:
             application/json:
@@ -212,15 +211,15 @@ paths:
                 properties:
                   status:
                     type: string
-                    example: "cancelled"
-        "401":
-          $ref: "#/components/responses/Unauthorized"
-        "404":
-          $ref: "#/components/responses/NotFound"
-        "429":
-          $ref: "#/components/responses/TooManyRequests"
-        "500":
-          $ref: "#/components/responses/InternalServerError"
+                    example: 'cancelled'
+        '401':
+          $ref: '#/components/responses/Unauthorized'
+        '404':
+          $ref: '#/components/responses/NotFound'
+        '429':
+          $ref: '#/components/responses/TooManyRequests'
+        '500':
+          $ref: '#/components/responses/InternalServerError'
 
   /search:
     post:
@@ -236,26 +235,26 @@ paths:
         content:
           application/json:
             schema:
-              $ref: "#/components/schemas/SearchRequest"
+              $ref: '#/components/schemas/SearchRequest'
       responses:
-        "200":
+        '200':
           description: Search completed successfully.
           content:
             application/json:
               schema:
                 type: array
                 items:
-                  $ref: "#/components/schemas/SearchResult"
-        "400":
-          $ref: "#/components/responses/BadRequest"
-        "401":
-          $ref: "#/components/responses/Unauthorized"
-        "422":
-          $ref: "#/components/responses/UnprocessableEntity"
-        "429":
-          $ref: "#/components/responses/TooManyRequests"
-        "500":
-          $ref: "#/components/responses/InternalServerError"
+                  $ref: '#/components/schemas/SearchResult'
+        '400':
+          $ref: '#/components/responses/BadRequest'
+        '401':
+          $ref: '#/components/responses/Unauthorized'
+        '422':
+          $ref: '#/components/responses/UnprocessableEntity'
+        '429':
+          $ref: '#/components/responses/TooManyRequests'
+        '500':
+          $ref: '#/components/responses/InternalServerError'
 
   /map:
     post:
@@ -279,9 +278,9 @@ paths:
                   type: string
                   format: uri
                   description: The URL to fetch the sitemap for.
-                  example: "https://firecrawl.dev"
+                  example: 'https://firecrawl.dev'
       responses:
-        "200":
+        '200':
           description: Sitemap data retrieved successfully.
           content:
             application/json:
@@ -290,16 +289,16 @@ paths:
                 items:
                   type: string
                   format: uri
-        "400":
-          $ref: "#/components/responses/BadRequest"
-        "401":
-          $ref: "#/components/responses/Unauthorized"
-        "422":
-          $ref: "#/components/responses/UnprocessableEntity"
-        "429":
-          $ref: "#/components/responses/TooManyRequests"
-        "500":
-          $ref: "#/components/responses/InternalServerError"
+        '400':
+          $ref: '#/components/responses/BadRequest'
+        '401':
+          $ref: '#/components/responses/Unauthorized'
+        '422':
+          $ref: '#/components/responses/UnprocessableEntity'
+        '429':
+          $ref: '#/components/responses/TooManyRequests'
+        '500':
+          $ref: '#/components/responses/InternalServerError'
 
   /batch-scrape:
     post:
@@ -323,26 +322,26 @@ paths:
                     type: string
                     format: uri
                 scrapeOptions:
-                  $ref: "#/components/schemas/ScrapeRequestV2"
+                  $ref: '#/components/schemas/ScrapeRequestV2'
       responses:
-        "200":
+        '200':
           description: Successfully scraped all URLs.
           content:
             application/json:
               schema:
                 type: array
                 items:
-                  $ref: "#/components/schemas/ScrapeResponse"
-        "400":
-          $ref: "#/components/responses/BadRequest"
-        "401":
-          $ref: "#/components/responses/Unauthorized"
-        "422":
-          $ref: "#/components/responses/UnprocessableEntity"
-        "429":
-          $ref: "#/components/responses/TooManyRequests"
-        "500":
-          $ref: "#/components/responses/InternalServerError"
+                  $ref: '#/components/schemas/ScrapeResponse'
+        '400':
+          $ref: '#/components/responses/BadRequest'
+        '401':
+          $ref: '#/components/responses/Unauthorized'
+        '422':
+          $ref: '#/components/responses/UnprocessableEntity'
+        '429':
+          $ref: '#/components/responses/TooManyRequests'
+        '500':
+          $ref: '#/components/responses/InternalServerError'
 
   /extract:
     post:
@@ -358,24 +357,24 @@ paths:
         content:
           application/json:
             schema:
-              $ref: "#/components/schemas/ExtractRequest"
+              $ref: '#/components/schemas/ExtractRequest'
       responses:
-        "200":
+        '200':
           description: Successfully extracted data.
           content:
             application/json:
               schema:
-                $ref: "#/components/schemas/ExtractResponse"
-        "400":
-          $ref: "#/components/responses/BadRequest"
-        "401":
-          $ref: "#/components/responses/Unauthorized"
-        "422":
-          $ref: "#/components/responses/UnprocessableEntity"
-        "429":
-          $ref: "#/components/responses/TooManyRequests"
-        "500":
-          $ref: "#/components/responses/InternalServerError"
+                $ref: '#/components/schemas/ExtractResponse'
+        '400':
+          $ref: '#/components/responses/BadRequest'
+        '401':
+          $ref: '#/components/responses/Unauthorized'
+        '422':
+          $ref: '#/components/responses/UnprocessableEntity'
+        '429':
+          $ref: '#/components/responses/TooManyRequests'
+        '500':
+          $ref: '#/components/responses/InternalServerError'
 
 components:
   securitySchemes:
@@ -383,44 +382,44 @@ components:
       type: http
       scheme: bearer
       bearerFormat: JWT
-      description: "API Key for authentication. Get yours from [firecrawl.dev](https://firecrawl.dev)."
+      description: 'API Key for authentication. Get yours from [firecrawl.dev](https://firecrawl.dev).'
   responses:
     BadRequest:
       description: The request was malformed or contained invalid parameters.
       content:
         application/json:
           schema:
-            $ref: "#/components/schemas/GenericError"
+            $ref: '#/components/schemas/GenericError'
     Unauthorized:
       description: Authentication failed. The API key is missing, invalid, or expired.
       content:
         application/json:
           schema:
-            $ref: "#/components/schemas/GenericError"
+            $ref: '#/components/schemas/GenericError'
     NotFound:
       description: The requested resource could not be found.
       content:
         application/json:
           schema:
-            $ref: "#/components/schemas/GenericError"
+            $ref: '#/components/schemas/GenericError'
     UnprocessableEntity:
       description: The request was well-formed but could not be processed due to validation errors.
       content:
         application/json:
           schema:
-            $ref: "#/components/schemas/ValidationError"
+            $ref: '#/components/schemas/ValidationError'
     TooManyRequests:
       description: The rate limit for your plan has been exceeded.
       content:
         application/json:
           schema:
-            $ref: "#/components/schemas/GenericError"
+            $ref: '#/components/schemas/GenericError'
     InternalServerError:
       description: An unexpected error occurred on the server.
       content:
         application/json:
           schema:
-            $ref: "#/components/schemas/GenericError"
+            $ref: '#/components/schemas/GenericError'
   schemas:
     GenericError:
       type: object
@@ -428,14 +427,14 @@ components:
         error:
           type: string
           description: A message describing the error.
-          example: "Invalid API Key"
+          example: 'Invalid API Key'
 
     ValidationError:
       type: object
       properties:
         error:
           type: string
-          example: "Validation failed"
+          example: 'Validation failed'
         details:
           type: array
           items:
@@ -445,10 +444,10 @@ components:
                 type: array
                 items:
                   type: string
-                example: ["crawlerOptions", "maxDepth"]
+                example: ['crawlerOptions', 'maxDepth']
               message:
                 type: string
-                example: "Number must be less than or equal to 10"
+                example: 'Number must be less than or equal to 10'
 
     ScrapeRequestV2:
       type: object
@@ -459,7 +458,7 @@ components:
           type: string
           format: uri
           description: The URL to scrape.
-          example: "https://firecrawl.dev"
+          example: 'https://firecrawl.dev'
         pageOptions:
           type: object
           properties:
@@ -485,7 +484,7 @@ components:
                 type: string
               description: Custom headers to use for the request.
               example:
-                User-Agent: "My-Custom-Scraper/1.0"
+                User-Agent: 'My-Custom-Scraper/1.0'
         extractorOptions:
           type: object
           properties:
@@ -494,19 +493,19 @@ components:
               enum:
                 - llm-extraction
               description: The extraction mode.
-              example: "llm-extraction"
+              example: 'llm-extraction'
             extractionPrompt:
               type: string
               description: A specific prompt to guide the LLM for data extraction.
-              example: "Extract the main title and the first paragraph of the article."
+              example: 'Extract the main title and the first paragraph of the article.'
             extractionSchema:
               type: object
               description: The JSON schema for the data to be extracted.
               example:
-                type: "object"
+                type: 'object'
                 properties:
-                  title: { type: "string" }
-                  first_paragraph: { type: "string" }
+                  title: { type: 'string' }
+                  first_paragraph: { type: 'string' }
         scraperOptions:
           type: object
           properties:
@@ -536,9 +535,9 @@ components:
               type: object
               description: Metadata extracted from the page (title, description, etc.).
               example:
-                title: "Firecrawl | Build reliable crawlers and scrapers"
-                description: "Turn any website into clean, structured data."
-                ogTitle: "Firecrawl"
+                title: 'Firecrawl | Build reliable crawlers and scrapers'
+                description: 'Turn any website into clean, structured data.'
+                ogTitle: 'Firecrawl'
             screenshotUrl:
               type: string
               format: uri
@@ -549,7 +548,7 @@ components:
             sourceURL:
               type: string
               format: uri
-              example: "https://firecrawl.dev"
+              example: 'https://firecrawl.dev'
 
     CrawlRequestV2:
       type: object
@@ -560,7 +559,7 @@ components:
           type: string
           format: uri
           description: The starting URL for the crawl.
-          example: "https://firecrawl.dev/blog"
+          example: 'https://firecrawl.dev/blog'
         crawlerOptions:
           type: object
           properties:
@@ -569,13 +568,13 @@ components:
               items:
                 type: string
               description: Glob patterns to include in the crawl.
-              example: ["/blog/**"]
+              example: ['/blog/**']
             excludes:
               type: array
               items:
                 type: string
               description: Glob patterns to exclude from the crawl.
-              example: ["/blog/old-posts/**"]
+              example: ['/blog/old-posts/**']
             maxDepth:
               type: integer
               description: The maximum depth to crawl relative to the starting URL.
@@ -619,7 +618,7 @@ components:
         status:
           type: string
           enum: [crawling, completed, failed]
-          example: "completed"
+          example: 'completed'
         total:
           type: integer
           description: Total number of pages found.
@@ -631,7 +630,7 @@ components:
         data:
           type: array
           items:
-            $ref: "#/components/schemas/ScrapeResponse"
+            $ref: '#/components/schemas/ScrapeResponse'
 
     SearchRequest:
       type: object
@@ -641,18 +640,18 @@ components:
         query:
           type: string
           description: The search query.
-          example: "What is Firecrawl?"
+          example: 'What is Firecrawl?'
         searchOptions:
           type: object
           properties:
             provider:
               type: string
               enum: [google, serper, searchapi, searxng]
-              default: "google"
+              default: 'google'
             region:
               type: string
               description: The geographic region for the search.
-              example: "us-east-1"
+              example: 'us-east-1'
             maxResults:
               type: integer
               description: The maximum number of search results to return.
@@ -663,17 +662,17 @@ components:
       properties:
         title:
           type: string
-          example: "Firecrawl - Turn any website into clean data"
+          example: 'Firecrawl - Turn any website into clean data'
         url:
           type: string
           format: uri
-          example: "https://firecrawl.dev"
+          example: 'https://firecrawl.dev'
         description:
           type: string
-          example: "Firecrawl is a powerful tool for web scraping and crawling..."
+          example: 'Firecrawl is a powerful tool for web scraping and crawling...'
         content:
           type: string
-          example: "Firecrawl helps developers turn websites into structured data..."
+          example: 'Firecrawl helps developers turn websites into structured data...'
 
     ExtractRequest:
       type: object
@@ -695,10 +694,10 @@ components:
               type: object
               description: The JSON schema to which the extracted data should conform.
               example:
-                type: "object"
+                type: 'object'
                 properties:
-                  author: { type: "string" }
-                  published_date: { type: "string", format: "date" }
+                  author: { type: 'string' }
+                  published_date: { type: 'string', format: 'date' }
             extractionPrompt:
               type: string
               description: A natural language prompt to guide the extraction process.
@@ -706,7 +705,7 @@ components:
               type: string
               enum:
                 - llm-extraction
-              default: "llm-extraction"
+              default: 'llm-extraction'
 
     ExtractResponse:
       type: object
@@ -717,5 +716,5 @@ components:
           type: object
           description: The extracted data matching the provided schema.
           example:
-            author: "John Doe"
-            published_date: "2024-01-15"
+            author: 'John Doe'
+            published_date: '2024-01-15'
diff --git a/src/api/v2Client.ts b/src/api/v2Client.ts
new file mode 100644
index 0000000..56b946c
--- /dev/null
+++ b/src/api/v2Client.ts
@@ -0,0 +1,64 @@
+import axios, { type AxiosRequestConfig, type AxiosResponse } from 'axios';
+import { getApiConfig } from '@/config/api';
+
+/**
+ * Builds the absolute URL for a V2 API request.
+ *
+ * @param {string} path - The endpoint path without the leading base URL.
+ * @returns {string} The absolute URL for the request.
+ */
+function buildUrl(path: string): string {
+  const config = getApiConfig();
+  const basePath = (config.basePath ?? '').replace(/\/+$/, '');
+  const trimmedPath = path.replace(/^\/+/, '');
+  return `${basePath}/${trimmedPath}`;
+}
+
+/**
+ * Builds the Axios configuration shared by all V2 requests.
+ *
+ * @param {AxiosRequestConfig} [override] - Optional overrides for the request.
+ * @returns {AxiosRequestConfig} The Axios configuration with headers and overrides merged.
+ */
+function buildRequestConfig(override?: AxiosRequestConfig): AxiosRequestConfig {
+  const config = getApiConfig();
+  const baseHeaders = (config.baseOptions?.headers ?? {}) as Record<string, string>;
+  const headers = {
+    'Content-Type': 'application/json',
+    ...baseHeaders,
+    ...override?.headers,
+  };
+  return {
+    ...override,
+    headers,
+  };
+}
+
+/**
+ * Sends a POST request to a V2 API endpoint.
+ *
+ * @param {string} path - The endpoint path relative to the API base URL.
+ * @param {unknown} payload - The request payload.
+ * @param {AxiosRequestConfig} [config] - Optional Axios configuration overrides.
+ * @returns {Promise<AxiosResponse<T>>} The Axios response promise.
+ */
+export function postV2<T>(
+  path: string,
+  payload: unknown,
+  config?: AxiosRequestConfig,
+): Promise<AxiosResponse<T>> {
+  const url = buildUrl(path);
+  return axios.post<T>(url, payload, buildRequestConfig(config));
+}
+
+/**
+ * Sends a GET request to a V2 API endpoint.
+ *
+ * @param {string} path - The endpoint path relative to the API base URL.
+ * @param {AxiosRequestConfig} [config] - Optional Axios configuration overrides.
+ * @returns {Promise<AxiosResponse<T>>} The Axios response promise.
+ */
+export function getV2<T>(path: string, config?: AxiosRequestConfig): Promise<AxiosResponse<T>> {
+  const url = buildUrl(path);
+  return axios.get<T>(url, buildRequestConfig(config));
+}
diff --git a/src/components/ApiKeyInput.vue b/src/components/ApiKeyInput.vue
index 375d51a..7bba50e 100644
--- a/src/components/ApiKeyInput.vue
+++ b/src/components/ApiKeyInput.vue
@@ -16,14 +16,17 @@
           <a href="https://app.firecrawl.dev" target="_blank">the Firecrawl dashboard</a>
         </small>
       </div>
+      <div class="form-group">
+        <label for="apiVersion">Firecrawl API version:</label>
+        <select id="apiVersion" v-model="selectedVersion">
+          <option value="v1">v1</option>
+          <option value="v2">v2</option>
+        </select>
+        <small>Select the API version that matches your backend deployment.</small>
+      </div>
       <div class="form-group">
         <label for="baseUrl">Firecrawl API base URL (optional):</label>
-        <input
-          id="baseUrl"
-          v-model="baseUrl"
-          type="text"
-          placeholder="https://api.firecrawl.dev/v1"
-        />
+        <input id="baseUrl" v-model="baseUrl" type="text" :placeholder="placeholder" />
         <small> Leave blank to use the default URL. </small>
       </div>
       <button type="submit" class="primary-button">Save</button>
@@ -36,8 +39,10 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, onMounted } from 'vue';
+import { defineComponent, ref, onMounted, watch, computed } from 'vue';
 import { refreshApiClients } from '@/plugins/api';
+import { getBaseUrlForVersion, getDefaultBaseUrl } from '@/config/api';
+import { useApiVersion, type ApiVersion } from '@/config/apiVersion';
 
 /**
  * Component allowing users to configure and store the Firecrawl API key and base URL.
@@ -49,11 +54,15 @@ import { refreshApiClients } from '@/plugins/api';
 export default defineComponent({
   name: 'ApiKeyInput',
   setup() {
-    const apiKey = ref(localStorage.getItem('firecrawl_api_key') || '');
-    const baseUrl = ref(localStorage.getItem('firecrawl_base_url') || '');
+    const { apiVersion, setApiVersion } = useApiVersion();
+    const apiKey = ref(readStoredApiKey());
+    const selectedVersion = ref<ApiVersion>(apiVersion.value);
+    const baseUrl = ref(getBaseUrlForVersion(selectedVersion.value));
     const error = ref('');
     const success = ref(false);
 
+    const placeholder = computed(() => getDefaultBaseUrl(selectedVersion.value));
+
     // Automatically display if no key is configured
     onMounted(() => {
       if (!apiKey.value) {
@@ -61,22 +70,28 @@ export default defineComponent({
       }
     });
 
+    watch(
+      selectedVersion,
+      (newVersion) => {
+        baseUrl.value = getBaseUrlForVersion(newVersion);
+      },
+      { immediate: true },
+    );
+
     const saveApiConfig = () => {
       try {
         if (!apiKey.value) {
           throw new Error('Please enter a valid API key');
         }
-        // Save the API key
-        localStorage.setItem('firecrawl_api_key', apiKey.value);
-        // Save the base URL (even if empty to override any previous value if needed)
-        localStorage.setItem('firecrawl_base_url', baseUrl.value);
+
+        setApiVersion(selectedVersion.value);
 
         success.value = true;
         error.value = '';
         setTimeout(() => (success.value = false), 3000);
 
         // Update API clients dynamically without reloading the page
-        refreshApiClients(baseUrl.value, apiKey.value);
+        refreshApiClients(baseUrl.value, apiKey.value, selectedVersion.value);
       } catch (err) {
         error.value = err instanceof Error ? err.message : 'Unknown error';
         success.value = false;
@@ -86,12 +101,30 @@ export default defineComponent({
     return {
       apiKey,
       baseUrl,
+      placeholder,
       error,
       success,
+      selectedVersion,
       saveApiConfig,
     };
   },
 });
+
+/**
+ * Reads the API key from local storage or environment variables.
+ *
+ * @returns {string} The stored API key or an empty string when unavailable.
+ */
+function readStoredApiKey(): string {
+  if (typeof window !== 'undefined' && window.localStorage) {
+    const storedKey = window.localStorage.getItem('firecrawl_api_key');
+    if (storedKey !== null) {
+      return storedKey;
+    }
+  }
+  const env = import.meta.env as Record<string, string | undefined>;
+  return env.VITE_FIRECRAWL_API_KEY || '';
+}
 </script>
 
 <style scoped>
diff --git a/src/components/MapView.vue b/src/components/MapView.vue
index a0926d9..b810d37 100644
--- a/src/components/MapView.vue
+++ b/src/components/MapView.vue
@@ -1,297 +1,20 @@
 <template>
-  <div class="page-container map-view">
-    <h2>MapView Component</h2>
-    <form @submit.prevent="handleSubmit" class="map-form">
-      <div class="form-group">
-        <label for="baseUrl">Base URL:</label>
-        <input id="baseUrl" v-model="baseUrl" type="url" placeholder="Enter base URL" required />
-      </div>
-
-      <div class="form-group">
-        <label for="search">Search Query:</label>
-        <input id="search" v-model="search" type="text" placeholder="Optional search terms" />
-      </div>
-
-      <div class="form-group checkbox">
-        <label> <input type="checkbox" v-model="ignoreSitemap" /> Ignore Sitemap </label>
-      </div>
-
-      <div class="form-group checkbox">
-        <label> <input type="checkbox" v-model="sitemapOnly" /> Sitemap Only </label>
-      </div>
-
-      <div class="form-group checkbox">
-        <label> <input type="checkbox" v-model="includeSubdomains" /> Include Subdomains </label>
-      </div>
-
-      <div class="form-group">
-        <label for="limit">Limit:</label>
-        <input id="limit" v-model.number="limit" type="number" min="1" max="30000" />
-      </div>
-
-      <div class="form-group">
-        <label for="timeout">Timeout (ms):</label>
-        <input id="timeout" v-model.number="timeout" type="number" min="0" />
-      </div>
-
-      <button type="submit" class="primary-button">Find URLs</button>
-    </form>
-
-    <div v-if="error" class="error">{{ error }}</div>
-    <div v-if="loading" class="status">Loading...</div>
-
-    <div v-if="urls.length" class="results">
-      <h3>Found URLs</h3>
-      <ul>
-        <li v-for="(url, index) in urls" :key="index">{{ url }}</li>
-      </ul>
-      <button class="download-button" @click="downloadJson">Download JSON</button>
-    </div>
-  </div>
+  <MapViewV2 v-if="isV2" />
+  <MapViewV1 v-else />
 </template>
 
 <script setup lang="ts">
-import { ref, inject } from 'vue';
-import type { MappingApi, MapUrlsRequest } from '@/api-client';
-
-/**
- * MapView Component
- *
- * This component allows users to map URLs starting from a specified base URL.
- * It provides various options for mapping, including search queries, sitemap handling,
- * and limits on the number of links to retrieve.
- */
-
-/**
- * Injects the API instance provided by the API plugin.
- * This instance is expected to contain a `mapping` property for URL mapping operations.
- * @type {{ mapping?: MappingApi } | undefined}
- */
-const api = inject('api') as { mapping?: MappingApi } | undefined;
-if (!api?.mapping) {
-  throw new Error(
-    'Mapping API is not available. Ensure the API plugin is correctly configured and provides the mapping service.',
-  );
-}
-
-/**
- * Reactive variable for the base URL entered by the user.
- * @type {Ref<string>}
- */
-const baseUrl = ref('');
-
-/**
- * Reactive variable for the optional search query used when mapping URLs.
- * @type {Ref<string>}
- */
-const search = ref('');
-
-/**
- * Reactive variable to control whether the website sitemap should be ignored during crawling.
- * Defaults to `true`.
- * @type {Ref<boolean>}
- */
-const ignoreSitemap = ref(true);
-
-/**
- * Reactive variable to control whether only links found in the website sitemap should be returned.
- * Defaults to `false`.
- * @type {Ref<boolean>}
- */
-const sitemapOnly = ref(false);
-
-/**
- * Reactive variable to control whether subdomains of the website should be included in the mapping.
- * Defaults to `false`.
- * @type {Ref<boolean>}
- */
-const includeSubdomains = ref(false);
-
-/**
- * Reactive variable for the maximum number of links to return.
- * Defaults to `5000`.
- * @type {Ref<number>}
- */
-const limit = ref(5000);
-
-/**
- * Reactive variable for the request timeout in milliseconds.
- * Can be `null` if no timeout is specified.
- * @type {Ref<number | null>}
- */
-const timeout = ref<number | null>(null);
-
-/**
- * Reactive variable to store the list of URLs returned by the API.
- * @type {Ref<string[]>}
- */
-const urls = ref<string[]>([]);
-
-/**
- * Reactive variable indicating whether an API request is currently in progress.
- * @type {Ref<boolean>}
- */
-const loading = ref(false);
-
-/**
- * Reactive variable to hold any error message received from the API call.
- * @type {Ref<string>}
- */
-const error = ref('');
-
-/**
- * Handles the form submission event.
- * Constructs the payload for the `mapUrls` API request based on user input,
- * then calls the API to fetch mapped URLs. Manages loading and error states.
- * @returns {Promise<void>} A promise that resolves when the API call is complete.
- */
-async function handleSubmit(): Promise<void> {
-  const payload: MapUrlsRequest = {
-    url: baseUrl.value,
-    search: search.value || undefined,
-    ignoreSitemap: ignoreSitemap.value,
-    sitemapOnly: sitemapOnly.value,
-    includeSubdomains: includeSubdomains.value,
-    limit: limit.value || undefined,
-    timeout: timeout.value ?? undefined,
-  };
+import { computed } from 'vue';
+import { useApiVersion } from '@/config/apiVersion';
+import MapViewV1 from './MapViewV1.vue';
+import MapViewV2 from './MapViewV2.vue';
 
-  loading.value = true;
-  error.value = '';
-  try {
-    const response = await api.mapping.mapUrls(payload);
-    urls.value = response.data.links ?? [];
-  } catch (err: any) {
-    // Cast err to any to access message property safely
-    error.value = err?.message || 'Failed to map URLs. Please check the URL and try again.';
-    urls.value = [];
-  } finally {
-    loading.value = false;
-  }
-}
+const { apiVersion } = useApiVersion();
 
 /**
- * Initiates the download of the found URLs as a JSON file.
- * Creates a Blob from the `urls` array and triggers a download via a temporary anchor element.
- * The temporary link element is appended to the document body and then removed after the click
- * to ensure compatibility across different browsers and to clean up the DOM.
- * The Object URL is also revoked to free up resources.
- * @returns {void}
+ * Determines whether the v2 sitemap interface should be shown.
+ *
+ * @returns {boolean} True when the v2 API is active.
  */
-function downloadJson(): void {
-  const blob = new Blob([JSON.stringify(urls.value, null, 2)], {
-    type: 'application/json',
-  });
-  const link = document.createElement('a');
-  link.href = URL.createObjectURL(blob);
-  link.download = 'urls.json';
-  document.body.appendChild(link); // Append to body to ensure it's clickable in all browsers
-  link.click();
-  document.body.removeChild(link); // Clean up the temporary element
-  URL.revokeObjectURL(link.href); // Release the object URL
-}
+const isV2 = computed<boolean>(() => apiVersion.value === 'v2');
 </script>
-
-<style scoped>
-/* Styles for the main container of the MapView component */
-.map-view {
-  max-width: 600px;
-  margin: 1rem auto;
-  padding: 1rem;
-  border: 1px solid #ccc;
-  border-radius: 8px;
-  font-family: Arial, sans-serif;
-}
-
-/* Styles for the form that contains mapping options */
-.map-form {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-/* Styles for individual form groups (label + input) */
-.form-group {
-  display: flex;
-  flex-direction: column;
-}
-
-/* Styles for form labels */
-label {
-  font-weight: bold;
-  margin-bottom: 0.25rem;
-}
-
-/* Styles for URL input and textarea elements */
-input[type='url'],
-textarea {
-  padding: 0.5rem;
-  font-size: 1rem;
-  border: 1px solid #aaa;
-  border-radius: 4px;
-}
-
-/* Styles for all buttons within the component */
-button {
-  align-self: flex-start;
-  padding: 0.5rem 1rem;
-  font-size: 1rem;
-  background-color: #007acc;
-  color: white;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-}
-
-/* Hover state for buttons */
-button:hover {
-  background-color: #005fa3;
-}
-
-/* Styles for the results section */
-.results {
-  margin-top: 1.5rem;
-}
-
-/* Styles for the unordered list within the results section */
-.results ul {
-  list-style-type: disc;
-  padding-left: 1.5rem;
-  margin-bottom: 1rem;
-}
-
-/* Specific styles for checkbox form groups to align items horizontally */
-.checkbox {
-  flex-direction: row;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-/* Styles for displaying error messages */
-.error {
-  color: #d9534f; /* A shade of red for errors */
-  margin-top: 0.5rem;
-}
-
-/* Styles for displaying status messages (e.g., loading) */
-.status {
-  margin-top: 0.5rem;
-}
-
-/* Styles for the download JSON button */
-.download-button {
-  padding: 0.4rem 0.8rem;
-  font-size: 0.9rem;
-  margin-top: 0;
-  background-color: #007bff; /* A shade of blue */
-  color: #fff;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-}
-
-/* Hover state for the download button */
-.download-button:hover {
-  background-color: #0056b3; /* Darker shade of blue on hover */
-}
-</style>
diff --git a/src/components/MapViewV1.vue b/src/components/MapViewV1.vue
new file mode 100644
index 0000000..a0926d9
--- /dev/null
+++ b/src/components/MapViewV1.vue
@@ -0,0 +1,297 @@
+<template>
+  <div class="page-container map-view">
+    <h2>MapView Component</h2>
+    <form @submit.prevent="handleSubmit" class="map-form">
+      <div class="form-group">
+        <label for="baseUrl">Base URL:</label>
+        <input id="baseUrl" v-model="baseUrl" type="url" placeholder="Enter base URL" required />
+      </div>
+
+      <div class="form-group">
+        <label for="search">Search Query:</label>
+        <input id="search" v-model="search" type="text" placeholder="Optional search terms" />
+      </div>
+
+      <div class="form-group checkbox">
+        <label> <input type="checkbox" v-model="ignoreSitemap" /> Ignore Sitemap </label>
+      </div>
+
+      <div class="form-group checkbox">
+        <label> <input type="checkbox" v-model="sitemapOnly" /> Sitemap Only </label>
+      </div>
+
+      <div class="form-group checkbox">
+        <label> <input type="checkbox" v-model="includeSubdomains" /> Include Subdomains </label>
+      </div>
+
+      <div class="form-group">
+        <label for="limit">Limit:</label>
+        <input id="limit" v-model.number="limit" type="number" min="1" max="30000" />
+      </div>
+
+      <div class="form-group">
+        <label for="timeout">Timeout (ms):</label>
+        <input id="timeout" v-model.number="timeout" type="number" min="0" />
+      </div>
+
+      <button type="submit" class="primary-button">Find URLs</button>
+    </form>
+
+    <div v-if="error" class="error">{{ error }}</div>
+    <div v-if="loading" class="status">Loading...</div>
+
+    <div v-if="urls.length" class="results">
+      <h3>Found URLs</h3>
+      <ul>
+        <li v-for="(url, index) in urls" :key="index">{{ url }}</li>
+      </ul>
+      <button class="download-button" @click="downloadJson">Download JSON</button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, inject } from 'vue';
+import type { MappingApi, MapUrlsRequest } from '@/api-client';
+
+/**
+ * MapView Component
+ *
+ * This component allows users to map URLs starting from a specified base URL.
+ * It provides various options for mapping, including search queries, sitemap handling,
+ * and limits on the number of links to retrieve.
+ */
+
+/**
+ * Injects the API instance provided by the API plugin.
+ * This instance is expected to contain a `mapping` property for URL mapping operations.
+ * @type {{ mapping?: MappingApi } | undefined}
+ */
+const api = inject('api') as { mapping?: MappingApi } | undefined;
+if (!api?.mapping) {
+  throw new Error(
+    'Mapping API is not available. Ensure the API plugin is correctly configured and provides the mapping service.',
+  );
+}
+
+/**
+ * Reactive variable for the base URL entered by the user.
+ * @type {Ref<string>}
+ */
+const baseUrl = ref('');
+
+/**
+ * Reactive variable for the optional search query used when mapping URLs.
+ * @type {Ref<string>}
+ */
+const search = ref('');
+
+/**
+ * Reactive variable to control whether the website sitemap should be ignored during crawling.
+ * Defaults to `true`.
+ * @type {Ref<boolean>}
+ */
+const ignoreSitemap = ref(true);
+
+/**
+ * Reactive variable to control whether only links found in the website sitemap should be returned.
+ * Defaults to `false`.
+ * @type {Ref<boolean>}
+ */
+const sitemapOnly = ref(false);
+
+/**
+ * Reactive variable to control whether subdomains of the website should be included in the mapping.
+ * Defaults to `false`.
+ * @type {Ref<boolean>}
+ */
+const includeSubdomains = ref(false);
+
+/**
+ * Reactive variable for the maximum number of links to return.
+ * Defaults to `5000`.
+ * @type {Ref<number>}
+ */
+const limit = ref(5000);
+
+/**
+ * Reactive variable for the request timeout in milliseconds.
+ * Can be `null` if no timeout is specified.
+ * @type {Ref<number | null>}
+ */
+const timeout = ref<number | null>(null);
+
+/**
+ * Reactive variable to store the list of URLs returned by the API.
+ * @type {Ref<string[]>}
+ */
+const urls = ref<string[]>([]);
+
+/**
+ * Reactive variable indicating whether an API request is currently in progress.
+ * @type {Ref<boolean>}
+ */
+const loading = ref(false);
+
+/**
+ * Reactive variable to hold any error message received from the API call.
+ * @type {Ref<string>}
+ */
+const error = ref('');
+
+/**
+ * Handles the form submission event.
+ * Constructs the payload for the `mapUrls` API request based on user input,
+ * then calls the API to fetch mapped URLs. Manages loading and error states.
+ * @returns {Promise<void>} A promise that resolves when the API call is complete.
+ */
+async function handleSubmit(): Promise<void> {
+  const payload: MapUrlsRequest = {
+    url: baseUrl.value,
+    search: search.value || undefined,
+    ignoreSitemap: ignoreSitemap.value,
+    sitemapOnly: sitemapOnly.value,
+    includeSubdomains: includeSubdomains.value,
+    limit: limit.value || undefined,
+    timeout: timeout.value ?? undefined,
+  };
+
+  loading.value = true;
+  error.value = '';
+  try {
+    const response = await api.mapping.mapUrls(payload);
+    urls.value = response.data.links ?? [];
+  } catch (err: any) {
+    // Cast err to any to access message property safely
+    error.value = err?.message || 'Failed to map URLs. Please check the URL and try again.';
+    urls.value = [];
+  } finally {
+    loading.value = false;
+  }
+}
+
+/**
+ * Initiates the download of the found URLs as a JSON file.
+ * Creates a Blob from the `urls` array and triggers a download via a temporary anchor element.
+ * The temporary link element is appended to the document body and then removed after the click
+ * to ensure compatibility across different browsers and to clean up the DOM.
+ * The Object URL is also revoked to free up resources.
+ * @returns {void}
+ */
+function downloadJson(): void {
+  const blob = new Blob([JSON.stringify(urls.value, null, 2)], {
+    type: 'application/json',
+  });
+  const link = document.createElement('a');
+  link.href = URL.createObjectURL(blob);
+  link.download = 'urls.json';
+  document.body.appendChild(link); // Append to body to ensure it's clickable in all browsers
+  link.click();
+  document.body.removeChild(link); // Clean up the temporary element
+  URL.revokeObjectURL(link.href); // Release the object URL
+}
+</script>
+
+<style scoped>
+/* Styles for the main container of the MapView component */
+.map-view {
+  max-width: 600px;
+  margin: 1rem auto;
+  padding: 1rem;
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  font-family: Arial, sans-serif;
+}
+
+/* Styles for the form that contains mapping options */
+.map-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+/* Styles for individual form groups (label + input) */
+.form-group {
+  display: flex;
+  flex-direction: column;
+}
+
+/* Styles for form labels */
+label {
+  font-weight: bold;
+  margin-bottom: 0.25rem;
+}
+
+/* Styles for URL input and textarea elements */
+input[type='url'],
+textarea {
+  padding: 0.5rem;
+  font-size: 1rem;
+  border: 1px solid #aaa;
+  border-radius: 4px;
+}
+
+/* Styles for all buttons within the component */
+button {
+  align-self: flex-start;
+  padding: 0.5rem 1rem;
+  font-size: 1rem;
+  background-color: #007acc;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+/* Hover state for buttons */
+button:hover {
+  background-color: #005fa3;
+}
+
+/* Styles for the results section */
+.results {
+  margin-top: 1.5rem;
+}
+
+/* Styles for the unordered list within the results section */
+.results ul {
+  list-style-type: disc;
+  padding-left: 1.5rem;
+  margin-bottom: 1rem;
+}
+
+/* Specific styles for checkbox form groups to align items horizontally */
+.checkbox {
+  flex-direction: row;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+/* Styles for displaying error messages */
+.error {
+  color: #d9534f; /* A shade of red for errors */
+  margin-top: 0.5rem;
+}
+
+/* Styles for displaying status messages (e.g., loading) */
+.status {
+  margin-top: 0.5rem;
+}
+
+/* Styles for the download JSON button */
+.download-button {
+  padding: 0.4rem 0.8rem;
+  font-size: 0.9rem;
+  margin-top: 0;
+  background-color: #007bff; /* A shade of blue */
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+/* Hover state for the download button */
+.download-button:hover {
+  background-color: #0056b3; /* Darker shade of blue on hover */
+}
+</style>
diff --git a/src/components/MapViewV2.vue b/src/components/MapViewV2.vue
new file mode 100644
index 0000000..c135064
--- /dev/null
+++ b/src/components/MapViewV2.vue
@@ -0,0 +1,123 @@
+<template>
+  <div class="page-container map-view">
+    <h2>Sitemap (API v2)</h2>
+    <form @submit.prevent="handleSubmit" class="map-form">
+      <div class="form-group">
+        <label for="mapUrl">Base URL:</label>
+        <input id="mapUrl" v-model="url" type="url" placeholder="https://example.com" required />
+      </div>
+      <button type="submit" class="primary-button" :disabled="loading">Fetch Sitemap</button>
+    </form>
+
+    <div v-if="error" class="status error">
+      <div class="error-icon">!</div>
+      <p>{{ error }}</p>
+    </div>
+
+    <div v-if="loading" class="status loading">
+      <div class="spinner"></div>
+      <span>Loading sitemap…</span>
+    </div>
+
+    <div v-if="links.length" class="results">
+      <div class="result-header">
+        <h3>Found URLs</h3>
+        <button class="secondary-button" @click="downloadJson">Download JSON</button>
+      </div>
+      <ul>
+        <li v-for="(link, index) in links" :key="index">{{ link }}</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue';
+import { postV2 } from '@/api/v2Client';
+
+export default defineComponent({
+  name: 'MapViewV2',
+  setup() {
+    const url = ref('');
+    const loading = ref(false);
+    const error = ref('');
+    const links = ref<string[]>([]);
+
+    /**
+     * Sends the sitemap request to the API and stores the resulting links.
+     *
+     * @returns {Promise<void>} Resolves once the request completes.
+     */
+    const handleSubmit = async (): Promise<void> => {
+      loading.value = true;
+      error.value = '';
+      links.value = [];
+      try {
+        const response = await postV2<string[]>('map', { url: url.value });
+        links.value = response.data;
+      } catch (err) {
+        error.value = err instanceof Error ? err.message : 'Failed to fetch sitemap.';
+      } finally {
+        loading.value = false;
+      }
+    };
+
+    /**
+     * Downloads the discovered URLs as a JSON file.
+     */
+    const downloadJson = (): void => {
+      const blob = new Blob([JSON.stringify(links.value, null, 2)], {
+        type: 'application/json',
+      });
+      const link = document.createElement('a');
+      link.href = URL.createObjectURL(blob);
+      link.download = 'sitemap-v2.json';
+      link.click();
+      URL.revokeObjectURL(link.href);
+    };
+
+    return {
+      url,
+      loading,
+      error,
+      links,
+      handleSubmit,
+      downloadJson,
+    };
+  },
+});
+</script>
+
+<style scoped>
+@import '@/assets/main.css';
+
+.map-view {
+  max-width: 600px;
+  margin: 1rem auto;
+  padding: 1rem;
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+}
+
+.map-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.results {
+  margin-top: 1.5rem;
+}
+
+.secondary-button {
+  background-color: #f0f0f0;
+  border: 1px solid var(--color-border);
+  padding: 0.5rem 1rem;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.secondary-button:hover {
+  background-color: #e0e0e0;
+}
+</style>
diff --git a/src/components/SearchView.vue b/src/components/SearchView.vue
index c684a7e..d837eb3 100644
--- a/src/components/SearchView.vue
+++ b/src/components/SearchView.vue
@@ -1,450 +1,20 @@
 <template>
-  <div class="page-container">
-    <form @submit.prevent="onSearch" class="scrape-config-form">
-      <label for="query">Search Query:</label>
-      <input id="query" v-model="query" type="text" placeholder="Enter search terms" required />
-
-      <fieldset class="advanced-options">
-        <legend>Advanced Options</legend>
-        <label>
-          <input type="checkbox" v-model="options.includeMetadata" />
-          Include metadata in results
-        </label>
-        <label>
-          <input type="checkbox" v-model="options.extractContent" />
-          Enable content extraction
-        </label>
-        <label>
-          Max results:
-          <input type="number" v-model.number="options.maxResults" min="1" max="100" />
-        </label>
-        <label>
-          Language:
-          <input type="text" v-model="options.lang" placeholder="en" />
-        </label>
-        <label>
-          Country:
-          <input type="text" v-model="options.country" placeholder="us" />
-        </label>
-        <label>
-          Location:
-          <input type="text" v-model="options.location" />
-        </label>
-        <label>
-          Time range (tbs):
-          <input type="text" v-model="options.tbs" />
-        </label>
-        <label>
-          Timeout (ms):
-          <input type="number" v-model.number="options.timeout" min="0" />
-        </label>
-      </fieldset>
-
-      <button type="submit" class="primary-button">Search</button>
-      <span v-if="loading" class="status">Loading...</span>
-      <span v-if="error" class="status error">{{ error }}</span>
-    </form>
-
-    <section v-if="results.length" class="results">
-      <h2>Search Results</h2>
-      <ul>
-        <li v-for="(result, index) in results" :key="index" class="result-item">
-          <a :href="result.url" target="_blank" rel="noopener noreferrer">{{ result.title }}</a>
-          <div v-if="options.includeMetadata && result.metadata" class="metadata">
-            <small>{{ result.metadata.title }}</small>
-          </div>
-          <!-- Content extraction is available for download but not shown inline -->
-        </li>
-      </ul>
-      <div class="download-section">
-        <h3>Download Results</h3>
-        <div class="download-buttons">
-          <button
-            v-for="fmt in activeFormats"
-            :key="fmt"
-            class="download-button"
-            @click="handleDownload(fmt)"
-          >
-            Download {{ fmt }} Archive
-          </button>
-          <button class="download-button" @click="handleDownload('Full JSON')">
-            Download Full JSON
-          </button>
-        </div>
-      </div>
-    </section>
-  </div>
+  <SearchViewV2 v-if="isV2" />
+  <SearchViewV1 v-else />
 </template>
 
 <script setup lang="ts">
-import { ref, inject, computed } from 'vue';
-import type { SearchApi, SearchRequest } from '@/api-client/search.js';
-import JSZip from 'jszip';
-import { saveAs } from 'file-saver';
-import axios from 'axios';
-
-/**
- * Defines the structure for a single search result item.
- */
-interface SearchResult {
-  title: string;
-  url: string;
-  description?: string;
-  markdown?: string | null;
-  html?: string | null;
-  rawHtml?: string | null;
-  links?: string[];
-  screenshot?: string | null;
-  metadata?: {
-    title?: string;
-    description?: string;
-    sourceURL?: string;
-    statusCode?: number;
-    error?: string | null;
-  };
-}
-
-/**
- * Defines the structure for the search options.
- */
-interface SearchOptions {
-  includeMetadata: boolean;
-  extractContent: boolean;
-  maxResults: number;
-  lang: string;
-  country: string;
-  location: string;
-  tbs: string;
-  timeout?: number;
-}
-
-/**
- * Injects the API client, specifically the search API.
- * Throws an error if the search API is not available.
- */
-const api = inject('api') as { search?: SearchApi } | undefined;
-if (!api?.search) {
-  throw new Error('Search API is not available');
-}
-
-/**
- * Reactive reference for the search query input.
- */
-const query = ref('');
-
-/**
- * Reactive reference for the search options, initialized with default values.
- */
-const options = ref<SearchOptions>({
-  includeMetadata: true,
-  extractContent: false,
-  maxResults: 5,
-  lang: 'en',
-  country: 'us',
-  location: '',
-  tbs: '',
-  timeout: undefined,
-});
-
-/**
- * Reactive flag indicating if a search request is in progress.
- */
-const loading = ref(false);
-/**
- * Reactive string to store any error messages from the search.
- */
-const error = ref('');
-/**
- * Reactive array to store the search results.
- */
-const results = ref<SearchResult[]>([]);
-/**
- * Reactive array to store the formats requested for content extraction.
- */
-const requestedFormats = ref<string[]>([]);
-
-/**
- * Computed property to determine the currently active download formats based on requested formats.
- */
-const activeFormats = computed(() => requestedFormats.value);
-
-/**
- * Execute the search with the current query and options.
- *
- * @returns Promise resolving when the request completes
- */
-async function onSearch(): Promise<void> {
-  results.value = [];
-  error.value = '';
-  loading.value = true;
+import { computed } from 'vue';
+import { useApiVersion } from '@/config/apiVersion';
+import SearchViewV1 from './SearchViewV1.vue';
+import SearchViewV2 from './SearchViewV2.vue';
 
-  const payload: SearchRequest = {
-    query: query.value,
-    limit: options.value.maxResults,
-    ...(options.value.tbs && { tbs: options.value.tbs }),
-    ...(options.value.lang && { lang: options.value.lang }),
-    ...(options.value.country && { country: options.value.country }),
-    ...(options.value.location && { location: options.value.location }),
-    ...(options.value.timeout && { timeout: options.value.timeout }),
-    ...(options.value.extractContent && {
-      scrapeOptions: { formats: ['markdown'] },
-    }),
-  };
-
-  try {
-    const response = await api.search.search(payload);
-    requestedFormats.value = payload.scrapeOptions?.formats ?? [];
-    results.value = (response.data.data || []).map(normalizeResult);
-  } catch (err: any) {
-    error.value = err?.message || 'Search request failed';
-  } finally {
-    loading.value = false;
-  }
-}
-
-/**
- * Normalizes a search result item by fixing potential encoding issues in its string properties.
- * This ensures that displayed content is correctly rendered.
- *
- * @param item - The raw search result object received from the API.
- * @returns A new SearchResult object with string properties normalized.
- */
-function normalizeResult(item: SearchResult): SearchResult {
-  return {
-    ...item,
-    title: fixEncoding(item.title),
-    description: fixEncoding(item.description),
-    markdown: fixEncoding(item.markdown),
-    html: fixEncoding(item.html),
-    rawHtml: fixEncoding(item.rawHtml),
-    metadata: item.metadata
-      ? {
-          ...item.metadata,
-          title: fixEncoding(item.metadata.title),
-          description: fixEncoding(item.metadata.description),
-        }
-      : undefined,
-  };
-}
-
-/**
- * Attempts to fix potential character encoding issues in a given string,
- * specifically trying to convert from Latin-1 to UTF-8 if misencoded.
- * It handles null or undefined input gracefully.
- *
- * @param value - The string that might have encoding issues. Can be null or undefined.
- * @returns The decoded string if successful, or the original value if decoding fails or is not needed.
- *          Returns `undefined` if the input `value` is `null` or `undefined`.
- */
-function fixEncoding(value?: string | null): string | undefined {
-  if (value == null) {
-    return undefined;
-  }
-  try {
-    // Attempt to decode assuming it was originally UTF-8 but escaped as Latin-1
-    const decoded = decodeURIComponent(escape(value));
-    // Check for replacement character (U+FFFD) which indicates decoding failure
-    if (!decoded.includes('\ufffd')) {
-      return decoded;
-    }
-  } catch (e) {
-    // Log or handle decoding errors if necessary, but for now, ignore and try next method
-    console.warn('First decoding attempt failed:', e);
-  }
-  try {
-    // Attempt to decode as UTF-8 from a byte array representation
-    const bytes = Uint8Array.from([...value].map((c) => c.charCodeAt(0)));
-    const decoded = new TextDecoder('utf-8').decode(bytes);
-    if (!decoded.includes('\ufffd')) {
-      return decoded;
-    }
-  } catch (e) {
-    // Log or handle decoding errors if necessary, but for now, ignore
-    console.warn('Second decoding attempt failed:', e);
-  }
-  // If all decoding attempts fail, return the original value
-  return value;
-}
+const { apiVersion } = useApiVersion();
 
 /**
- * Sanitizes a URL to create a valid and readable filename.
- * It removes protocol prefixes, query parameters, hash fragments,
- * and replaces non-alphanumeric characters with underscores.
+ * Indicates whether the v2 search workflow should be active.
  *
- * @param url - The URL string to be sanitized.
- * @returns A sanitized string suitable for use as a filename. Returns 'result' if the sanitized name is empty.
+ * @returns {boolean} True when the v2 API is selected.
  */
-function sanitizeFilename(url: string): string {
-  let name = url.replace(/^https?:\/\//, ''); // Remove http(s)://
-  name = name.replace(/[?#].*$/, ''); // Remove query params and hash
-  name = name.replace(/[^a-zA-Z0-9]+/g, '_'); // Replace non-alphanumeric with underscore
-  return name || 'result'; // Ensure a non-empty filename
-}
-
-/**
- * Handles the download of search results in various formats (e.g., markdown, HTML, screenshots)
- * or as a full JSON export. Results are zipped if multiple files are generated.
- *
- * @param type - The desired format for download (e.g., 'markdown', 'html', 'screenshot', 'Full JSON').
- * @returns A Promise that resolves when the download process is complete.
- */
-async function handleDownload(type: string): Promise<void> {
-  if (!results.value.length) {
-    // If no results are available, do nothing.
-    return;
-  }
-
-  if (type === 'Full JSON') {
-    // Handle full JSON download separately as it's a single file.
-    const blob = new Blob([JSON.stringify(results.value, null, 2)], {
-      type: 'application/json',
-    });
-    saveAs(blob, 'search-results.json');
-    return;
-  }
-
-  const zip = new JSZip();
-  const fetches: Promise<void>[] = []; // Array to hold promises for async operations like screenshot fetches.
-
-  results.value.forEach((page, index) => {
-    const base = sanitizeFilename(page.url || index.toString()); // Create a base filename from the URL or index.
-    const prefix = (index + 1).toString().padStart(3, '0'); // Add a numerical prefix for ordering.
-
-    // Add files to the zip archive based on the requested type.
-    switch (type) {
-      case 'markdown':
-        if (page.markdown) {
-          zip.file(`${prefix}-${base}.md`, page.markdown);
-        }
-        break;
-      case 'html':
-        if (page.html) {
-          zip.file(`${prefix}-${base}.html`, page.html);
-        }
-        break;
-      case 'rawHtml':
-        if (page.rawHtml) {
-          zip.file(`${prefix}-${base}.raw.html`, page.rawHtml);
-        }
-        break;
-      case 'links':
-        if (page.links && page.links.length) {
-          zip.file(`${prefix}-${base}.txt`, page.links.join('\n'));
-        }
-        break;
-      case 'screenshot':
-      case 'screenshot@fullPage': // Both screenshot types are handled similarly for download.
-        if (page.screenshot) {
-          // Fetch screenshot as a blob and add to zip.
-          const p = axios.get(page.screenshot, { responseType: 'blob' }).then((res) => {
-            zip.file(`${prefix}-${base}.png`, res.data);
-          });
-          fetches.push(p); // Add the promise to the fetches array.
-        }
-        break;
-      default:
-        // Do nothing for unsupported types.
-        break;
-    }
-  });
-
-  // Wait for all asynchronous fetches (e.g., screenshots) to complete.
-  await Promise.all(fetches);
-  // Generate the zip file and trigger download.
-  const blob = await zip.generateAsync({ type: 'blob' });
-  saveAs(blob, `search-${type}-archive.zip`);
-}
+const isV2 = computed<boolean>(() => apiVersion.value === 'v2');
 </script>
-
-<!-- Scoped styles for the SearchView component -->
-<style scoped>
-.search-view {
-  max-width: 600px;
-  margin: 0 auto;
-  font-family: Arial, sans-serif;
-}
-
-.search-form {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  margin-bottom: 1rem;
-}
-
-.advanced-options {
-  border: 1px solid #ccc;
-  padding: 0.5rem;
-  margin-top: 0.5rem;
-}
-
-.results {
-  border-top: 1px solid #ccc;
-  padding-top: 1rem;
-}
-
-.result-item {
-  margin-bottom: 1rem;
-}
-
-.result-item a {
-  color: #4fc08d;
-  text-decoration: none;
-}
-
-.result-item a:hover {
-  text-decoration: underline;
-}
-
-.metadata {
-  color: #666;
-  font-size: 0.85rem;
-}
-
-.extract-button {
-  margin-top: 0.25rem;
-  padding: 0.25rem 0.5rem;
-  font-size: 0.9rem;
-  cursor: pointer;
-}
-
-.extracted-content {
-  background-color: #f9f9f9;
-  border-left: 3px solid #007acc;
-  padding: 0.5rem;
-  margin-top: 0.5rem;
-}
-
-.status {
-  margin-left: 0.5rem;
-  font-size: 0.9rem;
-}
-
-.status.error {
-  color: #a94442;
-}
-
-.download-section {
-  margin-top: 20px;
-}
-
-.download-buttons {
-  display: flex;
-  gap: 0.5rem;
-  flex-wrap: wrap;
-}
-
-.download-button {
-  padding: 0.4rem 0.8rem;
-  font-size: 0.9rem;
-  margin-top: 0;
-  background-color: #007bff;
-  color: #fff;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-}
-
-.download-button:hover {
-  background-color: #0056b3;
-}
-</style>
diff --git a/src/components/SearchViewV1.vue b/src/components/SearchViewV1.vue
new file mode 100644
index 0000000..c684a7e
--- /dev/null
+++ b/src/components/SearchViewV1.vue
@@ -0,0 +1,450 @@
+<template>
+  <div class="page-container">
+    <form @submit.prevent="onSearch" class="scrape-config-form">
+      <label for="query">Search Query:</label>
+      <input id="query" v-model="query" type="text" placeholder="Enter search terms" required />
+
+      <fieldset class="advanced-options">
+        <legend>Advanced Options</legend>
+        <label>
+          <input type="checkbox" v-model="options.includeMetadata" />
+          Include metadata in results
+        </label>
+        <label>
+          <input type="checkbox" v-model="options.extractContent" />
+          Enable content extraction
+        </label>
+        <label>
+          Max results:
+          <input type="number" v-model.number="options.maxResults" min="1" max="100" />
+        </label>
+        <label>
+          Language:
+          <input type="text" v-model="options.lang" placeholder="en" />
+        </label>
+        <label>
+          Country:
+          <input type="text" v-model="options.country" placeholder="us" />
+        </label>
+        <label>
+          Location:
+          <input type="text" v-model="options.location" />
+        </label>
+        <label>
+          Time range (tbs):
+          <input type="text" v-model="options.tbs" />
+        </label>
+        <label>
+          Timeout (ms):
+          <input type="number" v-model.number="options.timeout" min="0" />
+        </label>
+      </fieldset>
+
+      <button type="submit" class="primary-button">Search</button>
+      <span v-if="loading" class="status">Loading...</span>
+      <span v-if="error" class="status error">{{ error }}</span>
+    </form>
+
+    <section v-if="results.length" class="results">
+      <h2>Search Results</h2>
+      <ul>
+        <li v-for="(result, index) in results" :key="index" class="result-item">
+          <a :href="result.url" target="_blank" rel="noopener noreferrer">{{ result.title }}</a>
+          <div v-if="options.includeMetadata && result.metadata" class="metadata">
+            <small>{{ result.metadata.title }}</small>
+          </div>
+          <!-- Content extraction is available for download but not shown inline -->
+        </li>
+      </ul>
+      <div class="download-section">
+        <h3>Download Results</h3>
+        <div class="download-buttons">
+          <button
+            v-for="fmt in activeFormats"
+            :key="fmt"
+            class="download-button"
+            @click="handleDownload(fmt)"
+          >
+            Download {{ fmt }} Archive
+          </button>
+          <button class="download-button" @click="handleDownload('Full JSON')">
+            Download Full JSON
+          </button>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, inject, computed } from 'vue';
+import type { SearchApi, SearchRequest } from '@/api-client/search.js';
+import JSZip from 'jszip';
+import { saveAs } from 'file-saver';
+import axios from 'axios';
+
+/**
+ * Defines the structure for a single search result item.
+ */
+interface SearchResult {
+  title: string;
+  url: string;
+  description?: string;
+  markdown?: string | null;
+  html?: string | null;
+  rawHtml?: string | null;
+  links?: string[];
+  screenshot?: string | null;
+  metadata?: {
+    title?: string;
+    description?: string;
+    sourceURL?: string;
+    statusCode?: number;
+    error?: string | null;
+  };
+}
+
+/**
+ * Defines the structure for the search options.
+ */
+interface SearchOptions {
+  includeMetadata: boolean;
+  extractContent: boolean;
+  maxResults: number;
+  lang: string;
+  country: string;
+  location: string;
+  tbs: string;
+  timeout?: number;
+}
+
+/**
+ * Injects the API client, specifically the search API.
+ * Throws an error if the search API is not available.
+ */
+const api = inject('api') as { search?: SearchApi } | undefined;
+if (!api?.search) {
+  throw new Error('Search API is not available');
+}
+
+/**
+ * Reactive reference for the search query input.
+ */
+const query = ref('');
+
+/**
+ * Reactive reference for the search options, initialized with default values.
+ */
+const options = ref<SearchOptions>({
+  includeMetadata: true,
+  extractContent: false,
+  maxResults: 5,
+  lang: 'en',
+  country: 'us',
+  location: '',
+  tbs: '',
+  timeout: undefined,
+});
+
+/**
+ * Reactive flag indicating if a search request is in progress.
+ */
+const loading = ref(false);
+/**
+ * Reactive string to store any error messages from the search.
+ */
+const error = ref('');
+/**
+ * Reactive array to store the search results.
+ */
+const results = ref<SearchResult[]>([]);
+/**
+ * Reactive array to store the formats requested for content extraction.
+ */
+const requestedFormats = ref<string[]>([]);
+
+/**
+ * Computed property to determine the currently active download formats based on requested formats.
+ */
+const activeFormats = computed(() => requestedFormats.value);
+
+/**
+ * Execute the search with the current query and options.
+ *
+ * @returns Promise resolving when the request completes
+ */
+async function onSearch(): Promise<void> {
+  results.value = [];
+  error.value = '';
+  loading.value = true;
+
+  const payload: SearchRequest = {
+    query: query.value,
+    limit: options.value.maxResults,
+    ...(options.value.tbs && { tbs: options.value.tbs }),
+    ...(options.value.lang && { lang: options.value.lang }),
+    ...(options.value.country && { country: options.value.country }),
+    ...(options.value.location && { location: options.value.location }),
+    ...(options.value.timeout && { timeout: options.value.timeout }),
+    ...(options.value.extractContent && {
+      scrapeOptions: { formats: ['markdown'] },
+    }),
+  };
+
+  try {
+    const response = await api.search.search(payload);
+    requestedFormats.value = payload.scrapeOptions?.formats ?? [];
+    results.value = (response.data.data || []).map(normalizeResult);
+  } catch (err: any) {
+    error.value = err?.message || 'Search request failed';
+  } finally {
+    loading.value = false;
+  }
+}
+
+/**
+ * Normalizes a search result item by fixing potential encoding issues in its string properties.
+ * This ensures that displayed content is correctly rendered.
+ *
+ * @param item - The raw search result object received from the API.
+ * @returns A new SearchResult object with string properties normalized.
+ */
+function normalizeResult(item: SearchResult): SearchResult {
+  return {
+    ...item,
+    title: fixEncoding(item.title),
+    description: fixEncoding(item.description),
+    markdown: fixEncoding(item.markdown),
+    html: fixEncoding(item.html),
+    rawHtml: fixEncoding(item.rawHtml),
+    metadata: item.metadata
+      ? {
+          ...item.metadata,
+          title: fixEncoding(item.metadata.title),
+          description: fixEncoding(item.metadata.description),
+        }
+      : undefined,
+  };
+}
+
+/**
+ * Attempts to fix potential character encoding issues in a given string,
+ * specifically trying to convert from Latin-1 to UTF-8 if misencoded.
+ * It handles null or undefined input gracefully.
+ *
+ * @param value - The string that might have encoding issues. Can be null or undefined.
+ * @returns The decoded string if successful, or the original value if decoding fails or is not needed.
+ *          Returns `undefined` if the input `value` is `null` or `undefined`.
+ */
+function fixEncoding(value?: string | null): string | undefined {
+  if (value == null) {
+    return undefined;
+  }
+  try {
+    // Attempt to decode assuming it was originally UTF-8 but escaped as Latin-1
+    const decoded = decodeURIComponent(escape(value));
+    // Check for replacement character (U+FFFD) which indicates decoding failure
+    if (!decoded.includes('\ufffd')) {
+      return decoded;
+    }
+  } catch (e) {
+    // Log or handle decoding errors if necessary, but for now, ignore and try next method
+    console.warn('First decoding attempt failed:', e);
+  }
+  try {
+    // Attempt to decode as UTF-8 from a byte array representation
+    const bytes = Uint8Array.from([...value].map((c) => c.charCodeAt(0)));
+    const decoded = new TextDecoder('utf-8').decode(bytes);
+    if (!decoded.includes('\ufffd')) {
+      return decoded;
+    }
+  } catch (e) {
+    // Log or handle decoding errors if necessary, but for now, ignore
+    console.warn('Second decoding attempt failed:', e);
+  }
+  // If all decoding attempts fail, return the original value
+  return value;
+}
+
+/**
+ * Sanitizes a URL to create a valid and readable filename.
+ * It removes protocol prefixes, query parameters, hash fragments,
+ * and replaces non-alphanumeric characters with underscores.
+ *
+ * @param url - The URL string to be sanitized.
+ * @returns A sanitized string suitable for use as a filename. Returns 'result' if the sanitized name is empty.
+ */
+function sanitizeFilename(url: string): string {
+  let name = url.replace(/^https?:\/\//, ''); // Remove http(s)://
+  name = name.replace(/[?#].*$/, ''); // Remove query params and hash
+  name = name.replace(/[^a-zA-Z0-9]+/g, '_'); // Replace non-alphanumeric with underscore
+  return name || 'result'; // Ensure a non-empty filename
+}
+
+/**
+ * Handles the download of search results in various formats (e.g., markdown, HTML, screenshots)
+ * or as a full JSON export. Results are zipped if multiple files are generated.
+ *
+ * @param type - The desired format for download (e.g., 'markdown', 'html', 'screenshot', 'Full JSON').
+ * @returns A Promise that resolves when the download process is complete.
+ */
+async function handleDownload(type: string): Promise<void> {
+  if (!results.value.length) {
+    // If no results are available, do nothing.
+    return;
+  }
+
+  if (type === 'Full JSON') {
+    // Handle full JSON download separately as it's a single file.
+    const blob = new Blob([JSON.stringify(results.value, null, 2)], {
+      type: 'application/json',
+    });
+    saveAs(blob, 'search-results.json');
+    return;
+  }
+
+  const zip = new JSZip();
+  const fetches: Promise<void>[] = []; // Array to hold promises for async operations like screenshot fetches.
+
+  results.value.forEach((page, index) => {
+    const base = sanitizeFilename(page.url || index.toString()); // Create a base filename from the URL or index.
+    const prefix = (index + 1).toString().padStart(3, '0'); // Add a numerical prefix for ordering.
+
+    // Add files to the zip archive based on the requested type.
+    switch (type) {
+      case 'markdown':
+        if (page.markdown) {
+          zip.file(`${prefix}-${base}.md`, page.markdown);
+        }
+        break;
+      case 'html':
+        if (page.html) {
+          zip.file(`${prefix}-${base}.html`, page.html);
+        }
+        break;
+      case 'rawHtml':
+        if (page.rawHtml) {
+          zip.file(`${prefix}-${base}.raw.html`, page.rawHtml);
+        }
+        break;
+      case 'links':
+        if (page.links && page.links.length) {
+          zip.file(`${prefix}-${base}.txt`, page.links.join('\n'));
+        }
+        break;
+      case 'screenshot':
+      case 'screenshot@fullPage': // Both screenshot types are handled similarly for download.
+        if (page.screenshot) {
+          // Fetch screenshot as a blob and add to zip.
+          const p = axios.get(page.screenshot, { responseType: 'blob' }).then((res) => {
+            zip.file(`${prefix}-${base}.png`, res.data);
+          });
+          fetches.push(p); // Add the promise to the fetches array.
+        }
+        break;
+      default:
+        // Do nothing for unsupported types.
+        break;
+    }
+  });
+
+  // Wait for all asynchronous fetches (e.g., screenshots) to complete.
+  await Promise.all(fetches);
+  // Generate the zip file and trigger download.
+  const blob = await zip.generateAsync({ type: 'blob' });
+  saveAs(blob, `search-${type}-archive.zip`);
+}
+</script>
+
+<!-- Scoped styles for the SearchView component -->
+<style scoped>
+.search-view {
+  max-width: 600px;
+  margin: 0 auto;
+  font-family: Arial, sans-serif;
+}
+
+.search-form {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+}
+
+.advanced-options {
+  border: 1px solid #ccc;
+  padding: 0.5rem;
+  margin-top: 0.5rem;
+}
+
+.results {
+  border-top: 1px solid #ccc;
+  padding-top: 1rem;
+}
+
+.result-item {
+  margin-bottom: 1rem;
+}
+
+.result-item a {
+  color: #4fc08d;
+  text-decoration: none;
+}
+
+.result-item a:hover {
+  text-decoration: underline;
+}
+
+.metadata {
+  color: #666;
+  font-size: 0.85rem;
+}
+
+.extract-button {
+  margin-top: 0.25rem;
+  padding: 0.25rem 0.5rem;
+  font-size: 0.9rem;
+  cursor: pointer;
+}
+
+.extracted-content {
+  background-color: #f9f9f9;
+  border-left: 3px solid #007acc;
+  padding: 0.5rem;
+  margin-top: 0.5rem;
+}
+
+.status {
+  margin-left: 0.5rem;
+  font-size: 0.9rem;
+}
+
+.status.error {
+  color: #a94442;
+}
+
+.download-section {
+  margin-top: 20px;
+}
+
+.download-buttons {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.download-button {
+  padding: 0.4rem 0.8rem;
+  font-size: 0.9rem;
+  margin-top: 0;
+  background-color: #007bff;
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.download-button:hover {
+  background-color: #0056b3;
+}
+</style>
diff --git a/src/components/SearchViewV2.vue b/src/components/SearchViewV2.vue
new file mode 100644
index 0000000..78d4f08
--- /dev/null
+++ b/src/components/SearchViewV2.vue
@@ -0,0 +1,188 @@
+<template>
+  <div class="page-container search-view">
+    <form @submit.prevent="onSearch" class="scrape-config-form">
+      <div class="form-group">
+        <label for="query">Search Query:</label>
+        <input id="query" v-model="query" type="text" placeholder="Enter search terms" required />
+      </div>
+
+      <fieldset class="form-group options-fieldset">
+        <legend>Search Options</legend>
+        <div class="grid-layout">
+          <div class="form-group">
+            <label for="provider">Provider:</label>
+            <select id="provider" v-model="options.provider">
+              <option value="google">Google</option>
+              <option value="serper">Serper</option>
+              <option value="searchapi">SearchAPI</option>
+              <option value="searxng">SearxNG</option>
+            </select>
+          </div>
+          <div class="form-group">
+            <label for="region">Region:</label>
+            <input id="region" v-model="options.region" type="text" placeholder="us-east-1" />
+          </div>
+          <div class="form-group">
+            <label for="maxResults">Max Results:</label>
+            <input
+              id="maxResults"
+              v-model.number="options.maxResults"
+              type="number"
+              min="1"
+              max="50"
+            />
+          </div>
+        </div>
+      </fieldset>
+
+      <button type="submit" class="primary-button" :disabled="loading">Search</button>
+      <span v-if="loading" class="status">Loading...</span>
+      <span v-if="error" class="status error">{{ error }}</span>
+    </form>
+
+    <section v-if="results.length" class="results">
+      <div class="result-header">
+        <h2>Search Results</h2>
+        <button class="secondary-button" @click="downloadResults">Download JSON</button>
+      </div>
+      <ul>
+        <li v-for="(result, index) in results" :key="index" class="result-item">
+          <a :href="result.url" target="_blank" rel="noopener noreferrer">{{ result.title }}</a>
+          <p v-if="result.description">{{ result.description }}</p>
+          <pre v-if="result.content">{{ result.content }}</pre>
+        </li>
+      </ul>
+    </section>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue';
+import { postV2 } from '@/api/v2Client';
+
+interface SearchOptionsV2 {
+  provider: 'google' | 'serper' | 'searchapi' | 'searxng';
+  region: string;
+  maxResults: number;
+}
+
+interface SearchResultV2 {
+  title: string;
+  url: string;
+  description?: string;
+  content?: string;
+}
+
+export default defineComponent({
+  name: 'SearchViewV2',
+  setup() {
+    const query = ref('');
+    const options = ref<SearchOptionsV2>({
+      provider: 'google',
+      region: '',
+      maxResults: 10,
+    });
+    const loading = ref(false);
+    const error = ref('');
+    const results = ref<SearchResultV2[]>([]);
+
+    /**
+     * Executes the search request using the configured options.
+     *
+     * @returns {Promise<void>} Resolves once the request completes.
+     */
+    const onSearch = async (): Promise<void> => {
+      loading.value = true;
+      error.value = '';
+      results.value = [];
+
+      const payload: Record<string, unknown> = {
+        query: query.value,
+        searchOptions: {
+          provider: options.value.provider,
+          ...(options.value.region.trim() ? { region: options.value.region.trim() } : {}),
+          ...(options.value.maxResults ? { maxResults: options.value.maxResults } : {}),
+        },
+      };
+
+      try {
+        const response = await postV2<SearchResultV2[]>('search', payload);
+        results.value = response.data;
+      } catch (err) {
+        error.value = err instanceof Error ? err.message : 'Search request failed.';
+      } finally {
+        loading.value = false;
+      }
+    };
+
+    /**
+     * Downloads the search results as a JSON file.
+     */
+    const downloadResults = (): void => {
+      const blob = new Blob([JSON.stringify(results.value, null, 2)], {
+        type: 'application/json',
+      });
+      const link = document.createElement('a');
+      link.href = URL.createObjectURL(blob);
+      link.download = 'search-results-v2.json';
+      link.click();
+      URL.revokeObjectURL(link.href);
+    };
+
+    return {
+      query,
+      options,
+      loading,
+      error,
+      results,
+      onSearch,
+      downloadResults,
+    };
+  },
+});
+</script>
+
+<style scoped>
+@import '@/assets/main.css';
+
+.search-view {
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.options-fieldset {
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  padding: 1rem;
+  margin-bottom: 1.5rem;
+}
+
+.grid-layout {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 1rem;
+}
+
+.secondary-button {
+  background-color: #f0f0f0;
+  border: 1px solid var(--color-border);
+  padding: 0.5rem 1rem;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.secondary-button:hover {
+  background-color: #e0e0e0;
+}
+
+.result-item {
+  margin-bottom: 1rem;
+}
+
+.result-item pre {
+  background-color: #f7f7f7;
+  padding: 0.5rem;
+  border-radius: 4px;
+  white-space: pre-wrap;
+}
+</style>
diff --git a/src/config/api.ts b/src/config/api.ts
index 6deda21..de0f7d0 100644
--- a/src/config/api.ts
+++ b/src/config/api.ts
@@ -1,30 +1,84 @@
 import { Configuration } from '../api-client/configuration.js';
+import { getStoredApiVersion, setStoredApiVersion, type ApiVersion } from './apiVersion.js';
+
+const BASE_URL_STORAGE_KEYS: Record<ApiVersion, string> = {
+  v1: 'firecrawl_base_url_v1',
+  v2: 'firecrawl_base_url_v2',
+};
+const LEGACY_BASE_URL_KEY = 'firecrawl_base_url';
+const DEFAULT_BASE_URLS: Record<ApiVersion, string> = {
+  v1: 'https://api.firecrawl.dev/v1',
+  v2: 'https://api.firecrawl.dev/v2',
+};
+const API_KEY_STORAGE_KEY = 'firecrawl_api_key';
 
 /**
- * Returns the base URL for the Firecrawl API.
+ * Retrieves the base URL stored for the given API version.
+ * Falls back to the legacy storage key when no version-specific value exists.
  *
- * @returns {string} The base URL from local storage, environment variables or a
- *   default value.
+ * @param {ApiVersion} version - The API version for which the base URL is requested.
+ * @returns {string | null} The stored base URL or null if none is stored.
  */
-const getBaseUrl = (): string => {
-  return (
-    localStorage.getItem('firecrawl_base_url') ||
-    import.meta.env.VITE_FIRECRAWL_API_BASE_URL ||
-    'https://api.firecrawl.dev/v1'
-  );
-};
+function readStoredBaseUrl(version: ApiVersion): string | null {
+  if (typeof window === 'undefined' || !window.localStorage) {
+    return null;
+  }
+  const versionSpecific = window.localStorage.getItem(BASE_URL_STORAGE_KEYS[version]);
+  if (versionSpecific && versionSpecific.trim()) {
+    return versionSpecific.trim();
+  }
+  const legacyValue = window.localStorage.getItem(LEGACY_BASE_URL_KEY);
+  if (legacyValue && legacyValue.trim()) {
+    return legacyValue.trim();
+  }
+  return null;
+}
 
 /**
- * Returns the API key for the Firecrawl API
- * @returns {string} The API key from local storage, environment variables, or empty string
+ * Retrieves the base URL configured through environment variables.
+ *
+ * @param {ApiVersion} version - The API version for which the environment value should be read.
+ * @returns {string | null} The environment base URL or null when not configured.
+ */
+function readEnvBaseUrl(version: ApiVersion): string | null {
+  const env = import.meta.env as Record<string, string | undefined>;
+  if (version === 'v2') {
+    const envValue = env.VITE_FIRECRAWL_API_BASE_URL_V2 || env.VITE_FIRECRAWL_API_BASE_URL;
+    return envValue && envValue.trim() ? envValue.trim() : null;
+  }
+  const envValue = env.VITE_FIRECRAWL_API_BASE_URL;
+  return envValue && envValue.trim() ? envValue.trim() : null;
+}
+
+/**
+ * Resolves the base URL for the provided API version following the priority:
+ * stored value, environment variable, and finally the default URL.
+ *
+ * @param {ApiVersion} version - The API version whose base URL should be resolved.
+ * @returns {string} The base URL to use for API calls.
+ */
+function resolveBaseUrl(version: ApiVersion): string {
+  return readStoredBaseUrl(version) || readEnvBaseUrl(version) || DEFAULT_BASE_URLS[version];
+}
+
+/**
+ * Retrieves the stored API key or falls back to the environment configuration.
+ *
+ * @returns {string} The API key to use for authenticated requests.
  */
 const getApiKey = (): string => {
-  return localStorage.getItem('firecrawl_api_key') || import.meta.env.VITE_FIRECRAWL_API_KEY || '';
+  if (typeof window !== 'undefined' && window.localStorage) {
+    const storedKey = window.localStorage.getItem(API_KEY_STORAGE_KEY);
+    if (storedKey !== null) {
+      return storedKey;
+    }
+  }
+  const env = import.meta.env as Record<string, string | undefined>;
+  return env.VITE_FIRECRAWL_API_KEY || '';
 };
 
-// Initializes the API configuration with base URL, API key, and default headers.
 const apiConfig = new Configuration({
-  basePath: getBaseUrl(),
+  basePath: resolveBaseUrl(getStoredApiVersion()),
   apiKey: getApiKey,
   baseOptions: {
     headers: {
@@ -33,17 +87,13 @@ const apiConfig = new Configuration({
   },
 });
 
-// Dynamically adds the Authorization header if an API key is available.
-// This ensures that authenticated requests are properly handled.
-
-// Dynamically add the Authorization header if an API key is available
-const apiKey = getApiKey();
-if (apiKey) {
+const initialKey = getApiKey();
+if (initialKey) {
   apiConfig.baseOptions = {
     ...apiConfig.baseOptions,
     headers: {
       ...apiConfig.baseOptions?.headers,
-      Authorization: `Bearer ${apiKey}`,
+      Authorization: `Bearer ${initialKey}`,
     },
   };
 }
@@ -51,20 +101,40 @@ if (apiKey) {
 /**
  * Updates the API configuration at runtime.
  *
- * @param baseUrl - Optional new base URL for the API.
- * @param apiKeyValue - Optional new API key.
+ * @param {string | undefined} baseUrl - Optional new base URL for the API.
+ * @param {string | undefined} apiKeyValue - Optional new API key.
+ * @param {ApiVersion | undefined} version - Optional API version to switch to.
+ * @returns {void}
  */
-export function updateApiConfig(baseUrl?: string, apiKeyValue?: string): void {
-  if (typeof baseUrl === 'string') {
-    localStorage.setItem('firecrawl_base_url', baseUrl);
-    apiConfig.basePath = baseUrl || 'https://api.firecrawl.dev/v1';
+export function updateApiConfig(
+  baseUrl?: string,
+  apiKeyValue?: string,
+  version?: ApiVersion,
+): void {
+  const activeVersion = version ?? getStoredApiVersion();
+  if (version) {
+    setStoredApiVersion(version);
+  }
+
+  if (typeof baseUrl === 'string' && typeof window !== 'undefined' && window.localStorage) {
+    const trimmedUrl = baseUrl.trim();
+    if (trimmedUrl) {
+      window.localStorage.setItem(BASE_URL_STORAGE_KEYS[activeVersion], trimmedUrl);
+    } else {
+      window.localStorage.removeItem(BASE_URL_STORAGE_KEYS[activeVersion]);
+    }
+    window.localStorage.removeItem(LEGACY_BASE_URL_KEY);
   }
-  if (typeof apiKeyValue === 'string') {
-    localStorage.setItem('firecrawl_api_key', apiKeyValue);
+
+  if (typeof apiKeyValue === 'string' && typeof window !== 'undefined' && window.localStorage) {
+    window.localStorage.setItem(API_KEY_STORAGE_KEY, apiKeyValue);
     apiConfig.apiKey = apiKeyValue;
   }
 
-  const key = apiKeyValue ?? getApiKey();
+  const resolvedUrl = resolveBaseUrl(activeVersion);
+  apiConfig.basePath = resolvedUrl;
+
+  const key = typeof apiKeyValue === 'string' ? apiKeyValue : getApiKey();
   apiConfig.baseOptions = {
     headers: {
       'Content-Type': 'application/json',
@@ -76,10 +146,39 @@ export function updateApiConfig(baseUrl?: string, apiKeyValue?: string): void {
 /**
  * Retrieve the current API configuration instance.
  *
- * @returns The active API configuration.
+ * @returns {Configuration} The active API configuration.
  */
 export function getApiConfig(): Configuration {
   return apiConfig;
 }
 
+/**
+ * Retrieves the base URL for a specific API version.
+ *
+ * @param {ApiVersion} version - The version whose base URL should be returned.
+ * @returns {string} The resolved base URL.
+ */
+export function getBaseUrlForVersion(version: ApiVersion): string {
+  return resolveBaseUrl(version);
+}
+
+/**
+ * Retrieves the base URL for the currently active API version.
+ *
+ * @returns {string} The base URL configured for the active version.
+ */
+export function getBaseUrl(): string {
+  return resolveBaseUrl(getStoredApiVersion());
+}
+
+/**
+ * Provides the default base URL for the provided API version.
+ *
+ * @param {ApiVersion} version - The API version whose default URL is required.
+ * @returns {string} The default base URL for the version.
+ */
+export function getDefaultBaseUrl(version: ApiVersion): string {
+  return DEFAULT_BASE_URLS[version];
+}
+
 export default apiConfig;
diff --git a/src/config/apiVersion.ts b/src/config/apiVersion.ts
new file mode 100644
index 0000000..5ae5085
--- /dev/null
+++ b/src/config/apiVersion.ts
@@ -0,0 +1,59 @@
+import { ref, type Ref } from 'vue';
+
+export type ApiVersion = 'v1' | 'v2';
+
+const STORAGE_KEY = 'firecrawl_api_version';
+const DEFAULT_VERSION: ApiVersion = 'v1';
+
+/**
+ * Reads the stored API version from local storage.
+ *
+ * @returns {ApiVersion} The stored API version or the default when unavailable.
+ */
+function readStoredVersion(): ApiVersion {
+  if (typeof window === 'undefined' || !window.localStorage) {
+    return DEFAULT_VERSION;
+  }
+  const storedValue = window.localStorage.getItem(STORAGE_KEY);
+  return storedValue === 'v2' ? 'v2' : DEFAULT_VERSION;
+}
+
+const versionRef: Ref<ApiVersion> = ref<ApiVersion>(readStoredVersion());
+
+/**
+ * Retrieves the currently stored API version.
+ *
+ * @returns {ApiVersion} The active API version.
+ */
+export function getStoredApiVersion(): ApiVersion {
+  return versionRef.value;
+}
+
+/**
+ * Persists the API version in local storage and updates the shared reference.
+ *
+ * @param {ApiVersion} version - The API version to persist.
+ * @returns {void}
+ */
+export function setStoredApiVersion(version: ApiVersion): void {
+  if (typeof window !== 'undefined' && window.localStorage) {
+    window.localStorage.setItem(STORAGE_KEY, version);
+  }
+  versionRef.value = version;
+}
+
+/**
+ * Provides reactive accessors for the API version value.
+ *
+ * @returns {{ apiVersion: Ref<ApiVersion>; setApiVersion: (version: ApiVersion) => void }}
+ *   The reactive reference and the setter function.
+ */
+export function useApiVersion(): {
+  apiVersion: Ref<ApiVersion>;
+  setApiVersion: (version: ApiVersion) => void;
+} {
+  return {
+    apiVersion: versionRef,
+    setApiVersion: setStoredApiVersion,
+  };
+}
diff --git a/src/plugins/api.ts b/src/plugins/api.ts
index 6a9b05c..11e9ac0 100644
--- a/src/plugins/api.ts
+++ b/src/plugins/api.ts
@@ -8,6 +8,7 @@ import {
   SearchApi,
 } from '../api-client/index.js';
 import apiConfig, { getApiConfig, updateApiConfig } from '../config/api.js';
+import type { ApiVersion } from '../config/apiVersion.js';
 
 /**
  * Vue plugin responsible for registering and providing various Firecrawl API clients
@@ -50,9 +51,10 @@ const apiPlugin = {
  *
  * @param baseUrl - Optional new base URL.
  * @param apiKey - Optional new API key.
+ * @param version - Optional API version selector.
  */
-export function refreshApiClients(baseUrl?: string, apiKey?: string): void {
-  updateApiConfig(baseUrl, apiKey);
+export function refreshApiClients(baseUrl?: string, apiKey?: string, version?: ApiVersion): void {
+  updateApiConfig(baseUrl, apiKey, version);
   apiClients.billing = new BillingApi(getApiConfig());
   apiClients.crawling = new CrawlingApi(getApiConfig());
   apiClients.extraction = new ExtractionApi(getApiConfig());
diff --git a/src/views/CrawlView.vue b/src/views/CrawlView.vue
index 596a510..2a09081 100644
--- a/src/views/CrawlView.vue
+++ b/src/views/CrawlView.vue
@@ -1,1786 +1,20 @@
 <template>
-  <div class="page-container">
-    <h1>Crawl Configuration</h1>
-    <form class="scrape-config-form" @submit.prevent="handleSubmit">
-      <!-- URL Section -->
-      <div class="form-group">
-        <label for="url">Base URL to Crawl:</label>
-        <input
-          id="url"
-          v-model="formData.url"
-          type="text"
-          required
-          placeholder="https://example.com"
-        />
-      </div>
-
-      <!-- Crawler Options Section -->
-      <fieldset class="form-group options-fieldset">
-        <legend
-          class="collapsible-header"
-          @click="isCrawlerOptionsCollapsed = !isCrawlerOptionsCollapsed"
-        >
-          {{ crawlerOptionsArrow }} Crawler Options
-        </legend>
-        <div v-show="!isCrawlerOptionsCollapsed">
-          <div class="grid-layout">
-            <div class="form-group">
-              <label for="includes">Includes (Regex Patterns):</label>
-              <input
-                id="includes"
-                v-model="includesInput"
-                type="text"
-                placeholder="/blog/.*, /products/.*"
-              />
-              <div v-if="includesError" class="error-message">{{ includesError }}</div>
-              <small>Comma-separated regex patterns. Only matching URLs will be included.</small>
-            </div>
-            <div class="form-group">
-              <label for="excludes">Excludes (Regex Patterns):</label>
-              <input
-                id="excludes"
-                v-model="excludesInput"
-                type="text"
-                placeholder="/login, /private/.*"
-              />
-              <div v-if="excludesError" class="error-message">{{ excludesError }}</div>
-              <small>Comma-separated regex patterns to exclude URLs.</small>
-            </div>
-            <div class="form-group">
-              <label for="maxDepth">Max Depth:</label>
-              <input
-                id="maxDepth"
-                v-model.number="formData.crawlerOptions.maxDepth"
-                type="number"
-                min="1"
-                placeholder="e.g. 3"
-              />
-              <small>Maximum depth relative to the base URL (path segments).</small>
-            </div>
-            <div class="form-group">
-              <label for="maxDiscoveryDepth">Max Discovery Depth:</label>
-              <input
-                id="maxDiscoveryDepth"
-                v-model.number="formData.crawlerOptions.maxDiscoveryDepth"
-                type="number"
-                min="1"
-                placeholder="e.g. 2"
-              />
-              <small>Maximum depth based on discovery order.</small>
-            </div>
-            <div class="form-group">
-              <label for="limit">Page Limit:</label>
-              <input
-                id="limit"
-                v-model.number="formData.crawlerOptions.limit"
-                type="number"
-                min="1"
-                placeholder="e.g. 100"
-              />
-              <small>Maximum number of pages to crawl (default: 10000).</small>
-            </div>
-            <div class="form-group">
-              <label for="delay">Delay (seconds):</label>
-              <input
-                id="delay"
-                v-model.number="formData.crawlerOptions.delay"
-                type="number"
-                min="0"
-                step="0.1"
-                placeholder="e.g. 1.5"
-              />
-              <small>Delay between pages to respect rate limits.</small>
-            </div>
-            <div class="form-group">
-              <label for="statusInterval">Status Check Interval (seconds):</label>
-              <input
-                id="statusInterval"
-                v-model.number="statusCheckInterval"
-                type="number"
-                min="1"
-                placeholder="e.g. 5"
-              />
-              <small>Time between status checks.</small>
-            </div>
-          </div>
-          <div class="grid-layout">
-            <label class="checkbox-label">
-              <input type="checkbox" v-model="formData.crawlerOptions.ignoreSitemap" />
-              Ignore Sitemap
-            </label>
-            <label class="checkbox-label">
-              <input type="checkbox" v-model="formData.crawlerOptions.ignoreQueryParameters" />
-              Ignore Query Parameters
-            </label>
-            <label class="checkbox-label">
-              <input type="checkbox" v-model="formData.crawlerOptions.allowExternalLinks" />
-              Allow External Links
-            </label>
-            <label class="checkbox-label">
-              <input type="checkbox" v-model="formData.crawlerOptions.navigateBacklinks" />
-              Navigate Backlinks
-            </label>
-          </div>
-        </div>
-      </fieldset>
-
-      <!-- Scrape Options Section -->
-      <fieldset class="form-group options-fieldset">
-        <legend
-          class="collapsible-header"
-          @click="isScrapeOptionsCollapsed = !isScrapeOptionsCollapsed"
-        >
-          {{ scrapeOptionsArrow }} Scrape Options
-        </legend>
-        <div v-show="!isScrapeOptionsCollapsed">
-          <div class="form-group">
-            <label for="formats">Output Formats:</label>
-            <select id="formats" v-model="formData.scrapeOptions.formats" multiple>
-              <option value="markdown">Markdown</option>
-              <option value="html">HTML</option>
-              <option value="rawHtml">Raw HTML</option>
-              <option value="links">Links</option>
-              <option value="screenshot">Screenshot (Viewport)</option>
-              <option value="screenshot@fullPage">Screenshot (Full Page)</option>
-              <option value="json">JSON</option>
-              <option value="changeTracking">Change Tracking</option>
-            </select>
-            <small>Select one or more formats.</small>
-          </div>
-          <label class="checkbox-label">
-            <input type="checkbox" v-model="formData.scrapeOptions.onlyMainContent" />
-            Only Main Content (exclude headers, footers, etc.)
-          </label>
-          <div class="form-group">
-            <label for="includeTags">Include Tags (CSS Selectors):</label>
-            <input
-              id="includeTags"
-              v-model="includeTagsInput"
-              type="text"
-              placeholder="article, .main-content"
-              @blur="parseIncludeTags"
-            />
-            <small
-              >Comma-separated CSS selectors. Only content within these tags will be
-              included.</small
-            >
-          </div>
-          <div class="form-group">
-            <label for="excludeTags">Exclude Tags (CSS Selectors):</label>
-            <input
-              id="excludeTags"
-              v-model="excludeTagsInput"
-              type="text"
-              placeholder="footer, .sidebar"
-              @blur="parseExcludeTags"
-            />
-            <small>Comma-separated CSS selectors to exclude content within these tags.</small>
-          </div>
-          <div class="form-group">
-            <label for="timeout">Timeout (ms):</label>
-            <input
-              id="timeout"
-              v-model.number="formData.scrapeOptions.timeout"
-              type="number"
-              min="0"
-            />
-          </div>
-          <label class="checkbox-label">
-            <input type="checkbox" v-model="formData.scrapeOptions.skipTlsVerification" />
-            Skip TLS Verification
-          </label>
-          <label class="checkbox-label">
-            <input type="checkbox" v-model="formData.scrapeOptions.blockAds" />
-            Block Ads
-          </label>
-          <div class="form-group">
-            <label for="proxy">Proxy:</label>
-            <select id="proxy" v-model="formData.scrapeOptions.proxy">
-              <option value="">Default</option>
-              <option value="basic">Basic</option>
-              <option value="stealth">Stealth</option>
-            </select>
-          </div>
-          <div class="form-group">
-            <label for="locationCountry">Location Country:</label>
-            <input
-              id="locationCountry"
-              v-model="formData.scrapeOptions.location.country"
-              type="text"
-              placeholder="US"
-            />
-          </div>
-          <div class="form-group">
-            <label for="locationLanguages">Location Languages:</label>
-            <input
-              id="locationLanguages"
-              v-model="locationLanguagesInput"
-              type="text"
-              placeholder="en-US, fr"
-              @blur="parseLocationLanguages"
-            />
-          </div>
-          <div class="form-group">
-            <label for="jsonSchema">JSON Options Schema (JSON):</label>
-            <textarea id="jsonSchema" v-model="jsonOptionsSchemaInput"></textarea>
-            <div v-if="jsonOptionsSchemaError" class="error-message">
-              {{ jsonOptionsSchemaError }}
-            </div>
-          </div>
-          <div class="form-group">
-            <label for="jsonSystemPrompt">JSON System Prompt:</label>
-            <textarea
-              id="jsonSystemPrompt"
-              v-model="formData.scrapeOptions.jsonOptions.systemPrompt"
-            ></textarea>
-          </div>
-          <div class="form-group">
-            <label for="jsonPrompt">JSON Prompt:</label>
-            <textarea
-              id="jsonPrompt"
-              v-model="formData.scrapeOptions.jsonOptions.prompt"
-            ></textarea>
-          </div>
-          <div class="form-group">
-            <label for="changeModes">Change Tracking Modes:</label>
-            <input
-              id="changeModes"
-              v-model="changeTrackingModesInput"
-              type="text"
-              placeholder="git-diff, json"
-              @blur="parseChangeTrackingModes"
-            />
-          </div>
-          <div class="form-group">
-            <label for="changeSchema">Change Tracking Schema (JSON):</label>
-            <textarea id="changeSchema" v-model="changeTrackingSchemaInput"></textarea>
-            <div v-if="changeTrackingSchemaError" class="error-message">
-              {{ changeTrackingSchemaError }}
-            </div>
-          </div>
-          <div class="form-group">
-            <label for="changePrompt">Change Tracking Prompt:</label>
-            <textarea
-              id="changePrompt"
-              v-model="formData.scrapeOptions.changeTrackingOptions.prompt"
-            ></textarea>
-          </div>
-        </div>
-      </fieldset>
-
-      <!-- Webhook Options Section -->
-      <fieldset class="form-group options-fieldset">
-        <legend
-          class="collapsible-header"
-          @click="isWebhookOptionsCollapsed = !isWebhookOptionsCollapsed"
-        >
-          {{ webhookOptionsArrow }} Webhook Options (Optional)
-        </legend>
-        <div v-show="!isWebhookOptionsCollapsed">
-          <div class="grid-layout">
-            <div class="form-group">
-              <label for="webhookUrl">Webhook URL:</label>
-              <input
-                id="webhookUrl"
-                v-model="formData.webhookOptions.url"
-                type="text"
-                placeholder="https://your-service.com/webhook"
-              />
-            </div>
-            <div class="form-group">
-              <label for="webhookHeaders">Webhook Headers (JSON):</label>
-              <textarea
-                id="webhookHeaders"
-                v-model="webhookHeadersInput"
-                placeholder='{"Authorization": "token"}'
-              ></textarea>
-              <div v-if="webhookHeadersError" class="error-message">
-                {{ webhookHeadersError }}
-              </div>
-            </div>
-            <div class="form-group">
-              <label for="webhookMetadata">Webhook Metadata (JSON):</label>
-              <textarea
-                id="webhookMetadata"
-                v-model="webhookMetadataInput"
-                placeholder='{"source": "ui"}'
-              ></textarea>
-              <div v-if="webhookMetadataError" class="error-message">
-                {{ webhookMetadataError }}
-              </div>
-            </div>
-            <div class="form-group">
-              <label for="webhookEvents">Webhook Events:</label>
-              <select id="webhookEvents" v-model="formData.webhookOptions.events" multiple>
-                <option value="completed">Completed</option>
-                <option value="page">Page</option>
-                <option value="failed">Failed</option>
-                <option value="started">Started</option>
-              </select>
-            </div>
-          </div>
-        </div>
-      </fieldset>
-
-      <button type="submit" class="primary-button">Submit Crawl</button>
-    </form>
-
-    <div v-if="loading" class="status loading">
-      <div class="spinner"></div>
-      <span>Processing your request...</span>
-    </div>
-
-    <div v-if="error" class="status error">
-      <div class="error-icon">!</div>
-      <div>
-        <h3>Error occurred</h3>
-        <p>{{ error }}</p>
-        <button class="primary-button" @click="error = ''">Try again</button>
-      </div>
-    </div>
-
-    <!-- Section for active crawl status -->
-    <div v-if="crawling" class="crawl-status-section">
-      <h2>Crawl Status</h2>
-      <p>Status: {{ crawlStatus }}</p>
-      <div class="progress-container">
-        <div class="progress-bar" :style="{ width: progress + '%' }"></div>
-      </div>
-      <p>{{ progress }}% Completed</p>
-      <p>{{ pagesCompleted }} / {{ totalPages }} pages processed</p>
-      <button class="primary-button" type="button" @click="cancelCurrentCrawl">Cancel Crawl</button>
-    </div>
-
-    <!-- Section for download options after crawl completion -->
-    <div v-if="progress === 100 && crawlStatus === 'completed'" class="download-section">
-      <h2>Download Results</h2>
-      <div class="download-buttons">
-        <label class="checkbox-label">
-          <input type="checkbox" v-model="useSubfolders" />
-          Use subfolders
-        </label>
-        <template v-for="fmt in activeFormats" :key="fmt">
-          <button class="download-button" @click="handleDownload(fmt)">
-            Download {{ fmt }} Archive
-          </button>
-          <button
-            v-if="fmt === 'markdown'"
-            class="download-button"
-            @click="handleDownloadCompiledMarkdown()"
-          >
-            Download compiled Markdown
-          </button>
-        </template>
-        <button class="download-button" @click="handleDownload('Full JSON')">
-          Download Full JSON
-        </button>
-      </div>
-    </div>
-
-    <!-- Section for selected crawl details -->
-    <div v-if="selectedCrawl" class="selected-crawl-details-section">
-      <h2>Details for Crawl ID: {{ selectedCrawl.id }}</h2>
-      <p><strong>URL:</strong> {{ selectedCrawl.url }}</p>
-      <p>
-        <strong>Date:</strong>
-        {{ new Date(selectedCrawl.createdAt).toLocaleString() }}
-      </p>
-      <p><strong>Status:</strong> {{ selectedCrawl.status }}</p>
-
-      <h3>Files</h3>
-      <ul>
-        <li v-for="file in simulatedFiles" :key="file">{{ file }}</li>
-      </ul>
-
-      <div class="download-section">
-        <h3>Download Results</h3>
-        <div class="download-buttons">
-          <label class="checkbox-label">
-            <input type="checkbox" v-model="useSubfolders" />
-            Use subfolders
-          </label>
-          <template v-for="fmt in selectedFormats" :key="fmt">
-            <button class="download-button" @click="handleDownload(fmt, selectedCrawl.id)">
-              Download {{ fmt }} Archive
-            </button>
-            <button
-              v-if="fmt === 'markdown'"
-              class="download-button"
-              @click="handleDownloadCompiledMarkdown(selectedCrawl.id)"
-            >
-              Download compiled Markdown
-            </button>
-          </template>
-          <button class="download-button" @click="handleDownload('Full JSON', selectedCrawl.id)">
-            Download Full JSON
-          </button>
-        </div>
-      </div>
-
-      <button class="primary-button" @click="selectedCrawlId = null">Hide Details</button>
-    </div>
-
-    <!-- Section for crawl history -->
-    <div class="crawl-history-section">
-      <h2>Crawl History</h2>
-      <div v-if="crawlHistory.length > 0">
-        <ul class="history-list">
-          <li
-            v-for="crawl in crawlHistory"
-            :key="crawl.id"
-            :class="['history-item', { 'selected-crawl': selectedCrawlId === crawl.id }]"
-          >
-            <span class="history-info">
-              <strong>{{ crawl.url }}</strong>
-              – {{ new Date(crawl.createdAt).toLocaleString() }} – Status: {{ crawl.status }}
-            </span>
-            <button class="history-button" type="button" @click.prevent="selectCrawl(crawl.id)">
-              View
-            </button>
-          </li>
-        </ul>
-      </div>
-      <div v-else>
-        <p>No crawl history available.</p>
-      </div>
-      <div class="clear-history-wrapper">
-        <button class="primary-button" type="button" @click="clearHistory">Clear History</button>
-      </div>
-    </div>
-  </div>
+  <CrawlViewV2 v-if="isV2" />
+  <CrawlViewV1 v-else />
 </template>
 
-<script lang="ts">
-import { defineComponent, ref, inject, onMounted, onUnmounted, computed, watch } from 'vue';
-import JSZip from 'jszip';
-import { saveAs } from 'file-saver';
-import axios from 'axios';
-import { useRouter } from 'vue-router';
-// Import the crawling API client (adjust import path as needed)
-import {
-  type BillingApi,
-  type CrawlingApi,
-  type ExtractionApi,
-  type MappingApi,
-  type ScrapingApi,
-} from '../api-client/api';
-
-/**
- * Interface for Crawler Options section of the form.
- */
-interface CrawlerOptions {
-  includes?: string[];
-  excludes?: string[];
-  maxDepth?: number;
-  maxDiscoveryDepth?: number;
-  ignoreSitemap?: boolean;
-  ignoreQueryParameters?: boolean;
-  limit?: number;
-  delay?: number;
-  allowExternalLinks?: boolean;
-  navigateBacklinks?: boolean;
-}
-
-/**
- * Interface for Scrape Options section of the form.
- */
-interface ScrapeOptions {
-  formats: string[];
-  onlyMainContent?: boolean;
-  includeTags?: string[];
-  excludeTags?: string[];
-  // Properties from PageOptions moved here to match CrawlUrlsRequestScrapeOptions
-  headers?: object;
-  waitFor?: number;
-  mobile?: boolean;
-  removeBase64Images?: boolean;
-  actions?: any[]; // Based on OpenAPI, actions is an array of Action objects
-  skipTlsVerification?: boolean;
-  timeout?: number;
-  jsonOptions?: {
-    schema?: object;
-    systemPrompt?: string;
-    prompt?: string;
-  };
-  location?: {
-    country?: string;
-    languages?: string[];
-  };
-  blockAds?: boolean;
-  proxy?: string;
-  changeTrackingOptions?: {
-    modes?: string[];
-    schema?: object;
-    prompt?: string;
-  };
-}
-
-/**
- * Interface for Webhook Options section of the form.
- */
-interface WebhookOptions {
-  url?: string;
-  headers?: Record<string, string>;
-  metadata?: Record<string, any>;
-  events?: string[];
-}
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useApiVersion } from '@/config/apiVersion';
+import CrawlViewV1 from './CrawlViewV1.vue';
+import CrawlViewV2 from './CrawlViewV2.vue';
 
-/**
- * Main form data interface for the CrawlView.
- */
-interface FormData {
-  url: string;
-  crawlerOptions: CrawlerOptions;
-  scrapeOptions: ScrapeOptions;
-  webhookOptions: WebhookOptions;
-}
+const { apiVersion } = useApiVersion();
 
 /**
- * Component allowing users to configure and run crawl jobs.
+ * Determines whether the v2 API is selected.
  *
- * @returns Component options for the crawl view.
+ * @returns {boolean} True when the v2 API is active.
  */
-export default defineComponent({
-  name: 'CrawlView',
-  setup() {
-    const router = useRouter();
-    // Define the type of the injected api object based on the structure provided in src/plugins/api.ts
-    const api = inject('api') as {
-      billing: BillingApi;
-      crawling: CrawlingApi;
-      extraction: ExtractionApi;
-      mapping: MappingApi;
-      scraping: ScrapingApi;
-    };
-
-    // Reactive form data with explicit defaults to avoid undefined values.
-    // Use undefined where appropriate to satisfy TypeScript types.
-    const formData = ref<FormData>({
-      url: '',
-      crawlerOptions: {
-        includes: [],
-        excludes: [],
-        maxDepth: undefined,
-        maxDiscoveryDepth: undefined,
-        ignoreSitemap: false,
-        ignoreQueryParameters: false,
-        limit: undefined,
-        delay: undefined,
-        allowExternalLinks: false,
-        navigateBacklinks: false,
-      },
-      scrapeOptions: {
-        formats: ['markdown'],
-        onlyMainContent: true,
-        includeTags: [],
-        excludeTags: [],
-        headers: {},
-        waitFor: undefined,
-        mobile: false,
-        removeBase64Images: false,
-        actions: [],
-        skipTlsVerification: false,
-        timeout: undefined,
-        jsonOptions: {},
-        location: { country: undefined, languages: [] },
-        blockAds: true,
-        proxy: undefined,
-        changeTrackingOptions: {},
-      },
-      webhookOptions: {
-        url: undefined,
-        headers: {},
-        metadata: {},
-        events: [],
-      },
-    });
-
-    // Inputs for includes/excludes as comma-separated strings for user convenience
-    const includesInput = ref('');
-    const excludesInput = ref('');
-    const includeTagsInput = ref('');
-    const excludeTagsInput = ref('');
-    const webhookHeadersInput = ref('');
-    const webhookMetadataInput = ref('');
-    const locationLanguagesInput = ref('');
-    const jsonOptionsSchemaInput = ref('');
-    const changeTrackingSchemaInput = ref('');
-    const changeTrackingModesInput = ref('');
-
-    const includesError = ref('');
-    const excludesError = ref('');
-    const webhookHeadersError = ref('');
-    const webhookMetadataError = ref('');
-    const jsonOptionsSchemaError = ref('');
-    const changeTrackingSchemaError = ref('');
-
-    // State for collapsible sections
-    const isCrawlerOptionsCollapsed = ref(true);
-    const isScrapeOptionsCollapsed = ref(true);
-    const isWebhookOptionsCollapsed = ref(true);
-    const useSubfolders = ref(false);
-    const statusCheckInterval = ref(3);
-
-    const crawlerOptionsArrow = computed(() => (isCrawlerOptionsCollapsed.value ? '▶' : '▼'));
-    const scrapeOptionsArrow = computed(() => (isScrapeOptionsCollapsed.value ? '▶' : '▼'));
-    const webhookOptionsArrow = computed(() => (isWebhookOptionsCollapsed.value ? '▶' : '▼'));
-
-    /**
-     * Parses and validates regex patterns from the includes input.
-     * Updates formData.crawlerOptions.includes when all patterns are valid.
-     */
-    const parseIncludes = (): void => {
-      const patterns = includesInput.value
-        .split(',')
-        .map((s) => s.trim())
-        .filter(Boolean);
-      for (const pattern of patterns) {
-        try {
-          new RegExp(pattern);
-        } catch (e: any) {
-          includesError.value = `Invalid regex pattern: ${pattern}`;
-          return;
-        }
-      }
-      includesError.value = '';
-      formData.value.crawlerOptions.includes = patterns;
-    };
-
-    /**
-     * Parses and validates regex patterns from the excludes input.
-     * Updates formData.crawlerOptions.excludes when all patterns are valid.
-     */
-    const parseExcludes = (): void => {
-      const patterns = excludesInput.value
-        .split(',')
-        .map((s) => s.trim())
-        .filter(Boolean);
-      for (const pattern of patterns) {
-        try {
-          new RegExp(pattern);
-        } catch (e: any) {
-          excludesError.value = `Invalid regex pattern: ${pattern}`;
-          return;
-        }
-      }
-      excludesError.value = '';
-      formData.value.crawlerOptions.excludes = patterns;
-    };
-
-    /**
-     * Parses a comma-separated string of CSS selectors from the includeTags input
-     * and updates the formData.scrapeOptions.includeTags array.
-     */
-    const parseIncludeTags = () => {
-      formData.value.scrapeOptions.includeTags = includeTagsInput.value
-        .split(',')
-        .map((s) => s.trim())
-        .filter(Boolean);
-    };
-
-    /**
-     * Parses a comma-separated string of CSS selectors from the excludeTags input
-     * and updates the formData.scrapeOptions.excludeTags array.
-     */
-    const parseExcludeTags = () => {
-      formData.value.scrapeOptions.excludeTags = excludeTagsInput.value
-        .split(',')
-        .map((s) => s.trim())
-        .filter(Boolean);
-    };
-
-    /**
-     * Parses the webhookHeadersInput string as JSON and updates
-     * formData.webhookOptions.headers. Sets an error message if parsing fails.
-     */
-    const parseWebhookHeaders = (): void => {
-      try {
-        formData.value.webhookOptions.headers = webhookHeadersInput.value
-          ? JSON.parse(webhookHeadersInput.value)
-          : {};
-        webhookHeadersError.value = '';
-      } catch (e: any) {
-        webhookHeadersError.value = `Invalid JSON: ${e.message}`;
-      }
-    };
-
-    /**
-     * Parses the webhookMetadataInput string as JSON and updates
-     * formData.webhookOptions.metadata. Sets an error message if parsing fails.
-     */
-    const parseWebhookMetadata = (): void => {
-      try {
-        formData.value.webhookOptions.metadata = webhookMetadataInput.value
-          ? JSON.parse(webhookMetadataInput.value)
-          : {};
-        webhookMetadataError.value = '';
-      } catch (e: any) {
-        webhookMetadataError.value = `Invalid JSON: ${e.message}`;
-      }
-    };
-
-    /**
-     * Parses a comma-separated string of languages from the locationLanguagesInput
-     * and updates the formData.scrapeOptions.location.languages array.
-     */
-    const parseLocationLanguages = () => {
-      formData.value.scrapeOptions.location = formData.value.scrapeOptions.location || {};
-      formData.value.scrapeOptions.location.languages = locationLanguagesInput.value
-        .split(',')
-        .map((s) => s.trim())
-        .filter(Boolean);
-    };
-
-    /**
-     * Parses the jsonOptionsSchemaInput string as JSON and updates
-     * formData.scrapeOptions.jsonOptions.schema. Sets an error message if parsing fails.
-     */
-    const parseJsonOptionsSchema = (): void => {
-      try {
-        formData.value.scrapeOptions.jsonOptions = formData.value.scrapeOptions.jsonOptions || {};
-        formData.value.scrapeOptions.jsonOptions.schema = jsonOptionsSchemaInput.value
-          ? JSON.parse(jsonOptionsSchemaInput.value)
-          : undefined;
-        jsonOptionsSchemaError.value = '';
-      } catch (e: any) {
-        jsonOptionsSchemaError.value = `Invalid JSON: ${e.message}`;
-      }
-    };
-
-    /**
-     * Parses the changeTrackingSchemaInput string as JSON and updates
-     * formData.scrapeOptions.changeTrackingOptions.schema. Sets an error message if parsing fails.
-     */
-    const parseChangeTrackingSchema = (): void => {
-      try {
-        formData.value.scrapeOptions.changeTrackingOptions =
-          formData.value.scrapeOptions.changeTrackingOptions || {};
-        formData.value.scrapeOptions.changeTrackingOptions.schema = changeTrackingSchemaInput.value
-          ? JSON.parse(changeTrackingSchemaInput.value)
-          : undefined;
-        changeTrackingSchemaError.value = '';
-      } catch (e: any) {
-        changeTrackingSchemaError.value = `Invalid JSON: ${e.message}`;
-      }
-    };
-
-    /**
-     * Parses a comma-separated string of modes from the changeTrackingModesInput
-     * and updates the formData.scrapeOptions.changeTrackingOptions.modes array.
-     */
-    const parseChangeTrackingModes = () => {
-      formData.value.scrapeOptions.changeTrackingOptions =
-        formData.value.scrapeOptions.changeTrackingOptions || {};
-      formData.value.scrapeOptions.changeTrackingOptions.modes = changeTrackingModesInput.value
-        .split(',')
-        .map((s) => s.trim())
-        .filter(Boolean);
-    };
-
-    // Watchers to validate inputs in real time
-    watch(includesInput, parseIncludes, { immediate: true });
-    watch(excludesInput, parseExcludes, { immediate: true });
-    watch(webhookHeadersInput, parseWebhookHeaders, { immediate: true });
-    watch(webhookMetadataInput, parseWebhookMetadata, { immediate: true });
-    watch(jsonOptionsSchemaInput, parseJsonOptionsSchema, { immediate: true });
-    watch(changeTrackingSchemaInput, parseChangeTrackingSchema, { immediate: true });
-
-    const loading = ref(false);
-    const crawling = ref(false);
-    const progress = ref(0);
-    // Number of pages processed so far
-    const pagesCompleted = ref(0);
-    // Total number of pages in the crawl job
-    const totalPages = ref(0);
-    const crawlStatus = ref<string | undefined>('');
-    const error = ref('');
-    const result = ref<any>(null);
-    const currentCrawlId = ref<string | null>(null);
-    const crawlHistory = ref<any[]>([]); // Initialize with empty array
-
-    // State for selected crawl history item
-    const selectedCrawlId = ref<string | null>(null);
-    const simulatedFiles = ref<string[]>([]);
-
-    // LocalStorage key for crawl history
-    const HISTORY_STORAGE_KEY = 'crawlHistory';
-
-    // Computed property to get the selected crawl details
-    const selectedCrawl = computed(() => {
-      return crawlHistory.value.find((crawl) => crawl.id === selectedCrawlId.value);
-    });
-
-    /**
-     * Get the formats requested for the active crawl.
-     * These are taken from the history entry for the current job ID.
-     * @returns {string[]} An array of active formats.
-     */
-    const activeFormats = computed((): string[] => {
-      if (result.value && result.value.id) {
-        const historyItem = crawlHistory.value.find((c) => c.id === result.value.id);
-        return historyItem?.scrapeOptions?.formats || [];
-      }
-      return [];
-    });
-
-    /**
-     * Get the formats requested for the selected crawl history item.
-     * @returns {string[]} An array of selected formats.
-     */
-    const selectedFormats = computed((): string[] => {
-      if (selectedCrawl.value) {
-        return selectedCrawl.value.scrapeOptions?.formats || [];
-      }
-      return [];
-    });
-
-    /**
-     * Save the current crawl history to LocalStorage.
-     */
-    const saveHistory = () => {
-      localStorage.setItem(HISTORY_STORAGE_KEY, JSON.stringify(crawlHistory.value));
-    };
-
-    /**
-     * Clear the crawl history and remove the stored data.
-     */
-    const clearHistory = () => {
-      for (const id in historyIntervalIds) {
-        clearInterval(historyIntervalIds[id]);
-        delete historyIntervalIds[id];
-      }
-      crawlHistory.value = [];
-      selectedCrawlId.value = null;
-      localStorage.removeItem(HISTORY_STORAGE_KEY);
-    };
-
-    /**
-     * Select a crawl from history and sync form fields.
-     * Retrieves file names from the API instead of file content.
-     * @param {string} id - The ID of the selected crawl.
-     */
-    const selectCrawl = async (id: string) => {
-      selectedCrawlId.value = id;
-      simulatedFiles.value = [];
-      error.value = '';
-
-      try {
-        // Fetch files for the selected crawl via the API
-        const response = await api.crawling.getCrawlStatus(id);
-        simulatedFiles.value =
-          response.data.data?.map((page: any, index: number) => {
-            const base = sanitizeFilename(page.metadata?.sourceURL || page.url || index.toString());
-            return `${index.toString().padStart(3, '0')}-${base}`;
-          }) || [];
-        console.log(`Fetched files for crawl ID: ${id}`, response.data);
-
-        // Sync text inputs with values from the selected crawl if available
-        const crawl = crawlHistory.value.find((c) => c.id === id);
-        if (crawl && crawl.crawlerOptions) {
-          includesInput.value = (crawl.crawlerOptions.includes || []).join(', ');
-          excludesInput.value = (crawl.crawlerOptions.excludes || []).join(', ');
-        }
-        if (crawl && crawl.scrapeOptions) {
-          includeTagsInput.value = (crawl.scrapeOptions.includeTags || []).join(', ');
-          excludeTagsInput.value = (crawl.scrapeOptions.excludeTags || []).join(', ');
-          locationLanguagesInput.value = crawl.scrapeOptions.location?.languages?.join(', ') || '';
-          jsonOptionsSchemaInput.value = crawl.scrapeOptions.jsonOptions?.schema
-            ? JSON.stringify(crawl.scrapeOptions.jsonOptions.schema)
-            : '';
-          changeTrackingSchemaInput.value = crawl.scrapeOptions.changeTrackingOptions?.schema
-            ? JSON.stringify(crawl.scrapeOptions.changeTrackingOptions.schema)
-            : '';
-          changeTrackingModesInput.value =
-            crawl.scrapeOptions.changeTrackingOptions?.modes?.join(', ') || '';
-        }
-      } catch (err: any) {
-        console.error(`Error fetching crawl files for ID ${id}:`, err);
-        error.value = `Failed to fetch crawl files for ID ${id}. ${err.message || err}`;
-      }
-    };
-
-    /**
-     * Retrieve all pages for a crawl job, following pagination if necessary.
-     * @param {string} jobId - The crawl job identifier.
-     * @returns {Promise<any[]>} A promise that resolves to an array of page data objects.
-     */
-    const fetchAllCrawlData = async (jobId: string): Promise<any[]> => {
-      const pages: any[] = [];
-      let response = await api.crawling.getCrawlStatus(jobId);
-      pages.push(...(response.data.data || []));
-      let next = response.data.next;
-      while (next) {
-        const nextResp = await axios.get(next);
-        pages.push(...(nextResp.data.data || []));
-        next = nextResp.data.next;
-      }
-      return pages;
-    };
-
-    /**
-     * Sanitize a URL so it can be safely used as part of a filename.
-     * Replaces protocol, query parameters, hash, and non-alphanumeric characters with underscores.
-     * @param {string} url - The URL to sanitize.
-     * @returns {string} A filename-safe string derived from the URL.
-     */
-    function sanitizeFilename(url: string): string {
-      let name = url.replace(/^https?:\/\//, '');
-      name = name.replace(/[?#].*$/, '');
-      name = name.replace(/[^a-zA-Z0-9]+/g, '_');
-      return name || 'page';
-    }
-
-    /**
-     * Sanitize a path segment for safe folder or file names.
-     *
-     * @param segment - The path segment to sanitize.
-     * @returns The sanitized segment.
-     */
-    function sanitizeSegment(segment: string): string {
-      return segment.replace(/[^a-zA-Z0-9]+/g, '_') || 'part';
-    }
-
-    /**
-     * Get folder structure and file name for a URL.
-     *
-     * @param url - The source URL.
-     * @param ext - The desired file extension.
-     * @returns Folder segments and final file name.
-     */
-    function getPathInfo(url: string, ext: string): { folders: string[]; filename: string } {
-      try {
-        const { pathname } = new URL(url);
-        const trimmed = pathname.replace(/\/+$/, '');
-        const segments = trimmed.split('/').filter(Boolean).map(sanitizeSegment);
-        if (segments.length === 0) {
-          return { folders: [], filename: `index.${ext}` };
-        }
-        let last = segments[segments.length - 1];
-        if (last.includes('.')) {
-          last = last.replace(/\.[^.]+$/, '');
-          segments.pop();
-        }
-        const base = last || 'index';
-        return { folders: segments, filename: `${base}.${ext}` };
-      } catch {
-        return { folders: [], filename: `index.${ext}` };
-      }
-    }
-
-    /**
-     * Map a format to its file extension.
-     *
-     * @param format - The export format.
-     * @returns The corresponding file extension.
-     */
-    function getExtension(format: string): string {
-      switch (format) {
-        case 'markdown':
-          return 'md';
-        case 'html':
-          return 'html';
-        case 'rawHtml':
-          return 'raw.html';
-        case 'links':
-          return 'txt';
-        case 'json':
-        case 'changeTracking':
-          return 'json';
-        case 'screenshot':
-        case 'screenshot@fullPage':
-          return 'png';
-        default:
-          return 'txt';
-      }
-    }
-
-    /**
-     * Handles the download of crawl results.
-     * Calls the appropriate API endpoint based on the download type ('Archive' or 'Full JSON').
-     * Creates a Blob from the response and triggers a file download.
-     * @param {string} type - The type of download (e.g., 'markdown', 'html', 'Full JSON').
-     * @param {string} [jobIdParam] - Optional job ID to download specific crawl results from history.
-     */
-    const handleDownload = async (type: string, jobIdParam?: string) => {
-      console.log(`Handling download of ${type}.`);
-      error.value = '';
-
-      const jobId = jobIdParam || result.value?.id;
-      if (!jobId) {
-        error.value = 'No crawl job found to download results.';
-        console.error('Attempted to download without a crawl job identifier.');
-        return;
-      }
-
-      try {
-        const pages = await fetchAllCrawlData(jobId);
-
-        if (type === 'Full JSON') {
-          const blob = new Blob([JSON.stringify(pages, null, 2)], {
-            type: 'application/json',
-          });
-          saveAs(blob, `crawl-result-${jobId}.json`);
-          return;
-        }
-
-        const zip = new JSZip();
-        const fetches: Promise<void>[] = [];
-
-        // Build folder prefix counts to avoid creating single-file folders
-        const prefixCounts: Record<string, number> = {};
-        pages.forEach((p, i) => {
-          const name = p.metadata?.sourceURL || p.url || i.toString();
-          const info = getPathInfo(name, getExtension(type));
-          let prefix = '';
-          info.folders.forEach((seg) => {
-            prefix = prefix ? `${prefix}/${seg}` : seg;
-            prefixCounts[prefix] = (prefixCounts[prefix] || 0) + 1;
-          });
-        });
-
-        pages.forEach((page, index) => {
-          const urlForName = page.metadata?.sourceURL || page.url || index.toString();
-          const base = sanitizeFilename(urlForName);
-          const prefix = index.toString().padStart(3, '0');
-          const ext = getExtension(type);
-          const pathInfo = getPathInfo(urlForName, ext);
-          let folderSegments: string[] = [];
-          if (useSubfolders.value) {
-            let prefixPath = '';
-            folderSegments = pathInfo.folders.filter((seg) => {
-              prefixPath = prefixPath ? `${prefixPath}/${seg}` : seg;
-              return prefixCounts[prefixPath] > 1;
-            });
-          }
-          const addFile = (data: string | Blob) => {
-            if (useSubfolders.value && folderSegments.length > 0) {
-              let folder = zip;
-              folderSegments.forEach((seg) => {
-                folder = folder.folder(seg);
-              });
-              folder.file(pathInfo.filename, data);
-            } else {
-              zip.file(`${prefix}-${base}.${ext}`, data);
-            }
-          };
-          switch (type) {
-            case 'markdown':
-              if (page.markdown) {
-                addFile(page.markdown);
-              }
-              break;
-            case 'html':
-              if (page.html) {
-                addFile(page.html);
-              }
-              break;
-            case 'rawHtml':
-              if (page.rawHtml) {
-                addFile(page.rawHtml);
-              }
-              break;
-            case 'links':
-              if (page.links) {
-                addFile(page.links.join('\n'));
-              }
-              break;
-            case 'json':
-              if (page.llm_extraction) {
-                addFile(JSON.stringify(page.llm_extraction, null, 2));
-              }
-              break;
-            case 'changeTracking':
-              if (page.changeTracking) {
-                addFile(JSON.stringify(page.changeTracking, null, 2));
-              }
-              break;
-            case 'screenshot':
-            case 'screenshot@fullPage':
-              if (page.screenshot) {
-                const p = axios.get(page.screenshot, { responseType: 'blob' }).then((res) => {
-                  addFile(res.data);
-                });
-                fetches.push(p);
-              }
-              break;
-            default:
-              console.warn(`Unknown format: ${type}`);
-          }
-        });
-
-        await Promise.all(fetches);
-        const blob = await zip.generateAsync({ type: 'blob' });
-        saveAs(blob, `crawl-${type}-archive-${jobId}.zip`);
-      } catch (err: any) {
-        console.error(`Error during ${type} download for job ID ${jobId}:`, err);
-        error.value = `Failed to download ${type}. ${err.message || err}`;
-      }
-    };
-
-    /**
-     * Increase markdown heading levels.
-     *
-     * @param markdown - The markdown string to modify.
-     * @param increment - How many levels to increase.
-     * @returns The adjusted markdown string.
-     */
-    const incrementHeadings = (markdown: string, increment: number): string => {
-      return markdown.replace(/^(#{1,6})(?=\s)/gm, (match) => {
-        const newLevel = Math.min(6, match.length + increment);
-        return '#'.repeat(newLevel);
-      });
-    };
-
-    /**
-     * Compile all markdown pages into a single document.
-     *
-     * @param pages - Array of page objects containing markdown.
-     * @param title - Title for the compiled document.
-     * @returns The compiled markdown string.
-     */
-    const compileMarkdown = (pages: any[], title: string): string => {
-      const sections: string[] = [`# ${title}`];
-      pages.forEach((page, index) => {
-        const pageTitle =
-          page.metadata?.title || page.metadata?.sourceURL || page.url || `Page ${index + 1}`;
-        sections.push(`\n## ${pageTitle}\n`);
-        if (page.markdown) {
-          sections.push(incrementHeadings(page.markdown, 1));
-        }
-      });
-      return sections.join('\n');
-    };
-
-    /**
-     * Download all markdown files compiled into a single document.
-     *
-     * @param jobIdParam - Optional job ID for history downloads.
-     */
-    const handleDownloadCompiledMarkdown = async (jobIdParam?: string): Promise<void> => {
-      error.value = '';
-      const jobId = jobIdParam || result.value?.id;
-      if (!jobId) {
-        error.value = 'No crawl job found to download results.';
-        return;
-      }
-      try {
-        const pages = await fetchAllCrawlData(jobId);
-        const compiled = compileMarkdown(pages, 'Compiled Crawl Results');
-        const blob = new Blob([compiled], { type: 'text/markdown' });
-        saveAs(blob, `crawl-compiled-${jobId}.md`);
-      } catch (err: any) {
-        console.error(`Error compiling markdown for job ID ${jobId}:`, err);
-        error.value = `Failed to compile markdown. ${err.message || err}`;
-      }
-    };
-
-    /**
-     * Validate a URL string.
-     * @param {string} url - The URL to validate.
-     * @returns {boolean} True if valid, false otherwise.
-     */
-    const isValidUrl = (url: string): boolean => {
-      try {
-        new URL(url);
-        return true;
-      } catch {
-        return false;
-      }
-    };
-
-    /**
-     * Handles the form submission for a crawl job.
-     * Parses all input fields, validates the URL and formats,
-     * constructs the API payload, calls the crawling API,
-     * and manages the UI state (loading, progress, errors, history).
-     * @returns {Promise<void>} A promise that resolves when the submission process is complete.
-     */
-    const handleSubmit = async (): Promise<void> => {
-      // Parse all comma-separated inputs and JSON fields before submission
-      parseIncludes();
-      parseExcludes();
-      parseIncludeTags();
-      parseExcludeTags();
-      parseLocationLanguages();
-      parseJsonOptionsSchema();
-      parseChangeTrackingSchema();
-      parseChangeTrackingModes();
-      parseWebhookHeaders();
-      parseWebhookMetadata();
-
-      if (
-        includesError.value ||
-        excludesError.value ||
-        webhookHeadersError.value ||
-        webhookMetadataError.value ||
-        jsonOptionsSchemaError.value ||
-        changeTrackingSchemaError.value
-      ) {
-        error.value = 'Please fix the errors above before submitting';
-        return;
-      }
-
-      // Basic form validation
-      if (!isValidUrl(formData.value.url)) {
-        error.value = 'Please enter a valid URL (e.g. https://example.com)';
-        return;
-      }
-      if (
-        !formData.value.scrapeOptions.formats ||
-        formData.value.scrapeOptions.formats.length === 0
-      ) {
-        error.value = 'Please select at least one output format';
-        return;
-      }
-
-      // Build the request payload and only include defined options
-      const payload: any = { url: formData.value.url };
-
-      const crawler = formData.value.crawlerOptions;
-      if (crawler.excludes && crawler.excludes.length > 0) payload.excludePaths = crawler.excludes;
-      if (crawler.includes && crawler.includes.length > 0) payload.includePaths = crawler.includes;
-      if (crawler.maxDepth !== undefined) payload.maxDepth = crawler.maxDepth;
-      if (crawler.maxDiscoveryDepth !== undefined)
-        payload.maxDiscoveryDepth = crawler.maxDiscoveryDepth;
-      if (crawler.ignoreSitemap) payload.ignoreSitemap = true;
-      if (crawler.ignoreQueryParameters) payload.ignoreQueryParameters = true;
-      if (crawler.limit !== undefined) payload.limit = crawler.limit;
-      if (crawler.delay !== undefined) payload.delay = crawler.delay;
-      if (crawler.navigateBacklinks) payload.allowBackwardLinks = true;
-      if (crawler.allowExternalLinks) payload.allowExternalLinks = true;
-
-      const scrape = formData.value.scrapeOptions;
-      const scrapePayload: any = {};
-      if (scrape.formats && scrape.formats.length > 0) scrapePayload.formats = scrape.formats;
-      // Only include onlyMainContent if it's explicitly false, as default is true
-      if (scrape.onlyMainContent === false) scrapePayload.onlyMainContent = false;
-      if (scrape.includeTags && scrape.includeTags.length > 0)
-        scrapePayload.includeTags = scrape.includeTags;
-      if (scrape.excludeTags && scrape.excludeTags.length > 0)
-        scrapePayload.excludeTags = scrape.excludeTags;
-      if (scrape.headers && Object.keys(scrape.headers).length > 0)
-        scrapePayload.headers = scrape.headers;
-      if (scrape.waitFor !== undefined) scrapePayload.waitFor = scrape.waitFor;
-      if (scrape.mobile) scrapePayload.mobile = true;
-      if (scrape.removeBase64Images) scrapePayload.removeBase64Images = true;
-      if (scrape.actions && scrape.actions.length > 0) scrapePayload.actions = scrape.actions;
-      if (scrape.skipTlsVerification) scrapePayload.skipTlsVerification = true;
-      if (scrape.timeout !== undefined) scrapePayload.timeout = scrape.timeout;
-      if (scrape.jsonOptions) {
-        const jsonOpts: any = {};
-        if (scrape.jsonOptions.schema) jsonOpts.schema = scrape.jsonOptions.schema;
-        if (scrape.jsonOptions.systemPrompt)
-          jsonOpts.systemPrompt = scrape.jsonOptions.systemPrompt;
-        if (scrape.jsonOptions.prompt) jsonOpts.prompt = scrape.jsonOptions.prompt;
-        if (Object.keys(jsonOpts).length > 0) scrapePayload.jsonOptions = jsonOpts;
-      }
-      if (scrape.location) {
-        const loc: any = {};
-        if (scrape.location.country) loc.country = scrape.location.country;
-        if (scrape.location.languages && scrape.location.languages.length > 0)
-          loc.languages = scrape.location.languages;
-        if (Object.keys(loc).length > 0) scrapePayload.location = loc;
-      }
-      // Only include blockAds if it's explicitly false, as default is true
-      if (scrape.blockAds === false) scrapePayload.blockAds = false;
-      if (scrape.proxy) scrapePayload.proxy = scrape.proxy;
-      if (scrape.changeTrackingOptions) {
-        const change: any = {};
-        if (scrape.changeTrackingOptions.modes && scrape.changeTrackingOptions.modes.length > 0)
-          change.modes = scrape.changeTrackingOptions.modes;
-        if (scrape.changeTrackingOptions.schema)
-          change.schema = scrape.changeTrackingOptions.schema;
-        if (scrape.changeTrackingOptions.prompt)
-          change.prompt = scrape.changeTrackingOptions.prompt;
-        if (Object.keys(change).length > 0) scrapePayload.changeTrackingOptions = change;
-      }
-
-      if (Object.keys(scrapePayload).length > 0) payload.scrapeOptions = scrapePayload;
-
-      // Include webhook options only when a URL is provided
-      if (formData.value.webhookOptions.url && formData.value.webhookOptions.url !== '') {
-        payload.webhook = {
-          url: formData.value.webhookOptions.url,
-        } as any;
-
-        if (
-          formData.value.webhookOptions.headers &&
-          Object.keys(formData.value.webhookOptions.headers).length > 0
-        ) {
-          payload.webhook.headers = formData.value.webhookOptions.headers;
-        }
-        if (
-          formData.value.webhookOptions.metadata &&
-          Object.keys(formData.value.webhookOptions.metadata).length > 0
-        ) {
-          payload.webhook.metadata = formData.value.webhookOptions.metadata;
-        }
-        if (
-          formData.value.webhookOptions.events &&
-          formData.value.webhookOptions.events.length > 0
-        ) {
-          payload.webhook.events = formData.value.webhookOptions.events;
-        }
-      }
-
-      try {
-        loading.value = true;
-        crawling.value = true;
-        progress.value = 0;
-        pagesCompleted.value = 0;
-        totalPages.value = 0;
-        error.value = '';
-        result.value = null;
-        currentCrawlId.value = null;
-
-        // Call the crawling API to submit the crawl job
-        const response = await api.crawling.crawlUrls(payload);
-        result.value = response.data;
-
-        // Add the submitted job to history
-        if (response.data && response.data.id) {
-          currentCrawlId.value = response.data.id;
-          crawlHistory.value.unshift({
-            // Add to the beginning of the array
-            id: response.data.id,
-            url: formData.value.url,
-            createdAt: new Date().toISOString(), // Use current time for creation date
-            status: 'started', // Initial status
-            crawlerOptions: { ...formData.value.crawlerOptions }, // Store a copy of options
-            scrapeOptions: { ...formData.value.scrapeOptions },
-            webhookOptions: { ...formData.value.webhookOptions },
-          });
-          saveHistory(); // Save history after adding a new job
-          fetchCrawlStatus(response.data.id);
-          loading.value = false; // hide loading spinner once polling starts
-        }
-      } catch (err: unknown) {
-        if (err instanceof Error) {
-          if (err.message.includes('401')) {
-            router.push({ name: 'ApiConfig' });
-            return;
-          }
-          error.value = err.message.includes('404')
-            ? 'Resource not found (404)'
-            : err.message.includes('Network Error')
-              ? 'Network connection failed'
-              : err.message;
-        } else {
-          error.value = 'An unexpected error occurred';
-        }
-        loading.value = false; // Stop loading on error
-        crawling.value = false; // Stop crawling animation on error
-        currentCrawlId.value = null;
-      }
-    };
-
-    /**
-     * Cancel the currently running crawl job.
-     * Stops status polling and updates the UI state accordingly.
-     */
-    const cancelCurrentCrawl = async (): Promise<void> => {
-      if (!currentCrawlId.value) {
-        return;
-      }
-      try {
-        await api.crawling.cancelCrawl(currentCrawlId.value);
-        if (intervalId) {
-          clearInterval(intervalId);
-          intervalId = null;
-        }
-        crawlStatus.value = 'cancelled';
-        crawling.value = false;
-        const historyItem = crawlHistory.value.find((c) => c.id === currentCrawlId.value);
-        if (historyItem) {
-          historyItem.status = 'cancelled';
-          saveHistory();
-        }
-        currentCrawlId.value = null;
-      } catch (err: any) {
-        error.value = `Failed to cancel crawl: ${err.message || 'Unknown error'}`;
-      }
-    };
-
-    // Interval ID for polling crawl status
-    let intervalId: ReturnType<typeof setInterval> | null = null;
-    const historyIntervalIds: Record<string, ReturnType<typeof setInterval>> = {};
-
-    /**
-     * Fetch crawl status and progress periodically from the API.
-     * Clears any existing interval before starting a new one.
-     * Updates reactive variables with the latest status, completed pages, and total pages.
-     * Stops polling when the crawl job is completed or failed.
-     * @param {string} jobId - The ID of the crawl job.
-     */
-    const fetchCrawlStatus = async (jobId: string) => {
-      // Clear any existing interval before starting a new one
-      if (intervalId) {
-        clearInterval(intervalId);
-      }
-
-      intervalId = setInterval(async () => {
-        try {
-          // Call the actual API endpoint to get the crawl status
-          const response = await api.crawling.getCrawlStatus(jobId);
-          const data = response.data;
-
-          // Update reactive variables with real data
-          crawlStatus.value = data.status;
-          pagesCompleted.value = data.completed || 0;
-          totalPages.value = data.total || 0;
-          // Calculate progress based on completed vs total pages
-          if (
-            data.total !== undefined &&
-            data.total > 0 &&
-            data.completed !== undefined &&
-            data.completed >= 0
-          ) {
-            progress.value = Math.round((data.completed / data.total) * 100);
-          } else {
-            progress.value = 0; // Or handle as appropriate if total is 0 or completed is undefined/negative
-          }
-
-          console.log(
-            `Crawl status for ${jobId}: ${data.status}, Completed: ${data.completed}/${data.total}`,
-          );
-
-          const historyItem = crawlHistory.value.find((c) => c.id === jobId);
-          if (historyItem) {
-            historyItem.status = data.status;
-            saveHistory();
-          }
-
-          // Stop polling when completed or failed
-          if (data.status === 'completed' || data.status === 'failed') {
-            clearInterval(intervalId);
-            intervalId = null; // Clear intervalId after clearing interval
-            crawling.value = false; // Update crawling state
-            currentCrawlId.value = null;
-            saveHistory(); // Save history when status changes to completed or failed
-          }
-        } catch (err: any) {
-          console.error('Failed to fetch crawl status:', err);
-          // Stop polling on error
-          clearInterval(intervalId);
-          intervalId = null;
-          crawling.value = false;
-          crawlStatus.value = 'failed'; // Indicate failure in UI
-          currentCrawlId.value = null;
-          error.value = `Failed to fetch crawl status: ${err.message || 'Unknown error'}`;
-          const historyItem = crawlHistory.value.find((c) => c.id === jobId);
-          if (historyItem) {
-            historyItem.status = 'failed';
-            saveHistory();
-          }
-        }
-      }, statusCheckInterval.value * 1000);
-    };
-
-    /**
-     * Check the status of a crawl from history and update its record.
-     * Starts polling if the crawl is still running.
-     * @param crawl - History entry to check.
-     */
-    const checkHistoryStatus = async (crawl: any) => {
-      try {
-        const response = await api.crawling.getCrawlStatus(crawl.id);
-        crawl.status = response.data.status;
-        saveHistory();
-        if (crawl.status !== 'completed' && crawl.status !== 'failed') {
-          startHistoryPolling(crawl.id);
-        }
-      } catch (err) {
-        console.error(`Failed to fetch status for crawl ${crawl.id}:`, err);
-        crawl.status = 'unavailable';
-        saveHistory();
-      }
-    };
-
-    /**
-     * Start polling status for a specific history entry.
-     * @param id - Crawl job identifier.
-     */
-    const startHistoryPolling = (id: string) => {
-      stopHistoryPolling(id);
-      historyIntervalIds[id] = setInterval(async () => {
-        const crawl = crawlHistory.value.find((c) => c.id === id);
-        if (!crawl) {
-          stopHistoryPolling(id);
-          return;
-        }
-        try {
-          const response = await api.crawling.getCrawlStatus(id);
-          crawl.status = response.data.status;
-          saveHistory();
-          if (crawl.status === 'completed' || crawl.status === 'failed') {
-            stopHistoryPolling(id);
-          }
-        } catch (err) {
-          console.error(`Polling failed for crawl ${id}:`, err);
-          crawl.status = 'unavailable';
-          saveHistory();
-          stopHistoryPolling(id);
-        }
-      }, statusCheckInterval.value * 1000);
-    };
-
-    /**
-     * Stop polling status for a specific history entry.
-     * @param id - Crawl job identifier.
-     */
-    const stopHistoryPolling = (id: string) => {
-      const intId = historyIntervalIds[id];
-      if (intId) {
-        clearInterval(intId);
-        delete historyIntervalIds[id];
-      }
-    };
-
-    onMounted(async () => {
-      // Load history from LocalStorage on component mount
-      const savedHistory = localStorage.getItem(HISTORY_STORAGE_KEY);
-      if (savedHistory) {
-        try {
-          crawlHistory.value = JSON.parse(savedHistory);
-        } catch (e) {
-          console.error('Failed to parse crawl history from LocalStorage:', e);
-        }
-      }
-      await Promise.all(crawlHistory.value.map((c) => checkHistoryStatus(c)));
-    });
-
-    // Cleanup polling interval when the component unmounts
-    onUnmounted(() => {
-      if (intervalId) {
-        clearInterval(intervalId);
-        intervalId = null;
-      }
-      for (const id in historyIntervalIds) {
-        clearInterval(historyIntervalIds[id]);
-        delete historyIntervalIds[id];
-      }
-    });
-
-    return {
-      formData,
-      includesInput,
-      excludesInput,
-      includeTagsInput,
-      excludeTagsInput,
-      webhookHeadersInput,
-      webhookMetadataInput,
-      locationLanguagesInput,
-      jsonOptionsSchemaInput,
-      changeTrackingSchemaInput,
-      changeTrackingModesInput,
-      includesError,
-      excludesError,
-      webhookHeadersError,
-      webhookMetadataError,
-      jsonOptionsSchemaError,
-      changeTrackingSchemaError,
-      parseIncludeTags,
-      parseExcludeTags,
-      parseLocationLanguages,
-      parseChangeTrackingModes,
-      loading,
-      crawling,
-      progress,
-      pagesCompleted,
-      totalPages,
-      crawlStatus,
-      error,
-      result,
-      handleSubmit,
-      cancelCurrentCrawl,
-      isCrawlerOptionsCollapsed,
-      isScrapeOptionsCollapsed,
-      isWebhookOptionsCollapsed,
-      handleDownload,
-      handleDownloadCompiledMarkdown,
-      crawlHistory,
-      selectedCrawlId,
-      selectedCrawl,
-      selectCrawl,
-      simulatedFiles,
-      activeFormats,
-      selectedFormats,
-      crawlerOptionsArrow,
-      scrapeOptionsArrow,
-      webhookOptionsArrow,
-      useSubfolders,
-      statusCheckInterval,
-      clearHistory,
-      // Expose saveHistory if needed elsewhere, though not strictly necessary for this task
-      // saveHistory,
-    };
-  },
-});
+const isV2 = computed<boolean>(() => apiVersion.value === 'v2');
 </script>
-
-<style scoped>
-.crawl-view {
-  max-width: 800px;
-  margin: 0 auto;
-  padding: 20px;
-}
-.form-group {
-  margin-bottom: 20px;
-}
-.options-fieldset {
-  border: 1px solid #ccc;
-  padding: 15px;
-  border-radius: 4px;
-  margin-bottom: 20px;
-}
-.options-fieldset legend {
-  font-weight: bold;
-  padding: 0 5px;
-}
-.grid-layout {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 15px;
-}
-.checkbox-label {
-  display: flex;
-  align-items: center;
-  gap: 5px;
-}
-.form-group small {
-  display: block;
-  font-size: 0.8em;
-  color: #666;
-  margin-top: 3px;
-}
-.error-message {
-  color: red;
-  font-size: 0.9em;
-  margin-top: 5px;
-}
-.status {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 15px;
-  border-radius: 4px;
-  margin: 20px 0;
-}
-.loading {
-  background: #f0f7ff;
-  color: #0066cc;
-}
-
-/* Progress bar container */
-.progress-container {
-  width: 100%;
-  background-color: #e0e0e0;
-  border-radius: 5px;
-  margin-top: 10px;
-  overflow: hidden; /* Ensure the inner bar stays within bounds */
-}
-
-/* Inner progress bar */
-.progress-bar {
-  height: 20px;
-  background-color: #4caf50; /* Green color */
-  text-align: center;
-  line-height: 20px; /* Center text vertically */
-  color: white;
-  transition: width 0.5s ease; /* Smooth transition for progress updates */
-}
-
-.error {
-  background: #fff0f0;
-  color: #cc0000;
-}
-.spinner {
-  width: 20px;
-  height: 20px;
-  border: 3px solid rgba(0, 102, 204, 0.3);
-  border-radius: 50%;
-  border-top-color: #0066cc;
-  animation: spin 1s ease-in-out infinite;
-}
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-.download-section {
-  margin-top: 20px;
-}
-
-.download-buttons {
-  display: flex;
-  gap: 0.5rem;
-  flex-wrap: wrap;
-}
-
-.crawl-history-section li {
-  cursor: pointer;
-  margin-bottom: 8px;
-}
-
-.history-list {
-  list-style: none;
-  padding: 0;
-}
-
-.history-item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-}
-
-.history-button {
-  margin-left: 10px;
-  padding: 5px 10px;
-  background-color: #007bff;
-  color: #fff;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-}
-
-.history-button:hover {
-  background-color: #0056b3;
-}
-
-.download-button {
-  padding: 0.4rem 0.8rem;
-  font-size: 0.9rem;
-  margin-top: 0;
-  background-color: #007bff;
-  color: #fff;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-}
-
-.download-button:hover {
-  background-color: #0056b3;
-}
-
-.clear-history-wrapper {
-  display: flex;
-  justify-content: flex-end;
-  margin-top: 0.5rem;
-}
-
-.selected-crawl {
-  background-color: #1f2d3d;
-}
-
-.collapsible-header {
-  cursor: pointer;
-  user-select: none;
-}
-
-.error-icon {
-  width: 20px;
-  height: 20px;
-}
-</style>
diff --git a/src/views/CrawlViewV1.vue b/src/views/CrawlViewV1.vue
new file mode 100644
index 0000000..596a510
--- /dev/null
+++ b/src/views/CrawlViewV1.vue
@@ -0,0 +1,1786 @@
+<template>
+  <div class="page-container">
+    <h1>Crawl Configuration</h1>
+    <form class="scrape-config-form" @submit.prevent="handleSubmit">
+      <!-- URL Section -->
+      <div class="form-group">
+        <label for="url">Base URL to Crawl:</label>
+        <input
+          id="url"
+          v-model="formData.url"
+          type="text"
+          required
+          placeholder="https://example.com"
+        />
+      </div>
+
+      <!-- Crawler Options Section -->
+      <fieldset class="form-group options-fieldset">
+        <legend
+          class="collapsible-header"
+          @click="isCrawlerOptionsCollapsed = !isCrawlerOptionsCollapsed"
+        >
+          {{ crawlerOptionsArrow }} Crawler Options
+        </legend>
+        <div v-show="!isCrawlerOptionsCollapsed">
+          <div class="grid-layout">
+            <div class="form-group">
+              <label for="includes">Includes (Regex Patterns):</label>
+              <input
+                id="includes"
+                v-model="includesInput"
+                type="text"
+                placeholder="/blog/.*, /products/.*"
+              />
+              <div v-if="includesError" class="error-message">{{ includesError }}</div>
+              <small>Comma-separated regex patterns. Only matching URLs will be included.</small>
+            </div>
+            <div class="form-group">
+              <label for="excludes">Excludes (Regex Patterns):</label>
+              <input
+                id="excludes"
+                v-model="excludesInput"
+                type="text"
+                placeholder="/login, /private/.*"
+              />
+              <div v-if="excludesError" class="error-message">{{ excludesError }}</div>
+              <small>Comma-separated regex patterns to exclude URLs.</small>
+            </div>
+            <div class="form-group">
+              <label for="maxDepth">Max Depth:</label>
+              <input
+                id="maxDepth"
+                v-model.number="formData.crawlerOptions.maxDepth"
+                type="number"
+                min="1"
+                placeholder="e.g. 3"
+              />
+              <small>Maximum depth relative to the base URL (path segments).</small>
+            </div>
+            <div class="form-group">
+              <label for="maxDiscoveryDepth">Max Discovery Depth:</label>
+              <input
+                id="maxDiscoveryDepth"
+                v-model.number="formData.crawlerOptions.maxDiscoveryDepth"
+                type="number"
+                min="1"
+                placeholder="e.g. 2"
+              />
+              <small>Maximum depth based on discovery order.</small>
+            </div>
+            <div class="form-group">
+              <label for="limit">Page Limit:</label>
+              <input
+                id="limit"
+                v-model.number="formData.crawlerOptions.limit"
+                type="number"
+                min="1"
+                placeholder="e.g. 100"
+              />
+              <small>Maximum number of pages to crawl (default: 10000).</small>
+            </div>
+            <div class="form-group">
+              <label for="delay">Delay (seconds):</label>
+              <input
+                id="delay"
+                v-model.number="formData.crawlerOptions.delay"
+                type="number"
+                min="0"
+                step="0.1"
+                placeholder="e.g. 1.5"
+              />
+              <small>Delay between pages to respect rate limits.</small>
+            </div>
+            <div class="form-group">
+              <label for="statusInterval">Status Check Interval (seconds):</label>
+              <input
+                id="statusInterval"
+                v-model.number="statusCheckInterval"
+                type="number"
+                min="1"
+                placeholder="e.g. 5"
+              />
+              <small>Time between status checks.</small>
+            </div>
+          </div>
+          <div class="grid-layout">
+            <label class="checkbox-label">
+              <input type="checkbox" v-model="formData.crawlerOptions.ignoreSitemap" />
+              Ignore Sitemap
+            </label>
+            <label class="checkbox-label">
+              <input type="checkbox" v-model="formData.crawlerOptions.ignoreQueryParameters" />
+              Ignore Query Parameters
+            </label>
+            <label class="checkbox-label">
+              <input type="checkbox" v-model="formData.crawlerOptions.allowExternalLinks" />
+              Allow External Links
+            </label>
+            <label class="checkbox-label">
+              <input type="checkbox" v-model="formData.crawlerOptions.navigateBacklinks" />
+              Navigate Backlinks
+            </label>
+          </div>
+        </div>
+      </fieldset>
+
+      <!-- Scrape Options Section -->
+      <fieldset class="form-group options-fieldset">
+        <legend
+          class="collapsible-header"
+          @click="isScrapeOptionsCollapsed = !isScrapeOptionsCollapsed"
+        >
+          {{ scrapeOptionsArrow }} Scrape Options
+        </legend>
+        <div v-show="!isScrapeOptionsCollapsed">
+          <div class="form-group">
+            <label for="formats">Output Formats:</label>
+            <select id="formats" v-model="formData.scrapeOptions.formats" multiple>
+              <option value="markdown">Markdown</option>
+              <option value="html">HTML</option>
+              <option value="rawHtml">Raw HTML</option>
+              <option value="links">Links</option>
+              <option value="screenshot">Screenshot (Viewport)</option>
+              <option value="screenshot@fullPage">Screenshot (Full Page)</option>
+              <option value="json">JSON</option>
+              <option value="changeTracking">Change Tracking</option>
+            </select>
+            <small>Select one or more formats.</small>
+          </div>
+          <label class="checkbox-label">
+            <input type="checkbox" v-model="formData.scrapeOptions.onlyMainContent" />
+            Only Main Content (exclude headers, footers, etc.)
+          </label>
+          <div class="form-group">
+            <label for="includeTags">Include Tags (CSS Selectors):</label>
+            <input
+              id="includeTags"
+              v-model="includeTagsInput"
+              type="text"
+              placeholder="article, .main-content"
+              @blur="parseIncludeTags"
+            />
+            <small
+              >Comma-separated CSS selectors. Only content within these tags will be
+              included.</small
+            >
+          </div>
+          <div class="form-group">
+            <label for="excludeTags">Exclude Tags (CSS Selectors):</label>
+            <input
+              id="excludeTags"
+              v-model="excludeTagsInput"
+              type="text"
+              placeholder="footer, .sidebar"
+              @blur="parseExcludeTags"
+            />
+            <small>Comma-separated CSS selectors to exclude content within these tags.</small>
+          </div>
+          <div class="form-group">
+            <label for="timeout">Timeout (ms):</label>
+            <input
+              id="timeout"
+              v-model.number="formData.scrapeOptions.timeout"
+              type="number"
+              min="0"
+            />
+          </div>
+          <label class="checkbox-label">
+            <input type="checkbox" v-model="formData.scrapeOptions.skipTlsVerification" />
+            Skip TLS Verification
+          </label>
+          <label class="checkbox-label">
+            <input type="checkbox" v-model="formData.scrapeOptions.blockAds" />
+            Block Ads
+          </label>
+          <div class="form-group">
+            <label for="proxy">Proxy:</label>
+            <select id="proxy" v-model="formData.scrapeOptions.proxy">
+              <option value="">Default</option>
+              <option value="basic">Basic</option>
+              <option value="stealth">Stealth</option>
+            </select>
+          </div>
+          <div class="form-group">
+            <label for="locationCountry">Location Country:</label>
+            <input
+              id="locationCountry"
+              v-model="formData.scrapeOptions.location.country"
+              type="text"
+              placeholder="US"
+            />
+          </div>
+          <div class="form-group">
+            <label for="locationLanguages">Location Languages:</label>
+            <input
+              id="locationLanguages"
+              v-model="locationLanguagesInput"
+              type="text"
+              placeholder="en-US, fr"
+              @blur="parseLocationLanguages"
+            />
+          </div>
+          <div class="form-group">
+            <label for="jsonSchema">JSON Options Schema (JSON):</label>
+            <textarea id="jsonSchema" v-model="jsonOptionsSchemaInput"></textarea>
+            <div v-if="jsonOptionsSchemaError" class="error-message">
+              {{ jsonOptionsSchemaError }}
+            </div>
+          </div>
+          <div class="form-group">
+            <label for="jsonSystemPrompt">JSON System Prompt:</label>
+            <textarea
+              id="jsonSystemPrompt"
+              v-model="formData.scrapeOptions.jsonOptions.systemPrompt"
+            ></textarea>
+          </div>
+          <div class="form-group">
+            <label for="jsonPrompt">JSON Prompt:</label>
+            <textarea
+              id="jsonPrompt"
+              v-model="formData.scrapeOptions.jsonOptions.prompt"
+            ></textarea>
+          </div>
+          <div class="form-group">
+            <label for="changeModes">Change Tracking Modes:</label>
+            <input
+              id="changeModes"
+              v-model="changeTrackingModesInput"
+              type="text"
+              placeholder="git-diff, json"
+              @blur="parseChangeTrackingModes"
+            />
+          </div>
+          <div class="form-group">
+            <label for="changeSchema">Change Tracking Schema (JSON):</label>
+            <textarea id="changeSchema" v-model="changeTrackingSchemaInput"></textarea>
+            <div v-if="changeTrackingSchemaError" class="error-message">
+              {{ changeTrackingSchemaError }}
+            </div>
+          </div>
+          <div class="form-group">
+            <label for="changePrompt">Change Tracking Prompt:</label>
+            <textarea
+              id="changePrompt"
+              v-model="formData.scrapeOptions.changeTrackingOptions.prompt"
+            ></textarea>
+          </div>
+        </div>
+      </fieldset>
+
+      <!-- Webhook Options Section -->
+      <fieldset class="form-group options-fieldset">
+        <legend
+          class="collapsible-header"
+          @click="isWebhookOptionsCollapsed = !isWebhookOptionsCollapsed"
+        >
+          {{ webhookOptionsArrow }} Webhook Options (Optional)
+        </legend>
+        <div v-show="!isWebhookOptionsCollapsed">
+          <div class="grid-layout">
+            <div class="form-group">
+              <label for="webhookUrl">Webhook URL:</label>
+              <input
+                id="webhookUrl"
+                v-model="formData.webhookOptions.url"
+                type="text"
+                placeholder="https://your-service.com/webhook"
+              />
+            </div>
+            <div class="form-group">
+              <label for="webhookHeaders">Webhook Headers (JSON):</label>
+              <textarea
+                id="webhookHeaders"
+                v-model="webhookHeadersInput"
+                placeholder='{"Authorization": "token"}'
+              ></textarea>
+              <div v-if="webhookHeadersError" class="error-message">
+                {{ webhookHeadersError }}
+              </div>
+            </div>
+            <div class="form-group">
+              <label for="webhookMetadata">Webhook Metadata (JSON):</label>
+              <textarea
+                id="webhookMetadata"
+                v-model="webhookMetadataInput"
+                placeholder='{"source": "ui"}'
+              ></textarea>
+              <div v-if="webhookMetadataError" class="error-message">
+                {{ webhookMetadataError }}
+              </div>
+            </div>
+            <div class="form-group">
+              <label for="webhookEvents">Webhook Events:</label>
+              <select id="webhookEvents" v-model="formData.webhookOptions.events" multiple>
+                <option value="completed">Completed</option>
+                <option value="page">Page</option>
+                <option value="failed">Failed</option>
+                <option value="started">Started</option>
+              </select>
+            </div>
+          </div>
+        </div>
+      </fieldset>
+
+      <button type="submit" class="primary-button">Submit Crawl</button>
+    </form>
+
+    <div v-if="loading" class="status loading">
+      <div class="spinner"></div>
+      <span>Processing your request...</span>
+    </div>
+
+    <div v-if="error" class="status error">
+      <div class="error-icon">!</div>
+      <div>
+        <h3>Error occurred</h3>
+        <p>{{ error }}</p>
+        <button class="primary-button" @click="error = ''">Try again</button>
+      </div>
+    </div>
+
+    <!-- Section for active crawl status -->
+    <div v-if="crawling" class="crawl-status-section">
+      <h2>Crawl Status</h2>
+      <p>Status: {{ crawlStatus }}</p>
+      <div class="progress-container">
+        <div class="progress-bar" :style="{ width: progress + '%' }"></div>
+      </div>
+      <p>{{ progress }}% Completed</p>
+      <p>{{ pagesCompleted }} / {{ totalPages }} pages processed</p>
+      <button class="primary-button" type="button" @click="cancelCurrentCrawl">Cancel Crawl</button>
+    </div>
+
+    <!-- Section for download options after crawl completion -->
+    <div v-if="progress === 100 && crawlStatus === 'completed'" class="download-section">
+      <h2>Download Results</h2>
+      <div class="download-buttons">
+        <label class="checkbox-label">
+          <input type="checkbox" v-model="useSubfolders" />
+          Use subfolders
+        </label>
+        <template v-for="fmt in activeFormats" :key="fmt">
+          <button class="download-button" @click="handleDownload(fmt)">
+            Download {{ fmt }} Archive
+          </button>
+          <button
+            v-if="fmt === 'markdown'"
+            class="download-button"
+            @click="handleDownloadCompiledMarkdown()"
+          >
+            Download compiled Markdown
+          </button>
+        </template>
+        <button class="download-button" @click="handleDownload('Full JSON')">
+          Download Full JSON
+        </button>
+      </div>
+    </div>
+
+    <!-- Section for selected crawl details -->
+    <div v-if="selectedCrawl" class="selected-crawl-details-section">
+      <h2>Details for Crawl ID: {{ selectedCrawl.id }}</h2>
+      <p><strong>URL:</strong> {{ selectedCrawl.url }}</p>
+      <p>
+        <strong>Date:</strong>
+        {{ new Date(selectedCrawl.createdAt).toLocaleString() }}
+      </p>
+      <p><strong>Status:</strong> {{ selectedCrawl.status }}</p>
+
+      <h3>Files</h3>
+      <ul>
+        <li v-for="file in simulatedFiles" :key="file">{{ file }}</li>
+      </ul>
+
+      <div class="download-section">
+        <h3>Download Results</h3>
+        <div class="download-buttons">
+          <label class="checkbox-label">
+            <input type="checkbox" v-model="useSubfolders" />
+            Use subfolders
+          </label>
+          <template v-for="fmt in selectedFormats" :key="fmt">
+            <button class="download-button" @click="handleDownload(fmt, selectedCrawl.id)">
+              Download {{ fmt }} Archive
+            </button>
+            <button
+              v-if="fmt === 'markdown'"
+              class="download-button"
+              @click="handleDownloadCompiledMarkdown(selectedCrawl.id)"
+            >
+              Download compiled Markdown
+            </button>
+          </template>
+          <button class="download-button" @click="handleDownload('Full JSON', selectedCrawl.id)">
+            Download Full JSON
+          </button>
+        </div>
+      </div>
+
+      <button class="primary-button" @click="selectedCrawlId = null">Hide Details</button>
+    </div>
+
+    <!-- Section for crawl history -->
+    <div class="crawl-history-section">
+      <h2>Crawl History</h2>
+      <div v-if="crawlHistory.length > 0">
+        <ul class="history-list">
+          <li
+            v-for="crawl in crawlHistory"
+            :key="crawl.id"
+            :class="['history-item', { 'selected-crawl': selectedCrawlId === crawl.id }]"
+          >
+            <span class="history-info">
+              <strong>{{ crawl.url }}</strong>
+              – {{ new Date(crawl.createdAt).toLocaleString() }} – Status: {{ crawl.status }}
+            </span>
+            <button class="history-button" type="button" @click.prevent="selectCrawl(crawl.id)">
+              View
+            </button>
+          </li>
+        </ul>
+      </div>
+      <div v-else>
+        <p>No crawl history available.</p>
+      </div>
+      <div class="clear-history-wrapper">
+        <button class="primary-button" type="button" @click="clearHistory">Clear History</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, inject, onMounted, onUnmounted, computed, watch } from 'vue';
+import JSZip from 'jszip';
+import { saveAs } from 'file-saver';
+import axios from 'axios';
+import { useRouter } from 'vue-router';
+// Import the crawling API client (adjust import path as needed)
+import {
+  type BillingApi,
+  type CrawlingApi,
+  type ExtractionApi,
+  type MappingApi,
+  type ScrapingApi,
+} from '../api-client/api';
+
+/**
+ * Interface for Crawler Options section of the form.
+ */
+interface CrawlerOptions {
+  includes?: string[];
+  excludes?: string[];
+  maxDepth?: number;
+  maxDiscoveryDepth?: number;
+  ignoreSitemap?: boolean;
+  ignoreQueryParameters?: boolean;
+  limit?: number;
+  delay?: number;
+  allowExternalLinks?: boolean;
+  navigateBacklinks?: boolean;
+}
+
+/**
+ * Interface for Scrape Options section of the form.
+ */
+interface ScrapeOptions {
+  formats: string[];
+  onlyMainContent?: boolean;
+  includeTags?: string[];
+  excludeTags?: string[];
+  // Properties from PageOptions moved here to match CrawlUrlsRequestScrapeOptions
+  headers?: object;
+  waitFor?: number;
+  mobile?: boolean;
+  removeBase64Images?: boolean;
+  actions?: any[]; // Based on OpenAPI, actions is an array of Action objects
+  skipTlsVerification?: boolean;
+  timeout?: number;
+  jsonOptions?: {
+    schema?: object;
+    systemPrompt?: string;
+    prompt?: string;
+  };
+  location?: {
+    country?: string;
+    languages?: string[];
+  };
+  blockAds?: boolean;
+  proxy?: string;
+  changeTrackingOptions?: {
+    modes?: string[];
+    schema?: object;
+    prompt?: string;
+  };
+}
+
+/**
+ * Interface for Webhook Options section of the form.
+ */
+interface WebhookOptions {
+  url?: string;
+  headers?: Record<string, string>;
+  metadata?: Record<string, any>;
+  events?: string[];
+}
+
+/**
+ * Main form data interface for the CrawlView.
+ */
+interface FormData {
+  url: string;
+  crawlerOptions: CrawlerOptions;
+  scrapeOptions: ScrapeOptions;
+  webhookOptions: WebhookOptions;
+}
+
+/**
+ * Component allowing users to configure and run crawl jobs.
+ *
+ * @returns Component options for the crawl view.
+ */
+export default defineComponent({
+  name: 'CrawlView',
+  setup() {
+    const router = useRouter();
+    // Define the type of the injected api object based on the structure provided in src/plugins/api.ts
+    const api = inject('api') as {
+      billing: BillingApi;
+      crawling: CrawlingApi;
+      extraction: ExtractionApi;
+      mapping: MappingApi;
+      scraping: ScrapingApi;
+    };
+
+    // Reactive form data with explicit defaults to avoid undefined values.
+    // Use undefined where appropriate to satisfy TypeScript types.
+    const formData = ref<FormData>({
+      url: '',
+      crawlerOptions: {
+        includes: [],
+        excludes: [],
+        maxDepth: undefined,
+        maxDiscoveryDepth: undefined,
+        ignoreSitemap: false,
+        ignoreQueryParameters: false,
+        limit: undefined,
+        delay: undefined,
+        allowExternalLinks: false,
+        navigateBacklinks: false,
+      },
+      scrapeOptions: {
+        formats: ['markdown'],
+        onlyMainContent: true,
+        includeTags: [],
+        excludeTags: [],
+        headers: {},
+        waitFor: undefined,
+        mobile: false,
+        removeBase64Images: false,
+        actions: [],
+        skipTlsVerification: false,
+        timeout: undefined,
+        jsonOptions: {},
+        location: { country: undefined, languages: [] },
+        blockAds: true,
+        proxy: undefined,
+        changeTrackingOptions: {},
+      },
+      webhookOptions: {
+        url: undefined,
+        headers: {},
+        metadata: {},
+        events: [],
+      },
+    });
+
+    // Inputs for includes/excludes as comma-separated strings for user convenience
+    const includesInput = ref('');
+    const excludesInput = ref('');
+    const includeTagsInput = ref('');
+    const excludeTagsInput = ref('');
+    const webhookHeadersInput = ref('');
+    const webhookMetadataInput = ref('');
+    const locationLanguagesInput = ref('');
+    const jsonOptionsSchemaInput = ref('');
+    const changeTrackingSchemaInput = ref('');
+    const changeTrackingModesInput = ref('');
+
+    const includesError = ref('');
+    const excludesError = ref('');
+    const webhookHeadersError = ref('');
+    const webhookMetadataError = ref('');
+    const jsonOptionsSchemaError = ref('');
+    const changeTrackingSchemaError = ref('');
+
+    // State for collapsible sections
+    const isCrawlerOptionsCollapsed = ref(true);
+    const isScrapeOptionsCollapsed = ref(true);
+    const isWebhookOptionsCollapsed = ref(true);
+    const useSubfolders = ref(false);
+    const statusCheckInterval = ref(3);
+
+    const crawlerOptionsArrow = computed(() => (isCrawlerOptionsCollapsed.value ? '▶' : '▼'));
+    const scrapeOptionsArrow = computed(() => (isScrapeOptionsCollapsed.value ? '▶' : '▼'));
+    const webhookOptionsArrow = computed(() => (isWebhookOptionsCollapsed.value ? '▶' : '▼'));
+
+    /**
+     * Parses and validates regex patterns from the includes input.
+     * Updates formData.crawlerOptions.includes when all patterns are valid.
+     */
+    const parseIncludes = (): void => {
+      const patterns = includesInput.value
+        .split(',')
+        .map((s) => s.trim())
+        .filter(Boolean);
+      for (const pattern of patterns) {
+        try {
+          new RegExp(pattern);
+        } catch (e: any) {
+          includesError.value = `Invalid regex pattern: ${pattern}`;
+          return;
+        }
+      }
+      includesError.value = '';
+      formData.value.crawlerOptions.includes = patterns;
+    };
+
+    /**
+     * Parses and validates regex patterns from the excludes input.
+     * Updates formData.crawlerOptions.excludes when all patterns are valid.
+     */
+    const parseExcludes = (): void => {
+      const patterns = excludesInput.value
+        .split(',')
+        .map((s) => s.trim())
+        .filter(Boolean);
+      for (const pattern of patterns) {
+        try {
+          new RegExp(pattern);
+        } catch (e: any) {
+          excludesError.value = `Invalid regex pattern: ${pattern}`;
+          return;
+        }
+      }
+      excludesError.value = '';
+      formData.value.crawlerOptions.excludes = patterns;
+    };
+
+    /**
+     * Parses a comma-separated string of CSS selectors from the includeTags input
+     * and updates the formData.scrapeOptions.includeTags array.
+     */
+    const parseIncludeTags = () => {
+      formData.value.scrapeOptions.includeTags = includeTagsInput.value
+        .split(',')
+        .map((s) => s.trim())
+        .filter(Boolean);
+    };
+
+    /**
+     * Parses a comma-separated string of CSS selectors from the excludeTags input
+     * and updates the formData.scrapeOptions.excludeTags array.
+     */
+    const parseExcludeTags = () => {
+      formData.value.scrapeOptions.excludeTags = excludeTagsInput.value
+        .split(',')
+        .map((s) => s.trim())
+        .filter(Boolean);
+    };
+
+    /**
+     * Parses the webhookHeadersInput string as JSON and updates
+     * formData.webhookOptions.headers. Sets an error message if parsing fails.
+     */
+    const parseWebhookHeaders = (): void => {
+      try {
+        formData.value.webhookOptions.headers = webhookHeadersInput.value
+          ? JSON.parse(webhookHeadersInput.value)
+          : {};
+        webhookHeadersError.value = '';
+      } catch (e: any) {
+        webhookHeadersError.value = `Invalid JSON: ${e.message}`;
+      }
+    };
+
+    /**
+     * Parses the webhookMetadataInput string as JSON and updates
+     * formData.webhookOptions.metadata. Sets an error message if parsing fails.
+     */
+    const parseWebhookMetadata = (): void => {
+      try {
+        formData.value.webhookOptions.metadata = webhookMetadataInput.value
+          ? JSON.parse(webhookMetadataInput.value)
+          : {};
+        webhookMetadataError.value = '';
+      } catch (e: any) {
+        webhookMetadataError.value = `Invalid JSON: ${e.message}`;
+      }
+    };
+
+    /**
+     * Parses a comma-separated string of languages from the locationLanguagesInput
+     * and updates the formData.scrapeOptions.location.languages array.
+     */
+    const parseLocationLanguages = () => {
+      formData.value.scrapeOptions.location = formData.value.scrapeOptions.location || {};
+      formData.value.scrapeOptions.location.languages = locationLanguagesInput.value
+        .split(',')
+        .map((s) => s.trim())
+        .filter(Boolean);
+    };
+
+    /**
+     * Parses the jsonOptionsSchemaInput string as JSON and updates
+     * formData.scrapeOptions.jsonOptions.schema. Sets an error message if parsing fails.
+     */
+    const parseJsonOptionsSchema = (): void => {
+      try {
+        formData.value.scrapeOptions.jsonOptions = formData.value.scrapeOptions.jsonOptions || {};
+        formData.value.scrapeOptions.jsonOptions.schema = jsonOptionsSchemaInput.value
+          ? JSON.parse(jsonOptionsSchemaInput.value)
+          : undefined;
+        jsonOptionsSchemaError.value = '';
+      } catch (e: any) {
+        jsonOptionsSchemaError.value = `Invalid JSON: ${e.message}`;
+      }
+    };
+
+    /**
+     * Parses the changeTrackingSchemaInput string as JSON and updates
+     * formData.scrapeOptions.changeTrackingOptions.schema. Sets an error message if parsing fails.
+     */
+    const parseChangeTrackingSchema = (): void => {
+      try {
+        formData.value.scrapeOptions.changeTrackingOptions =
+          formData.value.scrapeOptions.changeTrackingOptions || {};
+        formData.value.scrapeOptions.changeTrackingOptions.schema = changeTrackingSchemaInput.value
+          ? JSON.parse(changeTrackingSchemaInput.value)
+          : undefined;
+        changeTrackingSchemaError.value = '';
+      } catch (e: any) {
+        changeTrackingSchemaError.value = `Invalid JSON: ${e.message}`;
+      }
+    };
+
+    /**
+     * Parses a comma-separated string of modes from the changeTrackingModesInput
+     * and updates the formData.scrapeOptions.changeTrackingOptions.modes array.
+     */
+    const parseChangeTrackingModes = () => {
+      formData.value.scrapeOptions.changeTrackingOptions =
+        formData.value.scrapeOptions.changeTrackingOptions || {};
+      formData.value.scrapeOptions.changeTrackingOptions.modes = changeTrackingModesInput.value
+        .split(',')
+        .map((s) => s.trim())
+        .filter(Boolean);
+    };
+
+    // Watchers to validate inputs in real time
+    watch(includesInput, parseIncludes, { immediate: true });
+    watch(excludesInput, parseExcludes, { immediate: true });
+    watch(webhookHeadersInput, parseWebhookHeaders, { immediate: true });
+    watch(webhookMetadataInput, parseWebhookMetadata, { immediate: true });
+    watch(jsonOptionsSchemaInput, parseJsonOptionsSchema, { immediate: true });
+    watch(changeTrackingSchemaInput, parseChangeTrackingSchema, { immediate: true });
+
+    const loading = ref(false);
+    const crawling = ref(false);
+    const progress = ref(0);
+    // Number of pages processed so far
+    const pagesCompleted = ref(0);
+    // Total number of pages in the crawl job
+    const totalPages = ref(0);
+    const crawlStatus = ref<string | undefined>('');
+    const error = ref('');
+    const result = ref<any>(null);
+    const currentCrawlId = ref<string | null>(null);
+    const crawlHistory = ref<any[]>([]); // Initialize with empty array
+
+    // State for selected crawl history item
+    const selectedCrawlId = ref<string | null>(null);
+    const simulatedFiles = ref<string[]>([]);
+
+    // LocalStorage key for crawl history
+    const HISTORY_STORAGE_KEY = 'crawlHistory';
+
+    // Computed property to get the selected crawl details
+    const selectedCrawl = computed(() => {
+      return crawlHistory.value.find((crawl) => crawl.id === selectedCrawlId.value);
+    });
+
+    /**
+     * Get the formats requested for the active crawl.
+     * These are taken from the history entry for the current job ID.
+     * @returns {string[]} An array of active formats.
+     */
+    const activeFormats = computed((): string[] => {
+      if (result.value && result.value.id) {
+        const historyItem = crawlHistory.value.find((c) => c.id === result.value.id);
+        return historyItem?.scrapeOptions?.formats || [];
+      }
+      return [];
+    });
+
+    /**
+     * Get the formats requested for the selected crawl history item.
+     * @returns {string[]} An array of selected formats.
+     */
+    const selectedFormats = computed((): string[] => {
+      if (selectedCrawl.value) {
+        return selectedCrawl.value.scrapeOptions?.formats || [];
+      }
+      return [];
+    });
+
+    /**
+     * Save the current crawl history to LocalStorage.
+     */
+    const saveHistory = () => {
+      localStorage.setItem(HISTORY_STORAGE_KEY, JSON.stringify(crawlHistory.value));
+    };
+
+    /**
+     * Clear the crawl history and remove the stored data.
+     */
+    const clearHistory = () => {
+      for (const id in historyIntervalIds) {
+        clearInterval(historyIntervalIds[id]);
+        delete historyIntervalIds[id];
+      }
+      crawlHistory.value = [];
+      selectedCrawlId.value = null;
+      localStorage.removeItem(HISTORY_STORAGE_KEY);
+    };
+
+    /**
+     * Select a crawl from history and sync form fields.
+     * Retrieves file names from the API instead of file content.
+     * @param {string} id - The ID of the selected crawl.
+     */
+    const selectCrawl = async (id: string) => {
+      selectedCrawlId.value = id;
+      simulatedFiles.value = [];
+      error.value = '';
+
+      try {
+        // Fetch files for the selected crawl via the API
+        const response = await api.crawling.getCrawlStatus(id);
+        simulatedFiles.value =
+          response.data.data?.map((page: any, index: number) => {
+            const base = sanitizeFilename(page.metadata?.sourceURL || page.url || index.toString());
+            return `${index.toString().padStart(3, '0')}-${base}`;
+          }) || [];
+        console.log(`Fetched files for crawl ID: ${id}`, response.data);
+
+        // Sync text inputs with values from the selected crawl if available
+        const crawl = crawlHistory.value.find((c) => c.id === id);
+        if (crawl && crawl.crawlerOptions) {
+          includesInput.value = (crawl.crawlerOptions.includes || []).join(', ');
+          excludesInput.value = (crawl.crawlerOptions.excludes || []).join(', ');
+        }
+        if (crawl && crawl.scrapeOptions) {
+          includeTagsInput.value = (crawl.scrapeOptions.includeTags || []).join(', ');
+          excludeTagsInput.value = (crawl.scrapeOptions.excludeTags || []).join(', ');
+          locationLanguagesInput.value = crawl.scrapeOptions.location?.languages?.join(', ') || '';
+          jsonOptionsSchemaInput.value = crawl.scrapeOptions.jsonOptions?.schema
+            ? JSON.stringify(crawl.scrapeOptions.jsonOptions.schema)
+            : '';
+          changeTrackingSchemaInput.value = crawl.scrapeOptions.changeTrackingOptions?.schema
+            ? JSON.stringify(crawl.scrapeOptions.changeTrackingOptions.schema)
+            : '';
+          changeTrackingModesInput.value =
+            crawl.scrapeOptions.changeTrackingOptions?.modes?.join(', ') || '';
+        }
+      } catch (err: any) {
+        console.error(`Error fetching crawl files for ID ${id}:`, err);
+        error.value = `Failed to fetch crawl files for ID ${id}. ${err.message || err}`;
+      }
+    };
+
+    /**
+     * Retrieve all pages for a crawl job, following pagination if necessary.
+     * @param {string} jobId - The crawl job identifier.
+     * @returns {Promise<any[]>} A promise that resolves to an array of page data objects.
+     */
+    const fetchAllCrawlData = async (jobId: string): Promise<any[]> => {
+      const pages: any[] = [];
+      let response = await api.crawling.getCrawlStatus(jobId);
+      pages.push(...(response.data.data || []));
+      let next = response.data.next;
+      while (next) {
+        const nextResp = await axios.get(next);
+        pages.push(...(nextResp.data.data || []));
+        next = nextResp.data.next;
+      }
+      return pages;
+    };
+
+    /**
+     * Sanitize a URL so it can be safely used as part of a filename.
+     * Replaces protocol, query parameters, hash, and non-alphanumeric characters with underscores.
+     * @param {string} url - The URL to sanitize.
+     * @returns {string} A filename-safe string derived from the URL.
+     */
+    function sanitizeFilename(url: string): string {
+      let name = url.replace(/^https?:\/\//, '');
+      name = name.replace(/[?#].*$/, '');
+      name = name.replace(/[^a-zA-Z0-9]+/g, '_');
+      return name || 'page';
+    }
+
+    /**
+     * Sanitize a path segment for safe folder or file names.
+     *
+     * @param segment - The path segment to sanitize.
+     * @returns The sanitized segment.
+     */
+    function sanitizeSegment(segment: string): string {
+      return segment.replace(/[^a-zA-Z0-9]+/g, '_') || 'part';
+    }
+
+    /**
+     * Get folder structure and file name for a URL.
+     *
+     * @param url - The source URL.
+     * @param ext - The desired file extension.
+     * @returns Folder segments and final file name.
+     */
+    function getPathInfo(url: string, ext: string): { folders: string[]; filename: string } {
+      try {
+        const { pathname } = new URL(url);
+        const trimmed = pathname.replace(/\/+$/, '');
+        const segments = trimmed.split('/').filter(Boolean).map(sanitizeSegment);
+        if (segments.length === 0) {
+          return { folders: [], filename: `index.${ext}` };
+        }
+        let last = segments[segments.length - 1];
+        if (last.includes('.')) {
+          last = last.replace(/\.[^.]+$/, '');
+          segments.pop();
+        }
+        const base = last || 'index';
+        return { folders: segments, filename: `${base}.${ext}` };
+      } catch {
+        return { folders: [], filename: `index.${ext}` };
+      }
+    }
+
+    /**
+     * Map a format to its file extension.
+     *
+     * @param format - The export format.
+     * @returns The corresponding file extension.
+     */
+    function getExtension(format: string): string {
+      switch (format) {
+        case 'markdown':
+          return 'md';
+        case 'html':
+          return 'html';
+        case 'rawHtml':
+          return 'raw.html';
+        case 'links':
+          return 'txt';
+        case 'json':
+        case 'changeTracking':
+          return 'json';
+        case 'screenshot':
+        case 'screenshot@fullPage':
+          return 'png';
+        default:
+          return 'txt';
+      }
+    }
+
+    /**
+     * Handles the download of crawl results.
+     * Calls the appropriate API endpoint based on the download type ('Archive' or 'Full JSON').
+     * Creates a Blob from the response and triggers a file download.
+     * @param {string} type - The type of download (e.g., 'markdown', 'html', 'Full JSON').
+     * @param {string} [jobIdParam] - Optional job ID to download specific crawl results from history.
+     */
+    const handleDownload = async (type: string, jobIdParam?: string) => {
+      console.log(`Handling download of ${type}.`);
+      error.value = '';
+
+      const jobId = jobIdParam || result.value?.id;
+      if (!jobId) {
+        error.value = 'No crawl job found to download results.';
+        console.error('Attempted to download without a crawl job identifier.');
+        return;
+      }
+
+      try {
+        const pages = await fetchAllCrawlData(jobId);
+
+        if (type === 'Full JSON') {
+          const blob = new Blob([JSON.stringify(pages, null, 2)], {
+            type: 'application/json',
+          });
+          saveAs(blob, `crawl-result-${jobId}.json`);
+          return;
+        }
+
+        const zip = new JSZip();
+        const fetches: Promise<void>[] = [];
+
+        // Build folder prefix counts to avoid creating single-file folders
+        const prefixCounts: Record<string, number> = {};
+        pages.forEach((p, i) => {
+          const name = p.metadata?.sourceURL || p.url || i.toString();
+          const info = getPathInfo(name, getExtension(type));
+          let prefix = '';
+          info.folders.forEach((seg) => {
+            prefix = prefix ? `${prefix}/${seg}` : seg;
+            prefixCounts[prefix] = (prefixCounts[prefix] || 0) + 1;
+          });
+        });
+
+        pages.forEach((page, index) => {
+          const urlForName = page.metadata?.sourceURL || page.url || index.toString();
+          const base = sanitizeFilename(urlForName);
+          const prefix = index.toString().padStart(3, '0');
+          const ext = getExtension(type);
+          const pathInfo = getPathInfo(urlForName, ext);
+          let folderSegments: string[] = [];
+          if (useSubfolders.value) {
+            let prefixPath = '';
+            folderSegments = pathInfo.folders.filter((seg) => {
+              prefixPath = prefixPath ? `${prefixPath}/${seg}` : seg;
+              return prefixCounts[prefixPath] > 1;
+            });
+          }
+          const addFile = (data: string | Blob) => {
+            if (useSubfolders.value && folderSegments.length > 0) {
+              let folder = zip;
+              folderSegments.forEach((seg) => {
+                folder = folder.folder(seg);
+              });
+              folder.file(pathInfo.filename, data);
+            } else {
+              zip.file(`${prefix}-${base}.${ext}`, data);
+            }
+          };
+          switch (type) {
+            case 'markdown':
+              if (page.markdown) {
+                addFile(page.markdown);
+              }
+              break;
+            case 'html':
+              if (page.html) {
+                addFile(page.html);
+              }
+              break;
+            case 'rawHtml':
+              if (page.rawHtml) {
+                addFile(page.rawHtml);
+              }
+              break;
+            case 'links':
+              if (page.links) {
+                addFile(page.links.join('\n'));
+              }
+              break;
+            case 'json':
+              if (page.llm_extraction) {
+                addFile(JSON.stringify(page.llm_extraction, null, 2));
+              }
+              break;
+            case 'changeTracking':
+              if (page.changeTracking) {
+                addFile(JSON.stringify(page.changeTracking, null, 2));
+              }
+              break;
+            case 'screenshot':
+            case 'screenshot@fullPage':
+              if (page.screenshot) {
+                const p = axios.get(page.screenshot, { responseType: 'blob' }).then((res) => {
+                  addFile(res.data);
+                });
+                fetches.push(p);
+              }
+              break;
+            default:
+              console.warn(`Unknown format: ${type}`);
+          }
+        });
+
+        await Promise.all(fetches);
+        const blob = await zip.generateAsync({ type: 'blob' });
+        saveAs(blob, `crawl-${type}-archive-${jobId}.zip`);
+      } catch (err: any) {
+        console.error(`Error during ${type} download for job ID ${jobId}:`, err);
+        error.value = `Failed to download ${type}. ${err.message || err}`;
+      }
+    };
+
+    /**
+     * Increase markdown heading levels.
+     *
+     * @param markdown - The markdown string to modify.
+     * @param increment - How many levels to increase.
+     * @returns The adjusted markdown string.
+     */
+    const incrementHeadings = (markdown: string, increment: number): string => {
+      return markdown.replace(/^(#{1,6})(?=\s)/gm, (match) => {
+        const newLevel = Math.min(6, match.length + increment);
+        return '#'.repeat(newLevel);
+      });
+    };
+
+    /**
+     * Compile all markdown pages into a single document.
+     *
+     * @param pages - Array of page objects containing markdown.
+     * @param title - Title for the compiled document.
+     * @returns The compiled markdown string.
+     */
+    const compileMarkdown = (pages: any[], title: string): string => {
+      const sections: string[] = [`# ${title}`];
+      pages.forEach((page, index) => {
+        const pageTitle =
+          page.metadata?.title || page.metadata?.sourceURL || page.url || `Page ${index + 1}`;
+        sections.push(`\n## ${pageTitle}\n`);
+        if (page.markdown) {
+          sections.push(incrementHeadings(page.markdown, 1));
+        }
+      });
+      return sections.join('\n');
+    };
+
+    /**
+     * Download all markdown files compiled into a single document.
+     *
+     * @param jobIdParam - Optional job ID for history downloads.
+     */
+    const handleDownloadCompiledMarkdown = async (jobIdParam?: string): Promise<void> => {
+      error.value = '';
+      const jobId = jobIdParam || result.value?.id;
+      if (!jobId) {
+        error.value = 'No crawl job found to download results.';
+        return;
+      }
+      try {
+        const pages = await fetchAllCrawlData(jobId);
+        const compiled = compileMarkdown(pages, 'Compiled Crawl Results');
+        const blob = new Blob([compiled], { type: 'text/markdown' });
+        saveAs(blob, `crawl-compiled-${jobId}.md`);
+      } catch (err: any) {
+        console.error(`Error compiling markdown for job ID ${jobId}:`, err);
+        error.value = `Failed to compile markdown. ${err.message || err}`;
+      }
+    };
+
+    /**
+     * Validate a URL string.
+     * @param {string} url - The URL to validate.
+     * @returns {boolean} True if valid, false otherwise.
+     */
+    const isValidUrl = (url: string): boolean => {
+      try {
+        new URL(url);
+        return true;
+      } catch {
+        return false;
+      }
+    };
+
+    /**
+     * Handles the form submission for a crawl job.
+     * Parses all input fields, validates the URL and formats,
+     * constructs the API payload, calls the crawling API,
+     * and manages the UI state (loading, progress, errors, history).
+     * @returns {Promise<void>} A promise that resolves when the submission process is complete.
+     */
+    const handleSubmit = async (): Promise<void> => {
+      // Parse all comma-separated inputs and JSON fields before submission
+      parseIncludes();
+      parseExcludes();
+      parseIncludeTags();
+      parseExcludeTags();
+      parseLocationLanguages();
+      parseJsonOptionsSchema();
+      parseChangeTrackingSchema();
+      parseChangeTrackingModes();
+      parseWebhookHeaders();
+      parseWebhookMetadata();
+
+      if (
+        includesError.value ||
+        excludesError.value ||
+        webhookHeadersError.value ||
+        webhookMetadataError.value ||
+        jsonOptionsSchemaError.value ||
+        changeTrackingSchemaError.value
+      ) {
+        error.value = 'Please fix the errors above before submitting';
+        return;
+      }
+
+      // Basic form validation
+      if (!isValidUrl(formData.value.url)) {
+        error.value = 'Please enter a valid URL (e.g. https://example.com)';
+        return;
+      }
+      if (
+        !formData.value.scrapeOptions.formats ||
+        formData.value.scrapeOptions.formats.length === 0
+      ) {
+        error.value = 'Please select at least one output format';
+        return;
+      }
+
+      // Build the request payload and only include defined options
+      const payload: any = { url: formData.value.url };
+
+      const crawler = formData.value.crawlerOptions;
+      if (crawler.excludes && crawler.excludes.length > 0) payload.excludePaths = crawler.excludes;
+      if (crawler.includes && crawler.includes.length > 0) payload.includePaths = crawler.includes;
+      if (crawler.maxDepth !== undefined) payload.maxDepth = crawler.maxDepth;
+      if (crawler.maxDiscoveryDepth !== undefined)
+        payload.maxDiscoveryDepth = crawler.maxDiscoveryDepth;
+      if (crawler.ignoreSitemap) payload.ignoreSitemap = true;
+      if (crawler.ignoreQueryParameters) payload.ignoreQueryParameters = true;
+      if (crawler.limit !== undefined) payload.limit = crawler.limit;
+      if (crawler.delay !== undefined) payload.delay = crawler.delay;
+      if (crawler.navigateBacklinks) payload.allowBackwardLinks = true;
+      if (crawler.allowExternalLinks) payload.allowExternalLinks = true;
+
+      const scrape = formData.value.scrapeOptions;
+      const scrapePayload: any = {};
+      if (scrape.formats && scrape.formats.length > 0) scrapePayload.formats = scrape.formats;
+      // Only include onlyMainContent if it's explicitly false, as default is true
+      if (scrape.onlyMainContent === false) scrapePayload.onlyMainContent = false;
+      if (scrape.includeTags && scrape.includeTags.length > 0)
+        scrapePayload.includeTags = scrape.includeTags;
+      if (scrape.excludeTags && scrape.excludeTags.length > 0)
+        scrapePayload.excludeTags = scrape.excludeTags;
+      if (scrape.headers && Object.keys(scrape.headers).length > 0)
+        scrapePayload.headers = scrape.headers;
+      if (scrape.waitFor !== undefined) scrapePayload.waitFor = scrape.waitFor;
+      if (scrape.mobile) scrapePayload.mobile = true;
+      if (scrape.removeBase64Images) scrapePayload.removeBase64Images = true;
+      if (scrape.actions && scrape.actions.length > 0) scrapePayload.actions = scrape.actions;
+      if (scrape.skipTlsVerification) scrapePayload.skipTlsVerification = true;
+      if (scrape.timeout !== undefined) scrapePayload.timeout = scrape.timeout;
+      if (scrape.jsonOptions) {
+        const jsonOpts: any = {};
+        if (scrape.jsonOptions.schema) jsonOpts.schema = scrape.jsonOptions.schema;
+        if (scrape.jsonOptions.systemPrompt)
+          jsonOpts.systemPrompt = scrape.jsonOptions.systemPrompt;
+        if (scrape.jsonOptions.prompt) jsonOpts.prompt = scrape.jsonOptions.prompt;
+        if (Object.keys(jsonOpts).length > 0) scrapePayload.jsonOptions = jsonOpts;
+      }
+      if (scrape.location) {
+        const loc: any = {};
+        if (scrape.location.country) loc.country = scrape.location.country;
+        if (scrape.location.languages && scrape.location.languages.length > 0)
+          loc.languages = scrape.location.languages;
+        if (Object.keys(loc).length > 0) scrapePayload.location = loc;
+      }
+      // Only include blockAds if it's explicitly false, as default is true
+      if (scrape.blockAds === false) scrapePayload.blockAds = false;
+      if (scrape.proxy) scrapePayload.proxy = scrape.proxy;
+      if (scrape.changeTrackingOptions) {
+        const change: any = {};
+        if (scrape.changeTrackingOptions.modes && scrape.changeTrackingOptions.modes.length > 0)
+          change.modes = scrape.changeTrackingOptions.modes;
+        if (scrape.changeTrackingOptions.schema)
+          change.schema = scrape.changeTrackingOptions.schema;
+        if (scrape.changeTrackingOptions.prompt)
+          change.prompt = scrape.changeTrackingOptions.prompt;
+        if (Object.keys(change).length > 0) scrapePayload.changeTrackingOptions = change;
+      }
+
+      if (Object.keys(scrapePayload).length > 0) payload.scrapeOptions = scrapePayload;
+
+      // Include webhook options only when a URL is provided
+      if (formData.value.webhookOptions.url && formData.value.webhookOptions.url !== '') {
+        payload.webhook = {
+          url: formData.value.webhookOptions.url,
+        } as any;
+
+        if (
+          formData.value.webhookOptions.headers &&
+          Object.keys(formData.value.webhookOptions.headers).length > 0
+        ) {
+          payload.webhook.headers = formData.value.webhookOptions.headers;
+        }
+        if (
+          formData.value.webhookOptions.metadata &&
+          Object.keys(formData.value.webhookOptions.metadata).length > 0
+        ) {
+          payload.webhook.metadata = formData.value.webhookOptions.metadata;
+        }
+        if (
+          formData.value.webhookOptions.events &&
+          formData.value.webhookOptions.events.length > 0
+        ) {
+          payload.webhook.events = formData.value.webhookOptions.events;
+        }
+      }
+
+      try {
+        loading.value = true;
+        crawling.value = true;
+        progress.value = 0;
+        pagesCompleted.value = 0;
+        totalPages.value = 0;
+        error.value = '';
+        result.value = null;
+        currentCrawlId.value = null;
+
+        // Call the crawling API to submit the crawl job
+        const response = await api.crawling.crawlUrls(payload);
+        result.value = response.data;
+
+        // Add the submitted job to history
+        if (response.data && response.data.id) {
+          currentCrawlId.value = response.data.id;
+          crawlHistory.value.unshift({
+            // Add to the beginning of the array
+            id: response.data.id,
+            url: formData.value.url,
+            createdAt: new Date().toISOString(), // Use current time for creation date
+            status: 'started', // Initial status
+            crawlerOptions: { ...formData.value.crawlerOptions }, // Store a copy of options
+            scrapeOptions: { ...formData.value.scrapeOptions },
+            webhookOptions: { ...formData.value.webhookOptions },
+          });
+          saveHistory(); // Save history after adding a new job
+          fetchCrawlStatus(response.data.id);
+          loading.value = false; // hide loading spinner once polling starts
+        }
+      } catch (err: unknown) {
+        if (err instanceof Error) {
+          if (err.message.includes('401')) {
+            router.push({ name: 'ApiConfig' });
+            return;
+          }
+          error.value = err.message.includes('404')
+            ? 'Resource not found (404)'
+            : err.message.includes('Network Error')
+              ? 'Network connection failed'
+              : err.message;
+        } else {
+          error.value = 'An unexpected error occurred';
+        }
+        loading.value = false; // Stop loading on error
+        crawling.value = false; // Stop crawling animation on error
+        currentCrawlId.value = null;
+      }
+    };
+
+    /**
+     * Cancel the currently running crawl job.
+     * Stops status polling and updates the UI state accordingly.
+     */
+    const cancelCurrentCrawl = async (): Promise<void> => {
+      if (!currentCrawlId.value) {
+        return;
+      }
+      try {
+        await api.crawling.cancelCrawl(currentCrawlId.value);
+        if (intervalId) {
+          clearInterval(intervalId);
+          intervalId = null;
+        }
+        crawlStatus.value = 'cancelled';
+        crawling.value = false;
+        const historyItem = crawlHistory.value.find((c) => c.id === currentCrawlId.value);
+        if (historyItem) {
+          historyItem.status = 'cancelled';
+          saveHistory();
+        }
+        currentCrawlId.value = null;
+      } catch (err: any) {
+        error.value = `Failed to cancel crawl: ${err.message || 'Unknown error'}`;
+      }
+    };
+
+    // Interval ID for polling crawl status
+    let intervalId: ReturnType<typeof setInterval> | null = null;
+    const historyIntervalIds: Record<string, ReturnType<typeof setInterval>> = {};
+
+    /**
+     * Fetch crawl status and progress periodically from the API.
+     * Clears any existing interval before starting a new one.
+     * Updates reactive variables with the latest status, completed pages, and total pages.
+     * Stops polling when the crawl job is completed or failed.
+     * @param {string} jobId - The ID of the crawl job.
+     */
+    const fetchCrawlStatus = async (jobId: string) => {
+      // Clear any existing interval before starting a new one
+      if (intervalId) {
+        clearInterval(intervalId);
+      }
+
+      intervalId = setInterval(async () => {
+        try {
+          // Call the actual API endpoint to get the crawl status
+          const response = await api.crawling.getCrawlStatus(jobId);
+          const data = response.data;
+
+          // Update reactive variables with real data
+          crawlStatus.value = data.status;
+          pagesCompleted.value = data.completed || 0;
+          totalPages.value = data.total || 0;
+          // Calculate progress based on completed vs total pages
+          if (
+            data.total !== undefined &&
+            data.total > 0 &&
+            data.completed !== undefined &&
+            data.completed >= 0
+          ) {
+            progress.value = Math.round((data.completed / data.total) * 100);
+          } else {
+            progress.value = 0; // Or handle as appropriate if total is 0 or completed is undefined/negative
+          }
+
+          console.log(
+            `Crawl status for ${jobId}: ${data.status}, Completed: ${data.completed}/${data.total}`,
+          );
+
+          const historyItem = crawlHistory.value.find((c) => c.id === jobId);
+          if (historyItem) {
+            historyItem.status = data.status;
+            saveHistory();
+          }
+
+          // Stop polling when completed or failed
+          if (data.status === 'completed' || data.status === 'failed') {
+            clearInterval(intervalId);
+            intervalId = null; // Clear intervalId after clearing interval
+            crawling.value = false; // Update crawling state
+            currentCrawlId.value = null;
+            saveHistory(); // Save history when status changes to completed or failed
+          }
+        } catch (err: any) {
+          console.error('Failed to fetch crawl status:', err);
+          // Stop polling on error
+          clearInterval(intervalId);
+          intervalId = null;
+          crawling.value = false;
+          crawlStatus.value = 'failed'; // Indicate failure in UI
+          currentCrawlId.value = null;
+          error.value = `Failed to fetch crawl status: ${err.message || 'Unknown error'}`;
+          const historyItem = crawlHistory.value.find((c) => c.id === jobId);
+          if (historyItem) {
+            historyItem.status = 'failed';
+            saveHistory();
+          }
+        }
+      }, statusCheckInterval.value * 1000);
+    };
+
+    /**
+     * Check the status of a crawl from history and update its record.
+     * Starts polling if the crawl is still running.
+     * @param crawl - History entry to check.
+     */
+    const checkHistoryStatus = async (crawl: any) => {
+      try {
+        const response = await api.crawling.getCrawlStatus(crawl.id);
+        crawl.status = response.data.status;
+        saveHistory();
+        if (crawl.status !== 'completed' && crawl.status !== 'failed') {
+          startHistoryPolling(crawl.id);
+        }
+      } catch (err) {
+        console.error(`Failed to fetch status for crawl ${crawl.id}:`, err);
+        crawl.status = 'unavailable';
+        saveHistory();
+      }
+    };
+
+    /**
+     * Start polling status for a specific history entry.
+     * @param id - Crawl job identifier.
+     */
+    const startHistoryPolling = (id: string) => {
+      stopHistoryPolling(id);
+      historyIntervalIds[id] = setInterval(async () => {
+        const crawl = crawlHistory.value.find((c) => c.id === id);
+        if (!crawl) {
+          stopHistoryPolling(id);
+          return;
+        }
+        try {
+          const response = await api.crawling.getCrawlStatus(id);
+          crawl.status = response.data.status;
+          saveHistory();
+          if (crawl.status === 'completed' || crawl.status === 'failed') {
+            stopHistoryPolling(id);
+          }
+        } catch (err) {
+          console.error(`Polling failed for crawl ${id}:`, err);
+          crawl.status = 'unavailable';
+          saveHistory();
+          stopHistoryPolling(id);
+        }
+      }, statusCheckInterval.value * 1000);
+    };
+
+    /**
+     * Stop polling status for a specific history entry.
+     * @param id - Crawl job identifier.
+     */
+    const stopHistoryPolling = (id: string) => {
+      const intId = historyIntervalIds[id];
+      if (intId) {
+        clearInterval(intId);
+        delete historyIntervalIds[id];
+      }
+    };
+
+    onMounted(async () => {
+      // Load history from LocalStorage on component mount
+      const savedHistory = localStorage.getItem(HISTORY_STORAGE_KEY);
+      if (savedHistory) {
+        try {
+          crawlHistory.value = JSON.parse(savedHistory);
+        } catch (e) {
+          console.error('Failed to parse crawl history from LocalStorage:', e);
+        }
+      }
+      await Promise.all(crawlHistory.value.map((c) => checkHistoryStatus(c)));
+    });
+
+    // Cleanup polling interval when the component unmounts
+    onUnmounted(() => {
+      if (intervalId) {
+        clearInterval(intervalId);
+        intervalId = null;
+      }
+      for (const id in historyIntervalIds) {
+        clearInterval(historyIntervalIds[id]);
+        delete historyIntervalIds[id];
+      }
+    });
+
+    return {
+      formData,
+      includesInput,
+      excludesInput,
+      includeTagsInput,
+      excludeTagsInput,
+      webhookHeadersInput,
+      webhookMetadataInput,
+      locationLanguagesInput,
+      jsonOptionsSchemaInput,
+      changeTrackingSchemaInput,
+      changeTrackingModesInput,
+      includesError,
+      excludesError,
+      webhookHeadersError,
+      webhookMetadataError,
+      jsonOptionsSchemaError,
+      changeTrackingSchemaError,
+      parseIncludeTags,
+      parseExcludeTags,
+      parseLocationLanguages,
+      parseChangeTrackingModes,
+      loading,
+      crawling,
+      progress,
+      pagesCompleted,
+      totalPages,
+      crawlStatus,
+      error,
+      result,
+      handleSubmit,
+      cancelCurrentCrawl,
+      isCrawlerOptionsCollapsed,
+      isScrapeOptionsCollapsed,
+      isWebhookOptionsCollapsed,
+      handleDownload,
+      handleDownloadCompiledMarkdown,
+      crawlHistory,
+      selectedCrawlId,
+      selectedCrawl,
+      selectCrawl,
+      simulatedFiles,
+      activeFormats,
+      selectedFormats,
+      crawlerOptionsArrow,
+      scrapeOptionsArrow,
+      webhookOptionsArrow,
+      useSubfolders,
+      statusCheckInterval,
+      clearHistory,
+      // Expose saveHistory if needed elsewhere, though not strictly necessary for this task
+      // saveHistory,
+    };
+  },
+});
+</script>
+
+<style scoped>
+.crawl-view {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 20px;
+}
+.form-group {
+  margin-bottom: 20px;
+}
+.options-fieldset {
+  border: 1px solid #ccc;
+  padding: 15px;
+  border-radius: 4px;
+  margin-bottom: 20px;
+}
+.options-fieldset legend {
+  font-weight: bold;
+  padding: 0 5px;
+}
+.grid-layout {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 15px;
+}
+.checkbox-label {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+.form-group small {
+  display: block;
+  font-size: 0.8em;
+  color: #666;
+  margin-top: 3px;
+}
+.error-message {
+  color: red;
+  font-size: 0.9em;
+  margin-top: 5px;
+}
+.status {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 15px;
+  border-radius: 4px;
+  margin: 20px 0;
+}
+.loading {
+  background: #f0f7ff;
+  color: #0066cc;
+}
+
+/* Progress bar container */
+.progress-container {
+  width: 100%;
+  background-color: #e0e0e0;
+  border-radius: 5px;
+  margin-top: 10px;
+  overflow: hidden; /* Ensure the inner bar stays within bounds */
+}
+
+/* Inner progress bar */
+.progress-bar {
+  height: 20px;
+  background-color: #4caf50; /* Green color */
+  text-align: center;
+  line-height: 20px; /* Center text vertically */
+  color: white;
+  transition: width 0.5s ease; /* Smooth transition for progress updates */
+}
+
+.error {
+  background: #fff0f0;
+  color: #cc0000;
+}
+.spinner {
+  width: 20px;
+  height: 20px;
+  border: 3px solid rgba(0, 102, 204, 0.3);
+  border-radius: 50%;
+  border-top-color: #0066cc;
+  animation: spin 1s ease-in-out infinite;
+}
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.download-section {
+  margin-top: 20px;
+}
+
+.download-buttons {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.crawl-history-section li {
+  cursor: pointer;
+  margin-bottom: 8px;
+}
+
+.history-list {
+  list-style: none;
+  padding: 0;
+}
+
+.history-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.history-button {
+  margin-left: 10px;
+  padding: 5px 10px;
+  background-color: #007bff;
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.history-button:hover {
+  background-color: #0056b3;
+}
+
+.download-button {
+  padding: 0.4rem 0.8rem;
+  font-size: 0.9rem;
+  margin-top: 0;
+  background-color: #007bff;
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.download-button:hover {
+  background-color: #0056b3;
+}
+
+.clear-history-wrapper {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 0.5rem;
+}
+
+.selected-crawl {
+  background-color: #1f2d3d;
+}
+
+.collapsible-header {
+  cursor: pointer;
+  user-select: none;
+}
+
+.error-icon {
+  width: 20px;
+  height: 20px;
+}
+</style>
diff --git a/src/views/CrawlViewV2.vue b/src/views/CrawlViewV2.vue
new file mode 100644
index 0000000..276e71b
--- /dev/null
+++ b/src/views/CrawlViewV2.vue
@@ -0,0 +1,486 @@
+<template>
+  <div class="page-container crawl-view">
+    <h1>Crawl Configuration (API v2)</h1>
+    <form class="scrape-config-form" @submit.prevent="startCrawl">
+      <div class="form-group">
+        <label for="crawlUrl">Start URL:</label>
+        <input id="crawlUrl" v-model="formData.url" type="url" required />
+      </div>
+
+      <fieldset class="form-group options-fieldset">
+        <legend>Crawler Options</legend>
+        <div class="form-group">
+          <label for="includes">Include Patterns (comma or newline separated):</label>
+          <textarea
+            id="includes"
+            v-model="includesInput"
+            rows="3"
+            placeholder="/blog/**"
+          ></textarea>
+        </div>
+        <div class="form-group">
+          <label for="excludes">Exclude Patterns (comma or newline separated):</label>
+          <textarea
+            id="excludes"
+            v-model="excludesInput"
+            rows="3"
+            placeholder="/blog/old/**"
+          ></textarea>
+        </div>
+        <div class="grid-layout">
+          <div class="form-group">
+            <label for="maxDepth">Max Depth:</label>
+            <input
+              id="maxDepth"
+              v-model.number="formData.crawlerOptions.maxDepth"
+              type="number"
+              min="0"
+            />
+          </div>
+          <div class="form-group">
+            <label for="maxPages">Max Pages:</label>
+            <input
+              id="maxPages"
+              v-model.number="formData.crawlerOptions.maxPages"
+              type="number"
+              min="1"
+            />
+          </div>
+        </div>
+        <label class="checkbox-label">
+          <input type="checkbox" v-model="formData.crawlerOptions.returnOnlyUrls" />
+          Return only URLs (no content)
+        </label>
+      </fieldset>
+
+      <fieldset class="form-group options-fieldset">
+        <legend>Page Options</legend>
+        <div class="grid-layout">
+          <label class="checkbox-label">
+            <input type="checkbox" v-model="formData.pageOptions.onlyMainContent" />
+            Only main content
+          </label>
+          <label class="checkbox-label">
+            <input type="checkbox" v-model="formData.pageOptions.includeHtml" />
+            Include HTML
+          </label>
+          <label class="checkbox-label">
+            <input type="checkbox" v-model="formData.pageOptions.screenshot" />
+            Capture screenshots
+          </label>
+        </div>
+      </fieldset>
+
+      <fieldset class="form-group options-fieldset">
+        <legend>Webhook (optional)</legend>
+        <div class="form-group">
+          <label for="webhookUrl">Webhook URL:</label>
+          <input
+            id="webhookUrl"
+            v-model="formData.webhook.url"
+            type="url"
+            placeholder="https://example.com/webhook"
+          />
+        </div>
+        <div class="form-group">
+          <label for="webhookSecret">Webhook Secret:</label>
+          <input id="webhookSecret" v-model="formData.webhook.secret" type="text" />
+        </div>
+      </fieldset>
+
+      <button type="submit" class="primary-button" :disabled="loading">Start Crawl</button>
+    </form>
+
+    <div v-if="loading" class="status loading">
+      <div class="spinner"></div>
+      <span>Starting crawl...</span>
+    </div>
+
+    <div v-if="currentJobId" class="status success">
+      <p>
+        Crawl job started with ID: <strong>{{ currentJobId }}</strong>
+      </p>
+      <button class="secondary-button" @click="copyJobId">Copy Job ID</button>
+    </div>
+
+    <div class="status error" v-if="error">
+      <div class="error-icon">!</div>
+      <p>{{ error }}</p>
+    </div>
+
+    <section class="status-check">
+      <h2>Check Crawl Status</h2>
+      <form @submit.prevent="fetchStatus" class="status-form">
+        <input
+          id="statusJobId"
+          v-model="statusJobId"
+          type="text"
+          placeholder="Enter crawl job ID"
+          required
+        />
+        <button type="submit" class="secondary-button" :disabled="statusLoading">
+          Fetch Status
+        </button>
+        <button
+          type="button"
+          class="secondary-button"
+          :disabled="cancelLoading || !statusJobId"
+          @click="cancelCrawl"
+        >
+          Cancel Crawl
+        </button>
+      </form>
+      <div v-if="statusError" class="status error">
+        <div class="error-icon">!</div>
+        <p>{{ statusError }}</p>
+      </div>
+      <div v-if="statusLoading" class="status loading">
+        <div class="spinner"></div>
+        <span>Loading status...</span>
+      </div>
+      <div v-if="statusResult" class="result">
+        <div class="result-header">
+          <h3>Status</h3>
+          <button class="secondary-button" @click="downloadStatus">Download JSON</button>
+        </div>
+        <pre>{{ formattedStatus }}</pre>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, computed } from 'vue';
+import { getV2, postV2 } from '@/api/v2Client';
+
+interface CrawlerOptionsV2 {
+  includes?: string[];
+  excludes?: string[];
+  maxDepth?: number;
+  maxPages?: number;
+  returnOnlyUrls?: boolean;
+}
+
+interface PageOptionsV2 {
+  onlyMainContent: boolean;
+  includeHtml: boolean;
+  screenshot: boolean;
+}
+
+interface WebhookOptionsV2 {
+  url?: string;
+  secret?: string;
+}
+
+interface CrawlRequestV2 {
+  url: string;
+  crawlerOptions?: CrawlerOptionsV2;
+  pageOptions?: PageOptionsV2;
+  webhook?: WebhookOptionsV2;
+}
+
+interface CrawlStatusResponseV2 {
+  status?: string;
+  total?: number;
+  progress?: number;
+  data?: Array<Record<string, unknown>>;
+}
+
+export default defineComponent({
+  name: 'CrawlViewV2',
+  setup() {
+    const formData = ref({
+      url: '',
+      crawlerOptions: {
+        maxDepth: 3,
+        maxPages: 100,
+        returnOnlyUrls: false,
+      } as CrawlerOptionsV2,
+      pageOptions: {
+        onlyMainContent: false,
+        includeHtml: false,
+        screenshot: false,
+      } as PageOptionsV2,
+      webhook: {
+        url: '',
+        secret: '',
+      } as WebhookOptionsV2,
+    });
+
+    const includesInput = ref('');
+    const excludesInput = ref('');
+    const loading = ref(false);
+    const error = ref('');
+    const currentJobId = ref('');
+
+    const statusJobId = ref('');
+    const statusLoading = ref(false);
+    const cancelLoading = ref(false);
+    const statusError = ref('');
+    const statusResult = ref<CrawlStatusResponseV2 | null>(null);
+
+    /**
+     * Provides a formatted JSON representation of the current crawl status.
+     *
+     * @returns {string} The formatted JSON or an empty string when no status is available.
+     */
+    const formattedStatus = computed(() =>
+      statusResult.value ? JSON.stringify(statusResult.value, null, 2) : '',
+    );
+
+    /**
+     * Converts the includes and excludes text input into string arrays.
+     *
+     * @returns {{ includes: string[]; excludes: string[] }} The parsed pattern arrays.
+     */
+    const buildPatternLists = (): { includes: string[]; excludes: string[] } => {
+      const sanitize = (value: string): string[] =>
+        value
+          .split(/[,\n]/)
+          .map((item) => item.trim())
+          .filter((item) => item.length > 0);
+      return {
+        includes: sanitize(includesInput.value),
+        excludes: sanitize(excludesInput.value),
+      };
+    };
+
+    /**
+     * Builds the crawl request payload using the form state.
+     *
+     * @returns {CrawlRequestV2} The request payload.
+     */
+    const buildPayload = (): CrawlRequestV2 => {
+      const payload: CrawlRequestV2 = {
+        url: formData.value.url,
+      };
+
+      const { includes, excludes } = buildPatternLists();
+      const crawlerOptions: CrawlerOptionsV2 = {};
+      if (includes.length) {
+        crawlerOptions.includes = includes;
+      }
+      if (excludes.length) {
+        crawlerOptions.excludes = excludes;
+      }
+      if (
+        formData.value.crawlerOptions.maxDepth !== undefined &&
+        formData.value.crawlerOptions.maxDepth !== null
+      ) {
+        crawlerOptions.maxDepth = formData.value.crawlerOptions.maxDepth;
+      }
+      if (
+        formData.value.crawlerOptions.maxPages !== undefined &&
+        formData.value.crawlerOptions.maxPages !== null
+      ) {
+        crawlerOptions.maxPages = formData.value.crawlerOptions.maxPages;
+      }
+      if (formData.value.crawlerOptions.returnOnlyUrls) {
+        crawlerOptions.returnOnlyUrls = true;
+      }
+      if (Object.keys(crawlerOptions).length > 0) {
+        payload.crawlerOptions = crawlerOptions;
+      }
+
+      const pageOptions: PageOptionsV2 = {
+        onlyMainContent: formData.value.pageOptions.onlyMainContent,
+        includeHtml: formData.value.pageOptions.includeHtml,
+        screenshot: formData.value.pageOptions.screenshot,
+      };
+      if (pageOptions.onlyMainContent || pageOptions.includeHtml || pageOptions.screenshot) {
+        payload.pageOptions = pageOptions;
+      }
+
+      const webhookOptions: WebhookOptionsV2 = {};
+      if (formData.value.webhook.url?.trim()) {
+        webhookOptions.url = formData.value.webhook.url.trim();
+      }
+      if (formData.value.webhook.secret?.trim()) {
+        webhookOptions.secret = formData.value.webhook.secret.trim();
+      }
+      if (Object.keys(webhookOptions).length > 0) {
+        payload.webhook = webhookOptions;
+      }
+
+      return payload;
+    };
+
+    /**
+     * Initiates a crawl request using the configured form data.
+     *
+     * @returns {Promise<void>} Resolves when the crawl request finishes.
+     */
+    const startCrawl = async (): Promise<void> => {
+      loading.value = true;
+      error.value = '';
+      currentJobId.value = '';
+      try {
+        const payload = buildPayload();
+        const response = await postV2<{ jobId: string }>('crawl', payload);
+        currentJobId.value = response.data.jobId;
+        statusJobId.value = response.data.jobId;
+      } catch (err) {
+        error.value = err instanceof Error ? err.message : 'Failed to start crawl.';
+      } finally {
+        loading.value = false;
+      }
+    };
+
+    /**
+     * Copies the current job identifier to the clipboard.
+     *
+     * @returns {Promise<void>} Resolves once the copy operation completes.
+     */
+    const copyJobId = async (): Promise<void> => {
+      if (!currentJobId.value) {
+        return;
+      }
+      try {
+        await navigator.clipboard.writeText(currentJobId.value);
+      } catch (err) {
+        error.value = err instanceof Error ? err.message : 'Failed to copy job ID.';
+      }
+    };
+
+    /**
+     * Fetches the crawl status for the provided job identifier.
+     *
+     * @returns {Promise<void>} Resolves when the status request completes.
+     */
+    const fetchStatus = async (): Promise<void> => {
+      if (!statusJobId.value.trim()) {
+        statusError.value = 'Please provide a job ID.';
+        return;
+      }
+      statusLoading.value = true;
+      statusError.value = '';
+      statusResult.value = null;
+      try {
+        const response = await getV2<CrawlStatusResponseV2>(
+          `crawl/status/${statusJobId.value.trim()}`,
+        );
+        statusResult.value = response.data;
+      } catch (err) {
+        statusError.value = err instanceof Error ? err.message : 'Failed to fetch crawl status.';
+      } finally {
+        statusLoading.value = false;
+      }
+    };
+
+    /**
+     * Cancels the crawl job associated with the provided job identifier.
+     *
+     * @returns {Promise<void>} Resolves once the cancellation request completes.
+     */
+    const cancelCrawl = async (): Promise<void> => {
+      if (!statusJobId.value.trim()) {
+        statusError.value = 'Please provide a job ID to cancel.';
+        return;
+      }
+      cancelLoading.value = true;
+      statusError.value = '';
+      try {
+        await postV2('crawl/cancel', { jobId: statusJobId.value.trim() });
+      } catch (err) {
+        statusError.value = err instanceof Error ? err.message : 'Failed to cancel crawl.';
+      } finally {
+        cancelLoading.value = false;
+      }
+    };
+
+    /**
+     * Downloads the current crawl status as a JSON file.
+     */
+    const downloadStatus = (): void => {
+      if (!statusResult.value) {
+        return;
+      }
+      const blob = new Blob([JSON.stringify(statusResult.value, null, 2)], {
+        type: 'application/json',
+      });
+      const link = document.createElement('a');
+      link.href = URL.createObjectURL(blob);
+      link.download = 'crawl-status-v2.json';
+      link.click();
+      URL.revokeObjectURL(link.href);
+    };
+
+    return {
+      formData,
+      includesInput,
+      excludesInput,
+      loading,
+      error,
+      currentJobId,
+      statusJobId,
+      statusLoading,
+      cancelLoading,
+      statusError,
+      statusResult,
+      formattedStatus,
+      startCrawl,
+      copyJobId,
+      fetchStatus,
+      cancelCrawl,
+      downloadStatus,
+    };
+  },
+});
+</script>
+
+<style scoped>
+@import '@/assets/main.css';
+
+.crawl-view {
+  max-width: 900px;
+  margin: 0 auto;
+}
+
+.options-fieldset {
+  margin-bottom: 1.5rem;
+  border: 1px solid var(--color-border);
+  padding: 1rem;
+  border-radius: 8px;
+}
+
+.grid-layout {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 1rem;
+}
+
+.checkbox-label {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.status-check {
+  margin-top: 2rem;
+  border-top: 1px solid var(--color-border);
+  padding-top: 1.5rem;
+}
+
+.status-form {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  margin-bottom: 1rem;
+}
+
+.status-form input {
+  flex: 1 1 260px;
+}
+
+.secondary-button {
+  background-color: #f0f0f0;
+  border: 1px solid var(--color-border);
+  padding: 0.5rem 1rem;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.secondary-button:hover {
+  background-color: #e0e0e0;
+}
+</style>
diff --git a/src/views/ExtractView.vue b/src/views/ExtractView.vue
index 49ac635..98173db 100644
--- a/src/views/ExtractView.vue
+++ b/src/views/ExtractView.vue
@@ -1,250 +1,20 @@
 <template>
-  <div class="page-container extract-view">
-    <h1>Extract Data</h1>
-    <form @submit.prevent="runExtraction" class="extract-form">
-      <div class="form-group">
-        <label for="url-input">URLs (optional, one per line)</label>
-        <small class="hint">Leave blank when providing only a prompt.</small>
-        <textarea
-          id="url-input"
-          v-model="urlInput"
-          rows="4"
-          placeholder="https://example.com/blog/*"
-        ></textarea>
-      </div>
-
-      <div class="form-group">
-        <label for="prompt-input">Prompt</label>
-        <textarea
-          id="prompt-input"
-          v-model="promptInput"
-          rows="3"
-          placeholder="Describe the data to extract"
-        ></textarea>
-      </div>
-
-      <div class="form-group">
-        <label for="schema-input">JSON Schema (optional)</label>
-        <textarea
-          id="schema-input"
-          v-model="schemaString"
-          rows="5"
-          placeholder='{"title": "string"}'
-        ></textarea>
-        <small v-if="schemaError" class="schema-error">{{ schemaError }}</small>
-      </div>
-
-      <div class="options">
-        <label>
-          <input type="checkbox" v-model="options.enableWebSearch" />
-          Enable Web Search
-        </label>
-        <label>
-          <input type="checkbox" v-model="options.showSources" />
-          Show Sources
-        </label>
-      </div>
-
-      <button type="submit" class="primary-button" :disabled="loading || !!schemaError">
-        {{ loading ? 'Running...' : 'Extract' }}
-      </button>
-    </form>
-
-    <div v-if="loading && !result" class="status">Extracting...</div>
-    <div v-if="error" class="status error">{{ error }}</div>
-    <div v-if="result" class="result">
-      <div class="result-header">
-        <h2>Result</h2>
-        <button @click="downloadResult">Download JSON</button>
-      </div>
-      <pre>{{ formattedResult }}</pre>
-    </div>
-  </div>
+  <ExtractViewV2 v-if="isV2" />
+  <ExtractViewV1 v-else />
 </template>
 
 <script setup lang="ts">
-import { computed, inject, ref, watch } from 'vue';
-import { ExtractionApi, type ExtractDataRequest, type ExtractResponse } from '@/api-client';
-
-/**
- * Injection of the API client. The apiPlugin must provide an `extraction` instance.
- */
-const api = inject('api') as { extraction?: ExtractionApi } | undefined;
-if (!api?.extraction) {
-  throw new Error('Extraction API is not available');
-}
-
-const urlInput = ref(''); // Stores the URLs entered by the user.
-const promptInput = ref(''); // Stores the prompt for data extraction.
-const schemaString = ref(''); // Stores the JSON schema string provided by the user.
-const options = ref({ enableWebSearch: false, showSources: false }); // Stores extraction options.
-const loading = ref(false); // Indicates if an extraction request is in progress.
-const error = ref(''); // Stores any error messages from the extraction process.
-const result = ref<ExtractResponse['data'] | null>(null); // Stores the successful extraction result.
-const schemaError = ref<string | null>(null); // Stores error messages related to JSON schema parsing.
-const parsedSchema = ref<any>(undefined); // Holds the parsed schema object.
-
-/**
- * Watcher to parse the schema string and update the parsed schema.
- * Sets an error message if parsing fails.
- */
-watch(
-  schemaString,
-  (newVal) => {
-    if (!newVal.trim()) {
-      schemaError.value = null;
-      parsedSchema.value = undefined;
-      return;
-    }
-    try {
-      parsedSchema.value = JSON.parse(newVal);
-      schemaError.value = null;
-    } catch (e: any) {
-      schemaError.value = e.message;
-      parsedSchema.value = null;
-    }
-  },
-  { immediate: true },
-);
-
-/** Format result as pretty JSON. */
-const formattedResult = computed(() => (result.value ? JSON.stringify(result.value, null, 2) : ''));
-
-/**
- * Send the extraction request to the API.
- */
-const runExtraction = async (): Promise<void> => {
-  if (schemaError.value) return;
+import { computed } from 'vue';
+import { useApiVersion } from '@/config/apiVersion';
+import ExtractViewV1 from './ExtractViewV1.vue';
+import ExtractViewV2 from './ExtractViewV2.vue';
 
-  const urls = urlInput.value
-    .split('\n')
-    .map((u) => u.trim())
-    .filter((u) => u);
-  if (!urls.length && !promptInput.value.trim()) {
-    error.value = 'Please provide at least one URL or a prompt.';
-    return;
-  }
-
-  const payload: ExtractDataRequest = {
-    ...(urls.length && { urls }),
-    ...(promptInput.value && { prompt: promptInput.value }),
-    ...(parsedSchema.value && { schema: parsedSchema.value }),
-    ...(options.value.enableWebSearch && { enableWebSearch: true }),
-    ...(options.value.showSources && { showSources: true }),
-  } as ExtractDataRequest;
-
-  try {
-    loading.value = true;
-    error.value = '';
-    const response = await api.extraction.extractData(payload);
-    const respData = response.data;
-    if (respData.success && (respData as any).data) {
-      result.value = (respData as any).data;
-    } else {
-      throw new Error((respData as any).error || 'Extraction failed');
-    }
-  } catch (err: any) {
-    error.value = err?.message || 'Request failed';
-    result.value = null;
-  } finally {
-    loading.value = false;
-  }
-};
+const { apiVersion } = useApiVersion();
 
 /**
- * Download the JSON result to a file.
+ * Indicates whether the v2 extraction workflow should be displayed.
+ *
+ * @returns {boolean} True when the v2 API is active.
  */
-const downloadResult = (): void => {
-  if (!result.value) return;
-  const blob = new Blob([JSON.stringify(result.value, null, 2)], {
-    type: 'application/json',
-  });
-  const link = document.createElement('a');
-  link.href = URL.createObjectURL(blob);
-  link.download = 'extraction_result.json';
-  link.click();
-  URL.revokeObjectURL(link.href);
-};
+const isV2 = computed<boolean>(() => apiVersion.value === 'v2');
 </script>
-
-<style scoped>
-.extract-view {
-  max-width: 900px;
-  margin: 20px auto;
-  padding: 20px;
-  font-family: sans-serif;
-}
-
-.form-group {
-  margin-bottom: 15px;
-}
-
-label {
-  display: block;
-  margin-bottom: 5px;
-  font-weight: bold;
-}
-
-textarea {
-  width: 100%;
-  padding: 8px;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  font-family: 'Courier New', Courier, monospace;
-}
-
-.options {
-  margin-bottom: 10px;
-}
-
-button {
-  padding: 10px 15px;
-  background-color: #5cb85c;
-  color: white;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-}
-
-button:disabled {
-  background-color: #aaa;
-  cursor: not-allowed;
-}
-
-.status {
-  margin-top: 20px;
-}
-
-.status.error {
-  color: #a94442;
-}
-
-.result {
-  margin-top: 20px;
-  border: 1px solid #eee;
-  border-radius: 4px;
-  padding: 10px;
-}
-
-.result-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 10px;
-}
-
-pre {
-  white-space: pre-wrap;
-  word-wrap: break-word;
-}
-
-.schema-error {
-  color: #d9534f;
-}
-
-.hint {
-  display: block;
-  margin-top: 4px;
-  color: #666;
-}
-</style>
diff --git a/src/views/ExtractViewV1.vue b/src/views/ExtractViewV1.vue
new file mode 100644
index 0000000..49ac635
--- /dev/null
+++ b/src/views/ExtractViewV1.vue
@@ -0,0 +1,250 @@
+<template>
+  <div class="page-container extract-view">
+    <h1>Extract Data</h1>
+    <form @submit.prevent="runExtraction" class="extract-form">
+      <div class="form-group">
+        <label for="url-input">URLs (optional, one per line)</label>
+        <small class="hint">Leave blank when providing only a prompt.</small>
+        <textarea
+          id="url-input"
+          v-model="urlInput"
+          rows="4"
+          placeholder="https://example.com/blog/*"
+        ></textarea>
+      </div>
+
+      <div class="form-group">
+        <label for="prompt-input">Prompt</label>
+        <textarea
+          id="prompt-input"
+          v-model="promptInput"
+          rows="3"
+          placeholder="Describe the data to extract"
+        ></textarea>
+      </div>
+
+      <div class="form-group">
+        <label for="schema-input">JSON Schema (optional)</label>
+        <textarea
+          id="schema-input"
+          v-model="schemaString"
+          rows="5"
+          placeholder='{"title": "string"}'
+        ></textarea>
+        <small v-if="schemaError" class="schema-error">{{ schemaError }}</small>
+      </div>
+
+      <div class="options">
+        <label>
+          <input type="checkbox" v-model="options.enableWebSearch" />
+          Enable Web Search
+        </label>
+        <label>
+          <input type="checkbox" v-model="options.showSources" />
+          Show Sources
+        </label>
+      </div>
+
+      <button type="submit" class="primary-button" :disabled="loading || !!schemaError">
+        {{ loading ? 'Running...' : 'Extract' }}
+      </button>
+    </form>
+
+    <div v-if="loading && !result" class="status">Extracting...</div>
+    <div v-if="error" class="status error">{{ error }}</div>
+    <div v-if="result" class="result">
+      <div class="result-header">
+        <h2>Result</h2>
+        <button @click="downloadResult">Download JSON</button>
+      </div>
+      <pre>{{ formattedResult }}</pre>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, inject, ref, watch } from 'vue';
+import { ExtractionApi, type ExtractDataRequest, type ExtractResponse } from '@/api-client';
+
+/**
+ * Injection of the API client. The apiPlugin must provide an `extraction` instance.
+ */
+const api = inject('api') as { extraction?: ExtractionApi } | undefined;
+if (!api?.extraction) {
+  throw new Error('Extraction API is not available');
+}
+
+const urlInput = ref(''); // Stores the URLs entered by the user.
+const promptInput = ref(''); // Stores the prompt for data extraction.
+const schemaString = ref(''); // Stores the JSON schema string provided by the user.
+const options = ref({ enableWebSearch: false, showSources: false }); // Stores extraction options.
+const loading = ref(false); // Indicates if an extraction request is in progress.
+const error = ref(''); // Stores any error messages from the extraction process.
+const result = ref<ExtractResponse['data'] | null>(null); // Stores the successful extraction result.
+const schemaError = ref<string | null>(null); // Stores error messages related to JSON schema parsing.
+const parsedSchema = ref<any>(undefined); // Holds the parsed schema object.
+
+/**
+ * Watcher to parse the schema string and update the parsed schema.
+ * Sets an error message if parsing fails.
+ */
+watch(
+  schemaString,
+  (newVal) => {
+    if (!newVal.trim()) {
+      schemaError.value = null;
+      parsedSchema.value = undefined;
+      return;
+    }
+    try {
+      parsedSchema.value = JSON.parse(newVal);
+      schemaError.value = null;
+    } catch (e: any) {
+      schemaError.value = e.message;
+      parsedSchema.value = null;
+    }
+  },
+  { immediate: true },
+);
+
+/** Format result as pretty JSON. */
+const formattedResult = computed(() => (result.value ? JSON.stringify(result.value, null, 2) : ''));
+
+/**
+ * Send the extraction request to the API.
+ */
+const runExtraction = async (): Promise<void> => {
+  if (schemaError.value) return;
+
+  const urls = urlInput.value
+    .split('\n')
+    .map((u) => u.trim())
+    .filter((u) => u);
+  if (!urls.length && !promptInput.value.trim()) {
+    error.value = 'Please provide at least one URL or a prompt.';
+    return;
+  }
+
+  const payload: ExtractDataRequest = {
+    ...(urls.length && { urls }),
+    ...(promptInput.value && { prompt: promptInput.value }),
+    ...(parsedSchema.value && { schema: parsedSchema.value }),
+    ...(options.value.enableWebSearch && { enableWebSearch: true }),
+    ...(options.value.showSources && { showSources: true }),
+  } as ExtractDataRequest;
+
+  try {
+    loading.value = true;
+    error.value = '';
+    const response = await api.extraction.extractData(payload);
+    const respData = response.data;
+    if (respData.success && (respData as any).data) {
+      result.value = (respData as any).data;
+    } else {
+      throw new Error((respData as any).error || 'Extraction failed');
+    }
+  } catch (err: any) {
+    error.value = err?.message || 'Request failed';
+    result.value = null;
+  } finally {
+    loading.value = false;
+  }
+};
+
+/**
+ * Download the JSON result to a file.
+ */
+const downloadResult = (): void => {
+  if (!result.value) return;
+  const blob = new Blob([JSON.stringify(result.value, null, 2)], {
+    type: 'application/json',
+  });
+  const link = document.createElement('a');
+  link.href = URL.createObjectURL(blob);
+  link.download = 'extraction_result.json';
+  link.click();
+  URL.revokeObjectURL(link.href);
+};
+</script>
+
+<style scoped>
+.extract-view {
+  max-width: 900px;
+  margin: 20px auto;
+  padding: 20px;
+  font-family: sans-serif;
+}
+
+.form-group {
+  margin-bottom: 15px;
+}
+
+label {
+  display: block;
+  margin-bottom: 5px;
+  font-weight: bold;
+}
+
+textarea {
+  width: 100%;
+  padding: 8px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  font-family: 'Courier New', Courier, monospace;
+}
+
+.options {
+  margin-bottom: 10px;
+}
+
+button {
+  padding: 10px 15px;
+  background-color: #5cb85c;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+button:disabled {
+  background-color: #aaa;
+  cursor: not-allowed;
+}
+
+.status {
+  margin-top: 20px;
+}
+
+.status.error {
+  color: #a94442;
+}
+
+.result {
+  margin-top: 20px;
+  border: 1px solid #eee;
+  border-radius: 4px;
+  padding: 10px;
+}
+
+.result-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+pre {
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+.schema-error {
+  color: #d9534f;
+}
+
+.hint {
+  display: block;
+  margin-top: 4px;
+  color: #666;
+}
+</style>
diff --git a/src/views/ExtractViewV2.vue b/src/views/ExtractViewV2.vue
new file mode 100644
index 0000000..697833c
--- /dev/null
+++ b/src/views/ExtractViewV2.vue
@@ -0,0 +1,255 @@
+<template>
+  <div class="page-container extract-view">
+    <h1>Extract Data (API v2)</h1>
+    <form @submit.prevent="runExtraction" class="extract-form">
+      <div class="form-group">
+        <label for="html-input">HTML Content</label>
+        <textarea
+          id="html-input"
+          v-model="htmlInput"
+          rows="6"
+          placeholder="Paste raw HTML here"
+        ></textarea>
+      </div>
+
+      <div class="form-group">
+        <label for="markdown-input">Markdown Content</label>
+        <textarea
+          id="markdown-input"
+          v-model="markdownInput"
+          rows="6"
+          placeholder="Paste markdown content here"
+        ></textarea>
+        <small
+          >Provide either HTML or Markdown. HTML takes precedence when both are provided.</small
+        >
+      </div>
+
+      <fieldset class="form-group options-fieldset">
+        <legend>Extractor Options</legend>
+        <div class="form-group">
+          <label for="mode-select">Mode:</label>
+          <select id="mode-select" v-model="mode">
+            <option value="llm-extraction">LLM Extraction</option>
+          </select>
+        </div>
+        <div class="form-group">
+          <label for="prompt-input">Extraction Prompt</label>
+          <textarea
+            id="prompt-input"
+            v-model="promptInput"
+            rows="3"
+            placeholder="Describe the data to extract"
+          ></textarea>
+        </div>
+        <div class="form-group">
+          <label for="schema-input">Extraction Schema (JSON object)</label>
+          <textarea
+            id="schema-input"
+            v-model="schemaInput"
+            rows="6"
+            placeholder='{"title": {"type": "string"}}'
+          ></textarea>
+          <div v-if="schemaError" class="schema-error">{{ schemaError }}</div>
+        </div>
+      </fieldset>
+
+      <button type="submit" class="primary-button" :disabled="loading">
+        {{ loading ? 'Running…' : 'Extract' }}
+      </button>
+    </form>
+
+    <div v-if="error" class="status error">
+      <div class="error-icon">!</div>
+      <p>{{ error }}</p>
+    </div>
+
+    <div v-if="result" class="result">
+      <div class="result-header">
+        <h2>Result</h2>
+        <button class="secondary-button" @click="downloadResult">Download JSON</button>
+      </div>
+      <pre>{{ formattedResult }}</pre>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, computed, watch } from 'vue';
+import { postV2 } from '@/api/v2Client';
+
+interface ExtractResponseV2 {
+  success?: boolean;
+  data?: Record<string, unknown>;
+  error?: string;
+}
+
+export default defineComponent({
+  name: 'ExtractViewV2',
+  setup() {
+    const htmlInput = ref('');
+    const markdownInput = ref('');
+    const promptInput = ref('');
+    const schemaInput = ref('');
+    const mode = ref<'llm-extraction'>('llm-extraction');
+
+    const schemaError = ref<string | null>(null);
+    const parsedSchema = ref<Record<string, unknown> | null>(null);
+    const loading = ref(false);
+    const error = ref('');
+    const result = ref<Record<string, unknown> | null>(null);
+
+    /**
+     * Computes a human-readable JSON string for the extracted result.
+     *
+     * @returns {string} The formatted JSON or an empty string when no result is present.
+     */
+    const formattedResult = computed(() =>
+      result.value ? JSON.stringify(result.value, null, 2) : '',
+    );
+
+    /**
+     * Parses the JSON schema input when it changes and keeps validation errors in sync.
+     */
+    watch(
+      schemaInput,
+      (value) => {
+        if (!value.trim()) {
+          schemaError.value = 'Schema is required for API v2 extraction.';
+          parsedSchema.value = null;
+          return;
+        }
+        try {
+          const parsed = JSON.parse(value);
+          if (parsed === null || Array.isArray(parsed) || typeof parsed !== 'object') {
+            throw new Error('Schema must be a JSON object.');
+          }
+          parsedSchema.value = parsed as Record<string, unknown>;
+          schemaError.value = null;
+        } catch (err) {
+          schemaError.value = err instanceof Error ? err.message : 'Invalid schema JSON.';
+          parsedSchema.value = null;
+        }
+      },
+      { immediate: true },
+    );
+
+    /**
+     * Validates user input and sends the extraction request to the API.
+     *
+     * @returns {Promise<void>} Resolves when the extraction request completes.
+     */
+    const runExtraction = async (): Promise<void> => {
+      error.value = '';
+      result.value = null;
+
+      if (!htmlInput.value.trim() && !markdownInput.value.trim()) {
+        error.value = 'Please provide HTML or Markdown content.';
+        return;
+      }
+      if (schemaError.value || !parsedSchema.value) {
+        error.value = schemaError.value || 'A valid schema is required.';
+        return;
+      }
+
+      const payload: Record<string, unknown> = {
+        extractorOptions: {
+          mode: mode.value,
+          extractionSchema: parsedSchema.value,
+          ...(promptInput.value.trim() ? { extractionPrompt: promptInput.value.trim() } : {}),
+        },
+      };
+      if (htmlInput.value.trim()) {
+        payload.html = htmlInput.value;
+      }
+      if (markdownInput.value.trim()) {
+        payload.markdown = markdownInput.value;
+      }
+
+      loading.value = true;
+      try {
+        const response = await postV2<ExtractResponseV2>('extract', payload);
+        if (response.data.success && response.data.data) {
+          result.value = response.data.data;
+        } else {
+          throw new Error(response.data.error || 'Extraction failed.');
+        }
+      } catch (err) {
+        error.value = err instanceof Error ? err.message : 'Extraction request failed.';
+      } finally {
+        loading.value = false;
+      }
+    };
+
+    /**
+     * Downloads the extraction result as a JSON file.
+     */
+    const downloadResult = (): void => {
+      if (!result.value) {
+        return;
+      }
+      const blob = new Blob([JSON.stringify(result.value, null, 2)], {
+        type: 'application/json',
+      });
+      const link = document.createElement('a');
+      link.href = URL.createObjectURL(blob);
+      link.download = 'extract-result-v2.json';
+      link.click();
+      URL.revokeObjectURL(link.href);
+    };
+
+    return {
+      htmlInput,
+      markdownInput,
+      promptInput,
+      schemaInput,
+      schemaError,
+      loading,
+      error,
+      result,
+      formattedResult,
+      mode,
+      runExtraction,
+      downloadResult,
+    };
+  },
+});
+</script>
+
+<style scoped>
+@import '@/assets/main.css';
+
+.extract-view {
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.extract-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.options-fieldset {
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  padding: 1rem;
+}
+
+.schema-error {
+  color: #c0392b;
+  margin-top: 0.5rem;
+}
+
+.secondary-button {
+  background-color: #f0f0f0;
+  border: 1px solid var(--color-border);
+  padding: 0.5rem 1rem;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.secondary-button:hover {
+  background-color: #e0e0e0;
+}
+</style>
diff --git a/src/views/ScrapeView.vue b/src/views/ScrapeView.vue
index f346f0b..f2c48b8 100644
--- a/src/views/ScrapeView.vue
+++ b/src/views/ScrapeView.vue
@@ -1,793 +1,20 @@
 <template>
-  <div class="page-container">
-    <h1>Scrape Configuration</h1>
-
-    <form class="scrape-config-form" @submit.prevent="handleSubmit">
-      <div class="form-group">
-        <label for="url">URL:</label>
-        <input id="url" v-model="formData.url" type="text" required />
-      </div>
-
-      <div class="form-group">
-        <label for="formats">Output Formats:</label>
-        <select id="formats" v-model="formData.scrapeOptions.formats" multiple>
-          <option value="markdown">Markdown</option>
-          <option value="html">HTML</option>
-          <option value="rawHtml">Raw HTML</option>
-          <option value="links">Links</option>
-          <option value="screenshot">Screenshot (Viewport)</option>
-          <option value="screenshot@fullPage">Screenshot (Full Page)</option>
-          <option value="json">JSON (Requires Extractor Options)</option>
-          <option value="changeTracking">Change Tracking (Requires Markdown)</option>
-        </select>
-        <small>Select one or more formats.</small>
-      </div>
-
-      <!-- Change Tracking Options (conditional) -->
-      <div v-if="formData.scrapeOptions.formats.includes('changeTracking')" class="form-group">
-        <label for="changeTrackingThreshold">Change Threshold (%):</label>
-        <input
-          id="changeTrackingThreshold"
-          type="number"
-          min="0"
-          max="100"
-          v-model.number="formData.changeTrackingOptions.threshold"
-        />
-        <small>Minimum percentage change to trigger tracking.</small>
-
-        <label for="changeTrackingFrequency">Check Frequency (minutes):</label>
-        <input
-          id="changeTrackingFrequency"
-          type="number"
-          min="1"
-          v-model.number="formData.changeTrackingOptions.frequency"
-        />
-        <small>Frequency to check for changes.</small>
-      </div>
-
-      <fieldset class="form-group options-fieldset">
-        <legend
-          class="collapsible-header"
-          @click="isScrapeOptionsCollapsed = !isScrapeOptionsCollapsed"
-        >
-          Scrape Options
-        </legend>
-        <div v-show="!isScrapeOptionsCollapsed">
-          <label>
-            <input type="checkbox" v-model="formData.scrapeOptions.onlyMainContent" />
-            Only Main Content (exclude headers, footers, etc.)
-          </label>
-          <div class="form-group">
-            <label for="includeTags">Include Tags (comma separated):</label>
-            <input
-              id="includeTags"
-              type="text"
-              v-model="formData.scrapeOptions.includeTags"
-              placeholder="e.g. p, div, span"
-            />
-          </div>
-          <div class="form-group">
-            <label for="excludeTags">Exclude Tags (comma separated):</label>
-            <input
-              id="excludeTags"
-              type="text"
-              v-model="formData.scrapeOptions.excludeTags"
-              placeholder="e.g. script, style"
-            />
-          </div>
-        </div>
-      </fieldset>
-
-      <fieldset class="form-group options-fieldset">
-        <legend
-          class="collapsible-header"
-          @click="isPageOptionsCollapsed = !isPageOptionsCollapsed"
-        >
-          Page Options
-        </legend>
-        <div v-show="!isPageOptionsCollapsed">
-          <div class="grid-layout">
-            <div class="form-group">
-              <label for="waitFor">Wait For (ms):</label>
-              <input
-                id="waitFor"
-                v-model.number="formData.pageOptions.waitFor"
-                type="number"
-                min="0"
-              />
-              <small>Delay before fetching content.</small>
-            </div>
-            <div class="form-group">
-              <label for="timeout">Timeout (ms):</label>
-              <input
-                id="timeout"
-                v-model.number="formData.pageOptions.timeout"
-                type="number"
-                min="0"
-              />
-              <small>Page request timeout (default: 30000).</small>
-            </div>
-            <div class="form-group">
-              <label for="proxy">Proxy:</label>
-              <select id="proxy" v-model="formData.pageOptions.proxy">
-                <option value="">Auto</option>
-                <option value="basic">Basic</option>
-                <option value="stealth">Stealth</option>
-              </select>
-              <small>Proxy type for request.</small>
-            </div>
-            <label class="checkbox-label">
-              <input type="checkbox" v-model="formData.pageOptions.mobile" />
-              Emulate Mobile Device
-            </label>
-            <label class="checkbox-label">
-              <input type="checkbox" v-model="formData.pageOptions.skipTlsVerification" />
-              Skip TLS Verification
-            </label>
-            <label class="checkbox-label">
-              <input type="checkbox" v-model="formData.pageOptions.blockAds" />
-              Block Ads & Popups
-            </label>
-            <label class="checkbox-label">
-              <input type="checkbox" v-model="formData.pageOptions.removeBase64Images" />
-              Remove Base64 Images
-            </label>
-          </div>
-          <div class="form-group">
-            <label for="headers">HTTP Headers (JSON format):</label>
-            <textarea
-              id="headers"
-              v-model="headersJson"
-              rows="4"
-              placeholder='{"Authorization": "Bearer token", "Accept": "application/json"}'
-            ></textarea>
-            <div v-if="headersError" class="error-message">{{ headersError }}</div>
-            <small>Enter HTTP headers as JSON object.</small>
-          </div>
-          <div class="form-group">
-            <label for="action">HTTP Action:</label>
-            <select id="action" v-model="formData.pageOptions.action">
-              <option value="GET">GET</option>
-              <option value="POST">POST</option>
-              <option value="PUT">PUT</option>
-              <option value="DELETE">DELETE</option>
-              <option value="PATCH">PATCH</option>
-            </select>
-            <small>Select HTTP method for the request.</small>
-          </div>
-          <div class="form-group">
-            <label for="location">Location:</label>
-            <select id="location" v-model="formData.pageOptions.location">
-              <option value="">Auto</option>
-              <option value="US">US</option>
-              <option value="EU">EU</option>
-              <option value="ASIA">ASIA</option>
-            </select>
-            <small>Select request location.</small>
-          </div>
-        </div>
-      </fieldset>
-
-      <div
-        v-if="
-          formData.scrapeOptions.formats.includes(ScrapeAndExtractFromUrlRequestFormatsEnum.Extract)
-        "
-        class="form-group"
-      >
-        <label for="extractorOptions">Extractor Options (JSON format):</label>
-        <textarea
-          id="extractorOptions"
-          v-model="extractorOptionsJson"
-          rows="8"
-          placeholder='e.g. {"key": "value"}'
-        ></textarea>
-        <small>Enter JSON options for extraction. Must be valid JSON.</small>
-        <div v-if="extractorOptionsError" class="error-message">
-          {{ extractorOptionsError }}
-        </div>
-      </div>
-
-      <button type="submit" class="primary-button">Scrape</button>
-    </form>
-
-    <div v-if="loading" class="status loading">
-      <div class="spinner"></div>
-      <span>Processing your request...</span>
-    </div>
-
-    <div v-if="error" class="status error">
-      <div class="error-icon">!</div>
-      <div>
-        <h3>Error occurred</h3>
-        <p>{{ error }}</p>
-        <button class="primary-button" @click="error = ''">Try again</button>
-      </div>
-    </div>
-
-    <div v-if="result" class="result">
-      <div class="result-header">
-        <h2>Results</h2>
-        <div class="download-options">
-          <button v-for="fmt in downloadFormats" :key="fmt" @click="downloadResult(fmt)">
-            Download {{ fmt }}
-          </button>
-        </div>
-      </div>
-      <pre>{{ result }}</pre>
-    </div>
-  </div>
+  <ScrapeViewV2 v-if="isV2" />
+  <ScrapeViewV1 v-else />
 </template>
 
-<script lang="ts">
-import { defineComponent, ref, inject, watch, computed } from 'vue';
-import { useRouter } from 'vue-router';
-import {
-  ScrapeAndExtractFromUrlRequestFormatsEnum,
-  type ScrapeAndExtractFromUrlRequest,
-  type ScrapeResponse,
-  type ScrapingApi,
-  type ScrapeAndExtractFromUrlRequestExtract,
-} from '../api-client/api';
-
-type ScrapeResult = ScrapeResponse;
-
-/**
- * @typedef {object} FormDataPageOptions
- * @property {number} [waitFor] - Delay before fetching content in milliseconds.
- * @property {boolean} [mobile] - Emulate mobile device.
- * @property {boolean} [skipTlsVerification] - Skip TLS verification.
- * @property {number} [timeout] - Page request timeout in milliseconds.
- * @property {boolean} [blockAds] - Block ads and popups.
- * @property {boolean} [removeBase64Images] - Remove Base64 encoded images.
- * @property {'basic' | 'stealth' | ''} [proxy] - Proxy type for the request ('basic', 'stealth', or empty for auto).
- * @property {Record<string, string>} [headers] - HTTP headers as a JSON object.
- * @property {string} [action] - HTTP method for the request (e.g., 'GET', 'POST').
- * @property {string} [location] - Request location (e.g., 'US', 'EU', 'ASIA').
- */
-interface FormDataPageOptions {
-  waitFor?: number;
-  mobile?: boolean;
-  skipTlsVerification?: boolean;
-  timeout?: number;
-  blockAds?: boolean;
-  removeBase64Images?: boolean;
-  proxy?: 'basic' | 'stealth' | '';
-  headers?: Record<string, string>;
-  action?: string;
-  location?: string;
-}
-
-/**
- * @typedef {object} FormDataScrapeOptions
- * @property {string[]} formats - Array of output formats (e.g., "json", "markdown").
- * @property {boolean} [onlyMainContent] - Scrape only the main content, excluding headers, footers, etc.
- * @property {string} [includeTags] - Comma-separated list of HTML tags to include.
- * @property {string} [excludeTags] - Comma-separated list of HTML tags to exclude.
- */
-interface FormDataScrapeOptions {
-  formats: string[];
-  onlyMainContent?: boolean;
-  includeTags?: string;
-  excludeTags?: string;
-}
-
-/**
- * @typedef {object} FormDataExtractorOptions
- * @extends Partial<ScrapeAndExtractFromUrlRequestExtract>
- * @description Extractor options for JSON format, extending the API request structure.
- */
-interface FormDataExtractorOptions extends Partial<ScrapeAndExtractFromUrlRequestExtract> {}
-
-/**
- * @typedef {object} FormDataChangeTrackingOptions
- * @property {number} threshold - Minimum percentage change to trigger tracking.
- * @property {number} frequency - Frequency in minutes to check for changes.
- */
-interface FormDataChangeTrackingOptions {
-  threshold: number;
-  frequency: number;
-}
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useApiVersion } from '@/config/apiVersion';
+import ScrapeViewV1 from './ScrapeViewV1.vue';
+import ScrapeViewV2 from './ScrapeViewV2.vue';
 
-/**
- * @typedef {object} FormData
- * @property {string} url - The URL to scrape.
- * @property {FormDataPageOptions} pageOptions - Options related to page loading and network requests.
- * @property {FormDataScrapeOptions} scrapeOptions - Options related to content scraping.
- * @property {FormDataExtractorOptions} [extractorOptions] - Options for data extraction when 'json' format is selected.
- * @property {FormDataChangeTrackingOptions} changeTrackingOptions - Options for change tracking.
- */
-interface FormData {
-  url: string;
-  pageOptions: FormDataPageOptions;
-  scrapeOptions: FormDataScrapeOptions;
-  extractorOptions?: FormDataExtractorOptions;
-  changeTrackingOptions: FormDataChangeTrackingOptions;
-}
+const { apiVersion } = useApiVersion();
 
 /**
- * ScrapeView component for configuring and initiating web scraping requests.
- * Allows users to specify a URL, output formats, and various advanced options
- * for page loading, content filtering, data extraction, and change tracking.
+ * Indicates whether the v2 API is active.
+ *
+ * @returns {boolean} True when the selected API version is v2.
  */
-export default defineComponent({
-  name: 'ScrapeView',
-  /**
-   * Setup function for the ScrapeView component.
-   * Initializes reactive data, handles form submission, and manages API interactions.
-   * @returns {object} Reactive properties and methods for the component.
-   */
-  setup() {
-    const router = useRouter();
-    // Inject the API client for scraping operations.
-    const api = inject('api') as { scraping: ScrapingApi };
-
-    /**
-     * Reactive form data for scrape configuration.
-     * @type {Ref<FormData>}
-     */
-    const formData = ref<FormData>({
-      url: '',
-      pageOptions: {
-        waitFor: undefined,
-        mobile: false,
-        skipTlsVerification: false,
-        timeout: undefined,
-        blockAds: true,
-        removeBase64Images: true,
-        proxy: '',
-        headers: {},
-        action: 'GET', // Default HTTP action
-        location: '',
-      },
-      scrapeOptions: {
-        onlyMainContent: true,
-        formats: [ScrapeAndExtractFromUrlRequestFormatsEnum.Markdown],
-        includeTags: '',
-        excludeTags: '',
-      },
-      extractorOptions: {},
-      changeTrackingOptions: {
-        threshold: 10,
-        frequency: 60,
-      },
-    });
-
-    /**
-     * Reactive state for collapsing/expanding scrape options section.
-     * @type {Ref<boolean>}
-     */
-    const isScrapeOptionsCollapsed = ref(true);
-    /**
-     * Reactive state for collapsing/expanding page options section.
-     * @type {Ref<boolean>}
-     */
-    const isPageOptionsCollapsed = ref(true);
-
-    /**
-     * Reactive state indicating if a request is in progress.
-     * @type {Ref<boolean>}
-     */
-    const loading = ref(false);
-    /**
-     * Reactive state for displaying error messages.
-     * @type {Ref<string>}
-     */
-    const error = ref('');
-    /**
-     * Reactive state for storing the scrape result.
-     * @type {Ref<ScrapeResult | null>}
-     */
-    const result = ref<ScrapeResult | null>(null);
-
-    /**
-     * Computed property to determine available download formats based on selected scrape formats.
-     * Ensures 'json' is always an option if results are present.
-     * @returns {string[]} Array of unique download formats.
-     */
-    const downloadFormats = computed(() =>
-      Array.from(new Set(['json', ...formData.value.scrapeOptions.formats])),
-    );
-
-    /**
-     * Validates if a given string is a well-formed URL.
-     * @param {string} url - The URL string to validate.
-     * @returns {boolean} True if the URL is valid, false otherwise.
-     */
-    const isValidUrl = (url: string): boolean => {
-      try {
-        new URL(url);
-        return true;
-      } catch {
-        return false;
-      }
-    };
-
-    /**
-     * Handles the form submission for initiating a scrape request.
-     * Validates input, constructs the API payload, and handles API response or errors.
-     * @async
-     * @returns {Promise<void>}
-     */
-    const handleSubmit = async (): Promise<void> => {
-      if (!isValidUrl(formData.value.url)) {
-        error.value = 'Please enter a valid URL (e.g., https://example.com)';
-        return;
-      }
-
-      if (
-        !formData.value.scrapeOptions.formats ||
-        formData.value.scrapeOptions.formats.length === 0
-      ) {
-        error.value = 'Please select at least one output format.';
-        return;
-      }
-
-      // Construct the request payload matching the ScrapeAndExtractFromUrlRequest interface.
-      const requestPayload: ScrapeAndExtractFromUrlRequest = {
-        url: formData.value.url,
-        ...(formData.value.pageOptions.waitFor !== undefined &&
-          formData.value.pageOptions.waitFor > 0 && {
-            waitFor: formData.value.pageOptions.waitFor,
-          }),
-        ...(formData.value.pageOptions.mobile === true && { mobile: true }),
-        ...(formData.value.pageOptions.skipTlsVerification === true && {
-          skipTlsVerification: true,
-        }),
-        ...(formData.value.pageOptions.timeout !== undefined &&
-          formData.value.pageOptions.timeout > 0 &&
-          formData.value.pageOptions.timeout !== 30000 && {
-            timeout: formData.value.pageOptions.timeout,
-          }),
-        ...(formData.value.pageOptions.blockAds === false && {
-          blockAds: false,
-        }),
-        ...(formData.value.pageOptions.removeBase64Images === false && {
-          removeBase64Images: false,
-        }),
-        ...(formData.value.pageOptions.proxy &&
-          formData.value.pageOptions.proxy !== '' && {
-            proxy: formData.value.pageOptions.proxy as 'basic' | 'stealth',
-          }),
-        ...(formData.value.pageOptions.headers &&
-          Object.keys(formData.value.pageOptions.headers).length > 0 && {
-            headers: formData.value.pageOptions.headers,
-          }),
-        ...(formData.value.pageOptions.location &&
-          formData.value.pageOptions.location !== '' && {
-            location: { country: formData.value.pageOptions.location },
-          }),
-
-        // Include scrapeOptions properties directly.
-        formats: formData.value.scrapeOptions
-          .formats as unknown as ScrapeAndExtractFromUrlRequestFormatsEnum[],
-        ...(formData.value.scrapeOptions.onlyMainContent === false && {
-          onlyMainContent: false,
-        }),
-        ...(formData.value.scrapeOptions.includeTags &&
-          formData.value.scrapeOptions.includeTags.trim() !== '' && {
-            includeTags: formData.value.scrapeOptions.includeTags
-              .split(',')
-              .map((tag) => tag.trim())
-              .filter((tag) => tag !== ''),
-          }),
-        ...(formData.value.scrapeOptions.excludeTags &&
-          formData.value.scrapeOptions.excludeTags.trim() !== '' && {
-            excludeTags: formData.value.scrapeOptions.excludeTags
-              .split(',')
-              .map((tag) => tag.trim())
-              .filter((tag) => tag !== ''),
-          }),
-
-        // Include extractorOptions and changeTrackingOptions if applicable.
-        ...(formData.value.scrapeOptions.formats.includes(
-          ScrapeAndExtractFromUrlRequestFormatsEnum.Extract,
-        ) &&
-          formData.value.extractorOptions &&
-          Object.keys(formData.value.extractorOptions).length > 0 && {
-            extract: formData.value.extractorOptions as ScrapeAndExtractFromUrlRequestExtract,
-          }),
-        ...(formData.value.scrapeOptions.formats.includes('changeTracking') && {
-          changeTrackingOptions: {
-            threshold: formData.value.changeTrackingOptions?.threshold ?? 10,
-            frequency: formData.value.changeTrackingOptions?.frequency ?? 60,
-          },
-        }),
-      };
-
-      try {
-        loading.value = true;
-        error.value = '';
-        console.log('Sending scrape request:', JSON.stringify(requestPayload, null, 2));
-        const response = await api.scraping.scrapeAndExtractFromUrl(requestPayload);
-        result.value = response.data;
-      } catch (err: unknown) {
-        if (err instanceof Error) {
-          if (err.message.includes('401')) {
-            router.push({ name: 'ApiConfig' });
-            return;
-          }
-          error.value = err.message.includes('404')
-            ? 'Page not found (404)'
-            : err.message.includes('Network Error')
-              ? 'Network connection failed'
-              : err.message;
-        } else {
-          error.value = 'An unexpected error occurred.';
-        }
-      } finally {
-        loading.value = false;
-      }
-    };
-
-    /**
-     * Initiates the download of the scrape result in a specified format.
-     * Handles different content types (screenshot, markdown, HTML, JSON).
-     * @param {string} format - The desired format for download (e.g., 'json', 'markdown', 'screenshot').
-     * @returns {void}
-     */
-    const downloadResult = (format: string): void => {
-      if (!result.value?.data) return;
-
-      // Map specific format names to their corresponding data keys in the result.
-      const formatMap: Record<string, string> = {
-        extract: 'llm_extraction',
-        'screenshot@fullPage': 'screenshot',
-      };
-
-      const key = formatMap[format] ?? format;
-      const data: unknown =
-        format === 'json'
-          ? result.value.data
-          : result.value.data[key as keyof typeof result.value.data];
-
-      // Handle screenshot download separately as it's a data URL.
-      if (format.startsWith('screenshot') && typeof data === 'string') {
-        const link = document.createElement('a');
-        link.href = data;
-        link.setAttribute('download', `scrape-result-${format}.png`);
-        document.body.appendChild(link);
-        link.click();
-        document.body.removeChild(link);
-        return;
-      }
-
-      if (data === undefined) return;
-
-      let mimeType = 'application/json';
-      let extension = 'json';
-      let contentStr = '';
-
-      // Determine MIME type and extension based on format.
-      if (typeof data === 'string') {
-        contentStr = data;
-        if (format === 'markdown') {
-          mimeType = 'text/markdown';
-          extension = 'md';
-        } else if (format === 'html' || format === 'rawHtml') {
-          mimeType = 'text/html';
-          extension = 'html';
-        } else {
-          mimeType = 'text/plain';
-          extension = 'txt';
-        }
-      } else {
-        // Stringify JSON data for download.
-        contentStr = JSON.stringify(data, null, 2);
-      }
-
-      // Create a Blob and a download link for the content.
-      const dataUri = `data:${mimeType};charset=utf-8,${encodeURIComponent(contentStr)}`;
-      const link = document.createElement('a');
-      link.setAttribute('href', dataUri);
-      link.setAttribute('download', `scrape-result-${format}.${extension}`);
-      document.body.appendChild(link);
-      link.click();
-      document.body.removeChild(link);
-    };
-
-    /**
-     * Reactive variable for the JSON string of extractor options.
-     * @type {Ref<string>}
-     */
-    const extractorOptionsJson = ref(
-      JSON.stringify(formData.value.extractorOptions || {}, null, 2),
-    );
-    /**
-     * Reactive variable for displaying extractor options JSON parsing errors.
-     * @type {Ref<string>}
-     */
-    const extractorOptionsError = ref('');
-
-    /**
-     * Watcher for `extractorOptionsJson` to parse and update `formData.extractorOptions`.
-     * Sets an error message if parsing fails.
-     */
-    watch(
-      extractorOptionsJson,
-      (newVal) => {
-        try {
-          formData.value.extractorOptions = newVal ? JSON.parse(newVal) : {};
-          extractorOptionsError.value = '';
-        } catch (e: any) {
-          extractorOptionsError.value = `Invalid JSON: ${e.message}`;
-        }
-      },
-      { immediate: true },
-    );
-
-    /**
-     * Reactive variable for the JSON string of HTTP headers.
-     * @type {Ref<string>}
-     */
-    const headersJson = ref(JSON.stringify(formData.value.pageOptions.headers || {}, null, 2));
-    /**
-     * Reactive variable for displaying HTTP headers JSON parsing errors.
-     * @type {Ref<string>}
-     */
-    const headersError = ref('');
-
-    /**
-     * Watcher for `headersJson` to parse and update `formData.pageOptions.headers`.
-     * Sets an error message when the JSON is invalid.
-     */
-    watch(
-      headersJson,
-      (newVal) => {
-        try {
-          formData.value.pageOptions.headers = newVal ? JSON.parse(newVal) : {};
-          headersError.value = '';
-        } catch (e: any) {
-          headersError.value = `Invalid JSON: ${e.message}`;
-        }
-      },
-      { immediate: true },
-    );
-
-    return {
-      formData,
-      loading,
-      headersJson,
-      headersError,
-      error,
-      result,
-      handleSubmit,
-      downloadResult,
-      downloadFormats,
-      extractorOptionsJson,
-      extractorOptionsError,
-      ScrapeAndExtractFromUrlRequestFormatsEnum,
-      isScrapeOptionsCollapsed,
-      isPageOptionsCollapsed,
-    };
-  },
-});
+const isV2 = computed<boolean>(() => apiVersion.value === 'v2');
 </script>
-
-<style scoped>
-.scrape-view {
-  max-width: 800px;
-  margin: 0 auto;
-  padding: 20px;
-}
-.form-group {
-  margin-bottom: 20px; /* Increased margin */
-}
-.options-fieldset {
-  border: 1px solid #ccc;
-  padding: 15px;
-  border-radius: 4px;
-  margin-bottom: 20px;
-}
-.options-fieldset legend {
-  font-weight: bold;
-  padding: 0 5px;
-}
-.grid-layout {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Responsive grid */
-  gap: 15px; /* Gap between grid items */
-}
-.checkbox-label {
-  /* Style for labels containing checkboxes */
-  display: flex;
-  align-items: center;
-  gap: 5px;
-}
-.form-group small {
-  /* Style for help text */
-  display: block;
-  font-size: 0.8em;
-  color: #666;
-  margin-top: 3px;
-}
-.status {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 15px;
-  border-radius: 4px;
-  margin: 20px 0;
-}
-
-.loading {
-  background: #f0f7ff;
-  color: #0066cc;
-}
-
-.error {
-  background: #fff0f0;
-  color: #cc0000;
-}
-
-.collapsible-header {
-  cursor: pointer;
-}
-
-.result {
-  margin-top: 20px;
-  padding: 15px;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  background: #f9f9f9;
-}
-
-.result-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 10px;
-}
-
-.result-header h2 {
-  margin: 0;
-}
-
-.download-options button {
-  margin-left: 10px;
-  padding: 5px 10px;
-  background-color: #007bff;
-  color: white;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-}
-
-.download-options button:hover {
-  background-color: #0056b3;
-}
-
-.result pre {
-  white-space: pre-wrap;
-  word-wrap: break-word;
-  background: #eee;
-  color: #333;
-  padding: 10px;
-  border-radius: 4px;
-  max-height: 400px;
-  overflow-y: auto;
-}
-
-.error-message {
-  color: red;
-  font-size: 0.9em;
-  margin-top: 5px;
-}
-
-.spinner {
-  border: 4px solid rgba(0, 0, 0, 0.1);
-  border-left-color: #0066cc;
-  border-radius: 50%;
-  width: 20px;
-  height: 20px;
-  animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-</style>
diff --git a/src/views/ScrapeViewV1.vue b/src/views/ScrapeViewV1.vue
new file mode 100644
index 0000000..f346f0b
--- /dev/null
+++ b/src/views/ScrapeViewV1.vue
@@ -0,0 +1,793 @@
+<template>
+  <div class="page-container">
+    <h1>Scrape Configuration</h1>
+
+    <form class="scrape-config-form" @submit.prevent="handleSubmit">
+      <div class="form-group">
+        <label for="url">URL:</label>
+        <input id="url" v-model="formData.url" type="text" required />
+      </div>
+
+      <div class="form-group">
+        <label for="formats">Output Formats:</label>
+        <select id="formats" v-model="formData.scrapeOptions.formats" multiple>
+          <option value="markdown">Markdown</option>
+          <option value="html">HTML</option>
+          <option value="rawHtml">Raw HTML</option>
+          <option value="links">Links</option>
+          <option value="screenshot">Screenshot (Viewport)</option>
+          <option value="screenshot@fullPage">Screenshot (Full Page)</option>
+          <option value="json">JSON (Requires Extractor Options)</option>
+          <option value="changeTracking">Change Tracking (Requires Markdown)</option>
+        </select>
+        <small>Select one or more formats.</small>
+      </div>
+
+      <!-- Change Tracking Options (conditional) -->
+      <div v-if="formData.scrapeOptions.formats.includes('changeTracking')" class="form-group">
+        <label for="changeTrackingThreshold">Change Threshold (%):</label>
+        <input
+          id="changeTrackingThreshold"
+          type="number"
+          min="0"
+          max="100"
+          v-model.number="formData.changeTrackingOptions.threshold"
+        />
+        <small>Minimum percentage change to trigger tracking.</small>
+
+        <label for="changeTrackingFrequency">Check Frequency (minutes):</label>
+        <input
+          id="changeTrackingFrequency"
+          type="number"
+          min="1"
+          v-model.number="formData.changeTrackingOptions.frequency"
+        />
+        <small>Frequency to check for changes.</small>
+      </div>
+
+      <fieldset class="form-group options-fieldset">
+        <legend
+          class="collapsible-header"
+          @click="isScrapeOptionsCollapsed = !isScrapeOptionsCollapsed"
+        >
+          Scrape Options
+        </legend>
+        <div v-show="!isScrapeOptionsCollapsed">
+          <label>
+            <input type="checkbox" v-model="formData.scrapeOptions.onlyMainContent" />
+            Only Main Content (exclude headers, footers, etc.)
+          </label>
+          <div class="form-group">
+            <label for="includeTags">Include Tags (comma separated):</label>
+            <input
+              id="includeTags"
+              type="text"
+              v-model="formData.scrapeOptions.includeTags"
+              placeholder="e.g. p, div, span"
+            />
+          </div>
+          <div class="form-group">
+            <label for="excludeTags">Exclude Tags (comma separated):</label>
+            <input
+              id="excludeTags"
+              type="text"
+              v-model="formData.scrapeOptions.excludeTags"
+              placeholder="e.g. script, style"
+            />
+          </div>
+        </div>
+      </fieldset>
+
+      <fieldset class="form-group options-fieldset">
+        <legend
+          class="collapsible-header"
+          @click="isPageOptionsCollapsed = !isPageOptionsCollapsed"
+        >
+          Page Options
+        </legend>
+        <div v-show="!isPageOptionsCollapsed">
+          <div class="grid-layout">
+            <div class="form-group">
+              <label for="waitFor">Wait For (ms):</label>
+              <input
+                id="waitFor"
+                v-model.number="formData.pageOptions.waitFor"
+                type="number"
+                min="0"
+              />
+              <small>Delay before fetching content.</small>
+            </div>
+            <div class="form-group">
+              <label for="timeout">Timeout (ms):</label>
+              <input
+                id="timeout"
+                v-model.number="formData.pageOptions.timeout"
+                type="number"
+                min="0"
+              />
+              <small>Page request timeout (default: 30000).</small>
+            </div>
+            <div class="form-group">
+              <label for="proxy">Proxy:</label>
+              <select id="proxy" v-model="formData.pageOptions.proxy">
+                <option value="">Auto</option>
+                <option value="basic">Basic</option>
+                <option value="stealth">Stealth</option>
+              </select>
+              <small>Proxy type for request.</small>
+            </div>
+            <label class="checkbox-label">
+              <input type="checkbox" v-model="formData.pageOptions.mobile" />
+              Emulate Mobile Device
+            </label>
+            <label class="checkbox-label">
+              <input type="checkbox" v-model="formData.pageOptions.skipTlsVerification" />
+              Skip TLS Verification
+            </label>
+            <label class="checkbox-label">
+              <input type="checkbox" v-model="formData.pageOptions.blockAds" />
+              Block Ads & Popups
+            </label>
+            <label class="checkbox-label">
+              <input type="checkbox" v-model="formData.pageOptions.removeBase64Images" />
+              Remove Base64 Images
+            </label>
+          </div>
+          <div class="form-group">
+            <label for="headers">HTTP Headers (JSON format):</label>
+            <textarea
+              id="headers"
+              v-model="headersJson"
+              rows="4"
+              placeholder='{"Authorization": "Bearer token", "Accept": "application/json"}'
+            ></textarea>
+            <div v-if="headersError" class="error-message">{{ headersError }}</div>
+            <small>Enter HTTP headers as JSON object.</small>
+          </div>
+          <div class="form-group">
+            <label for="action">HTTP Action:</label>
+            <select id="action" v-model="formData.pageOptions.action">
+              <option value="GET">GET</option>
+              <option value="POST">POST</option>
+              <option value="PUT">PUT</option>
+              <option value="DELETE">DELETE</option>
+              <option value="PATCH">PATCH</option>
+            </select>
+            <small>Select HTTP method for the request.</small>
+          </div>
+          <div class="form-group">
+            <label for="location">Location:</label>
+            <select id="location" v-model="formData.pageOptions.location">
+              <option value="">Auto</option>
+              <option value="US">US</option>
+              <option value="EU">EU</option>
+              <option value="ASIA">ASIA</option>
+            </select>
+            <small>Select request location.</small>
+          </div>
+        </div>
+      </fieldset>
+
+      <div
+        v-if="
+          formData.scrapeOptions.formats.includes(ScrapeAndExtractFromUrlRequestFormatsEnum.Extract)
+        "
+        class="form-group"
+      >
+        <label for="extractorOptions">Extractor Options (JSON format):</label>
+        <textarea
+          id="extractorOptions"
+          v-model="extractorOptionsJson"
+          rows="8"
+          placeholder='e.g. {"key": "value"}'
+        ></textarea>
+        <small>Enter JSON options for extraction. Must be valid JSON.</small>
+        <div v-if="extractorOptionsError" class="error-message">
+          {{ extractorOptionsError }}
+        </div>
+      </div>
+
+      <button type="submit" class="primary-button">Scrape</button>
+    </form>
+
+    <div v-if="loading" class="status loading">
+      <div class="spinner"></div>
+      <span>Processing your request...</span>
+    </div>
+
+    <div v-if="error" class="status error">
+      <div class="error-icon">!</div>
+      <div>
+        <h3>Error occurred</h3>
+        <p>{{ error }}</p>
+        <button class="primary-button" @click="error = ''">Try again</button>
+      </div>
+    </div>
+
+    <div v-if="result" class="result">
+      <div class="result-header">
+        <h2>Results</h2>
+        <div class="download-options">
+          <button v-for="fmt in downloadFormats" :key="fmt" @click="downloadResult(fmt)">
+            Download {{ fmt }}
+          </button>
+        </div>
+      </div>
+      <pre>{{ result }}</pre>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, inject, watch, computed } from 'vue';
+import { useRouter } from 'vue-router';
+import {
+  ScrapeAndExtractFromUrlRequestFormatsEnum,
+  type ScrapeAndExtractFromUrlRequest,
+  type ScrapeResponse,
+  type ScrapingApi,
+  type ScrapeAndExtractFromUrlRequestExtract,
+} from '../api-client/api';
+
+type ScrapeResult = ScrapeResponse;
+
+/**
+ * @typedef {object} FormDataPageOptions
+ * @property {number} [waitFor] - Delay before fetching content in milliseconds.
+ * @property {boolean} [mobile] - Emulate mobile device.
+ * @property {boolean} [skipTlsVerification] - Skip TLS verification.
+ * @property {number} [timeout] - Page request timeout in milliseconds.
+ * @property {boolean} [blockAds] - Block ads and popups.
+ * @property {boolean} [removeBase64Images] - Remove Base64 encoded images.
+ * @property {'basic' | 'stealth' | ''} [proxy] - Proxy type for the request ('basic', 'stealth', or empty for auto).
+ * @property {Record<string, string>} [headers] - HTTP headers as a JSON object.
+ * @property {string} [action] - HTTP method for the request (e.g., 'GET', 'POST').
+ * @property {string} [location] - Request location (e.g., 'US', 'EU', 'ASIA').
+ */
+interface FormDataPageOptions {
+  waitFor?: number;
+  mobile?: boolean;
+  skipTlsVerification?: boolean;
+  timeout?: number;
+  blockAds?: boolean;
+  removeBase64Images?: boolean;
+  proxy?: 'basic' | 'stealth' | '';
+  headers?: Record<string, string>;
+  action?: string;
+  location?: string;
+}
+
+/**
+ * @typedef {object} FormDataScrapeOptions
+ * @property {string[]} formats - Array of output formats (e.g., "json", "markdown").
+ * @property {boolean} [onlyMainContent] - Scrape only the main content, excluding headers, footers, etc.
+ * @property {string} [includeTags] - Comma-separated list of HTML tags to include.
+ * @property {string} [excludeTags] - Comma-separated list of HTML tags to exclude.
+ */
+interface FormDataScrapeOptions {
+  formats: string[];
+  onlyMainContent?: boolean;
+  includeTags?: string;
+  excludeTags?: string;
+}
+
+/**
+ * @typedef {object} FormDataExtractorOptions
+ * @extends Partial<ScrapeAndExtractFromUrlRequestExtract>
+ * @description Extractor options for JSON format, extending the API request structure.
+ */
+interface FormDataExtractorOptions extends Partial<ScrapeAndExtractFromUrlRequestExtract> {}
+
+/**
+ * @typedef {object} FormDataChangeTrackingOptions
+ * @property {number} threshold - Minimum percentage change to trigger tracking.
+ * @property {number} frequency - Frequency in minutes to check for changes.
+ */
+interface FormDataChangeTrackingOptions {
+  threshold: number;
+  frequency: number;
+}
+
+/**
+ * @typedef {object} FormData
+ * @property {string} url - The URL to scrape.
+ * @property {FormDataPageOptions} pageOptions - Options related to page loading and network requests.
+ * @property {FormDataScrapeOptions} scrapeOptions - Options related to content scraping.
+ * @property {FormDataExtractorOptions} [extractorOptions] - Options for data extraction when 'json' format is selected.
+ * @property {FormDataChangeTrackingOptions} changeTrackingOptions - Options for change tracking.
+ */
+interface FormData {
+  url: string;
+  pageOptions: FormDataPageOptions;
+  scrapeOptions: FormDataScrapeOptions;
+  extractorOptions?: FormDataExtractorOptions;
+  changeTrackingOptions: FormDataChangeTrackingOptions;
+}
+
+/**
+ * ScrapeView component for configuring and initiating web scraping requests.
+ * Allows users to specify a URL, output formats, and various advanced options
+ * for page loading, content filtering, data extraction, and change tracking.
+ */
+export default defineComponent({
+  name: 'ScrapeView',
+  /**
+   * Setup function for the ScrapeView component.
+   * Initializes reactive data, handles form submission, and manages API interactions.
+   * @returns {object} Reactive properties and methods for the component.
+   */
+  setup() {
+    const router = useRouter();
+    // Inject the API client for scraping operations.
+    const api = inject('api') as { scraping: ScrapingApi };
+
+    /**
+     * Reactive form data for scrape configuration.
+     * @type {Ref<FormData>}
+     */
+    const formData = ref<FormData>({
+      url: '',
+      pageOptions: {
+        waitFor: undefined,
+        mobile: false,
+        skipTlsVerification: false,
+        timeout: undefined,
+        blockAds: true,
+        removeBase64Images: true,
+        proxy: '',
+        headers: {},
+        action: 'GET', // Default HTTP action
+        location: '',
+      },
+      scrapeOptions: {
+        onlyMainContent: true,
+        formats: [ScrapeAndExtractFromUrlRequestFormatsEnum.Markdown],
+        includeTags: '',
+        excludeTags: '',
+      },
+      extractorOptions: {},
+      changeTrackingOptions: {
+        threshold: 10,
+        frequency: 60,
+      },
+    });
+
+    /**
+     * Reactive state for collapsing/expanding scrape options section.
+     * @type {Ref<boolean>}
+     */
+    const isScrapeOptionsCollapsed = ref(true);
+    /**
+     * Reactive state for collapsing/expanding page options section.
+     * @type {Ref<boolean>}
+     */
+    const isPageOptionsCollapsed = ref(true);
+
+    /**
+     * Reactive state indicating if a request is in progress.
+     * @type {Ref<boolean>}
+     */
+    const loading = ref(false);
+    /**
+     * Reactive state for displaying error messages.
+     * @type {Ref<string>}
+     */
+    const error = ref('');
+    /**
+     * Reactive state for storing the scrape result.
+     * @type {Ref<ScrapeResult | null>}
+     */
+    const result = ref<ScrapeResult | null>(null);
+
+    /**
+     * Computed property to determine available download formats based on selected scrape formats.
+     * Ensures 'json' is always an option if results are present.
+     * @returns {string[]} Array of unique download formats.
+     */
+    const downloadFormats = computed(() =>
+      Array.from(new Set(['json', ...formData.value.scrapeOptions.formats])),
+    );
+
+    /**
+     * Validates if a given string is a well-formed URL.
+     * @param {string} url - The URL string to validate.
+     * @returns {boolean} True if the URL is valid, false otherwise.
+     */
+    const isValidUrl = (url: string): boolean => {
+      try {
+        new URL(url);
+        return true;
+      } catch {
+        return false;
+      }
+    };
+
+    /**
+     * Handles the form submission for initiating a scrape request.
+     * Validates input, constructs the API payload, and handles API response or errors.
+     * @async
+     * @returns {Promise<void>}
+     */
+    const handleSubmit = async (): Promise<void> => {
+      if (!isValidUrl(formData.value.url)) {
+        error.value = 'Please enter a valid URL (e.g., https://example.com)';
+        return;
+      }
+
+      if (
+        !formData.value.scrapeOptions.formats ||
+        formData.value.scrapeOptions.formats.length === 0
+      ) {
+        error.value = 'Please select at least one output format.';
+        return;
+      }
+
+      // Construct the request payload matching the ScrapeAndExtractFromUrlRequest interface.
+      const requestPayload: ScrapeAndExtractFromUrlRequest = {
+        url: formData.value.url,
+        ...(formData.value.pageOptions.waitFor !== undefined &&
+          formData.value.pageOptions.waitFor > 0 && {
+            waitFor: formData.value.pageOptions.waitFor,
+          }),
+        ...(formData.value.pageOptions.mobile === true && { mobile: true }),
+        ...(formData.value.pageOptions.skipTlsVerification === true && {
+          skipTlsVerification: true,
+        }),
+        ...(formData.value.pageOptions.timeout !== undefined &&
+          formData.value.pageOptions.timeout > 0 &&
+          formData.value.pageOptions.timeout !== 30000 && {
+            timeout: formData.value.pageOptions.timeout,
+          }),
+        ...(formData.value.pageOptions.blockAds === false && {
+          blockAds: false,
+        }),
+        ...(formData.value.pageOptions.removeBase64Images === false && {
+          removeBase64Images: false,
+        }),
+        ...(formData.value.pageOptions.proxy &&
+          formData.value.pageOptions.proxy !== '' && {
+            proxy: formData.value.pageOptions.proxy as 'basic' | 'stealth',
+          }),
+        ...(formData.value.pageOptions.headers &&
+          Object.keys(formData.value.pageOptions.headers).length > 0 && {
+            headers: formData.value.pageOptions.headers,
+          }),
+        ...(formData.value.pageOptions.location &&
+          formData.value.pageOptions.location !== '' && {
+            location: { country: formData.value.pageOptions.location },
+          }),
+
+        // Include scrapeOptions properties directly.
+        formats: formData.value.scrapeOptions
+          .formats as unknown as ScrapeAndExtractFromUrlRequestFormatsEnum[],
+        ...(formData.value.scrapeOptions.onlyMainContent === false && {
+          onlyMainContent: false,
+        }),
+        ...(formData.value.scrapeOptions.includeTags &&
+          formData.value.scrapeOptions.includeTags.trim() !== '' && {
+            includeTags: formData.value.scrapeOptions.includeTags
+              .split(',')
+              .map((tag) => tag.trim())
+              .filter((tag) => tag !== ''),
+          }),
+        ...(formData.value.scrapeOptions.excludeTags &&
+          formData.value.scrapeOptions.excludeTags.trim() !== '' && {
+            excludeTags: formData.value.scrapeOptions.excludeTags
+              .split(',')
+              .map((tag) => tag.trim())
+              .filter((tag) => tag !== ''),
+          }),
+
+        // Include extractorOptions and changeTrackingOptions if applicable.
+        ...(formData.value.scrapeOptions.formats.includes(
+          ScrapeAndExtractFromUrlRequestFormatsEnum.Extract,
+        ) &&
+          formData.value.extractorOptions &&
+          Object.keys(formData.value.extractorOptions).length > 0 && {
+            extract: formData.value.extractorOptions as ScrapeAndExtractFromUrlRequestExtract,
+          }),
+        ...(formData.value.scrapeOptions.formats.includes('changeTracking') && {
+          changeTrackingOptions: {
+            threshold: formData.value.changeTrackingOptions?.threshold ?? 10,
+            frequency: formData.value.changeTrackingOptions?.frequency ?? 60,
+          },
+        }),
+      };
+
+      try {
+        loading.value = true;
+        error.value = '';
+        console.log('Sending scrape request:', JSON.stringify(requestPayload, null, 2));
+        const response = await api.scraping.scrapeAndExtractFromUrl(requestPayload);
+        result.value = response.data;
+      } catch (err: unknown) {
+        if (err instanceof Error) {
+          if (err.message.includes('401')) {
+            router.push({ name: 'ApiConfig' });
+            return;
+          }
+          error.value = err.message.includes('404')
+            ? 'Page not found (404)'
+            : err.message.includes('Network Error')
+              ? 'Network connection failed'
+              : err.message;
+        } else {
+          error.value = 'An unexpected error occurred.';
+        }
+      } finally {
+        loading.value = false;
+      }
+    };
+
+    /**
+     * Initiates the download of the scrape result in a specified format.
+     * Handles different content types (screenshot, markdown, HTML, JSON).
+     * @param {string} format - The desired format for download (e.g., 'json', 'markdown', 'screenshot').
+     * @returns {void}
+     */
+    const downloadResult = (format: string): void => {
+      if (!result.value?.data) return;
+
+      // Map specific format names to their corresponding data keys in the result.
+      const formatMap: Record<string, string> = {
+        extract: 'llm_extraction',
+        'screenshot@fullPage': 'screenshot',
+      };
+
+      const key = formatMap[format] ?? format;
+      const data: unknown =
+        format === 'json'
+          ? result.value.data
+          : result.value.data[key as keyof typeof result.value.data];
+
+      // Handle screenshot download separately as it's a data URL.
+      if (format.startsWith('screenshot') && typeof data === 'string') {
+        const link = document.createElement('a');
+        link.href = data;
+        link.setAttribute('download', `scrape-result-${format}.png`);
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        return;
+      }
+
+      if (data === undefined) return;
+
+      let mimeType = 'application/json';
+      let extension = 'json';
+      let contentStr = '';
+
+      // Determine MIME type and extension based on format.
+      if (typeof data === 'string') {
+        contentStr = data;
+        if (format === 'markdown') {
+          mimeType = 'text/markdown';
+          extension = 'md';
+        } else if (format === 'html' || format === 'rawHtml') {
+          mimeType = 'text/html';
+          extension = 'html';
+        } else {
+          mimeType = 'text/plain';
+          extension = 'txt';
+        }
+      } else {
+        // Stringify JSON data for download.
+        contentStr = JSON.stringify(data, null, 2);
+      }
+
+      // Create a Blob and a download link for the content.
+      const dataUri = `data:${mimeType};charset=utf-8,${encodeURIComponent(contentStr)}`;
+      const link = document.createElement('a');
+      link.setAttribute('href', dataUri);
+      link.setAttribute('download', `scrape-result-${format}.${extension}`);
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+    };
+
+    /**
+     * Reactive variable for the JSON string of extractor options.
+     * @type {Ref<string>}
+     */
+    const extractorOptionsJson = ref(
+      JSON.stringify(formData.value.extractorOptions || {}, null, 2),
+    );
+    /**
+     * Reactive variable for displaying extractor options JSON parsing errors.
+     * @type {Ref<string>}
+     */
+    const extractorOptionsError = ref('');
+
+    /**
+     * Watcher for `extractorOptionsJson` to parse and update `formData.extractorOptions`.
+     * Sets an error message if parsing fails.
+     */
+    watch(
+      extractorOptionsJson,
+      (newVal) => {
+        try {
+          formData.value.extractorOptions = newVal ? JSON.parse(newVal) : {};
+          extractorOptionsError.value = '';
+        } catch (e: any) {
+          extractorOptionsError.value = `Invalid JSON: ${e.message}`;
+        }
+      },
+      { immediate: true },
+    );
+
+    /**
+     * Reactive variable for the JSON string of HTTP headers.
+     * @type {Ref<string>}
+     */
+    const headersJson = ref(JSON.stringify(formData.value.pageOptions.headers || {}, null, 2));
+    /**
+     * Reactive variable for displaying HTTP headers JSON parsing errors.
+     * @type {Ref<string>}
+     */
+    const headersError = ref('');
+
+    /**
+     * Watcher for `headersJson` to parse and update `formData.pageOptions.headers`.
+     * Sets an error message when the JSON is invalid.
+     */
+    watch(
+      headersJson,
+      (newVal) => {
+        try {
+          formData.value.pageOptions.headers = newVal ? JSON.parse(newVal) : {};
+          headersError.value = '';
+        } catch (e: any) {
+          headersError.value = `Invalid JSON: ${e.message}`;
+        }
+      },
+      { immediate: true },
+    );
+
+    return {
+      formData,
+      loading,
+      headersJson,
+      headersError,
+      error,
+      result,
+      handleSubmit,
+      downloadResult,
+      downloadFormats,
+      extractorOptionsJson,
+      extractorOptionsError,
+      ScrapeAndExtractFromUrlRequestFormatsEnum,
+      isScrapeOptionsCollapsed,
+      isPageOptionsCollapsed,
+    };
+  },
+});
+</script>
+
+<style scoped>
+.scrape-view {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 20px;
+}
+.form-group {
+  margin-bottom: 20px; /* Increased margin */
+}
+.options-fieldset {
+  border: 1px solid #ccc;
+  padding: 15px;
+  border-radius: 4px;
+  margin-bottom: 20px;
+}
+.options-fieldset legend {
+  font-weight: bold;
+  padding: 0 5px;
+}
+.grid-layout {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Responsive grid */
+  gap: 15px; /* Gap between grid items */
+}
+.checkbox-label {
+  /* Style for labels containing checkboxes */
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+.form-group small {
+  /* Style for help text */
+  display: block;
+  font-size: 0.8em;
+  color: #666;
+  margin-top: 3px;
+}
+.status {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 15px;
+  border-radius: 4px;
+  margin: 20px 0;
+}
+
+.loading {
+  background: #f0f7ff;
+  color: #0066cc;
+}
+
+.error {
+  background: #fff0f0;
+  color: #cc0000;
+}
+
+.collapsible-header {
+  cursor: pointer;
+}
+
+.result {
+  margin-top: 20px;
+  padding: 15px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  background: #f9f9f9;
+}
+
+.result-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.result-header h2 {
+  margin: 0;
+}
+
+.download-options button {
+  margin-left: 10px;
+  padding: 5px 10px;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.download-options button:hover {
+  background-color: #0056b3;
+}
+
+.result pre {
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  background: #eee;
+  color: #333;
+  padding: 10px;
+  border-radius: 4px;
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+.error-message {
+  color: red;
+  font-size: 0.9em;
+  margin-top: 5px;
+}
+
+.spinner {
+  border: 4px solid rgba(0, 0, 0, 0.1);
+  border-left-color: #0066cc;
+  border-radius: 50%;
+  width: 20px;
+  height: 20px;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+</style>
diff --git a/src/views/ScrapeViewV2.vue b/src/views/ScrapeViewV2.vue
new file mode 100644
index 0000000..c9229e9
--- /dev/null
+++ b/src/views/ScrapeViewV2.vue
@@ -0,0 +1,395 @@
+<template>
+  <div class="page-container scrape-view">
+    <h1>Scrape Configuration (API v2)</h1>
+    <form class="scrape-config-form" @submit.prevent="handleSubmit">
+      <div class="form-group">
+        <label for="url">URL:</label>
+        <input id="url" v-model="formData.url" type="url" required />
+      </div>
+
+      <fieldset class="form-group options-fieldset">
+        <legend>Page Options</legend>
+        <div class="grid-layout">
+          <label class="checkbox-label">
+            <input type="checkbox" v-model="formData.pageOptions.screenshot" />
+            Capture screenshot
+          </label>
+          <label class="checkbox-label">
+            <input type="checkbox" v-model="formData.pageOptions.onlyMainContent" />
+            Only main content
+          </label>
+          <label class="checkbox-label">
+            <input type="checkbox" v-model="formData.pageOptions.includeHtml" />
+            Include HTML
+          </label>
+        </div>
+        <div class="form-group">
+          <label for="waitFor">Wait For (ms):</label>
+          <input id="waitFor" v-model.number="formData.pageOptions.waitFor" type="number" min="0" />
+        </div>
+        <div class="form-group">
+          <label for="headers">Request Headers (JSON object):</label>
+          <textarea
+            id="headers"
+            v-model="headersInput"
+            rows="4"
+            placeholder='{"User-Agent": "MyCrawler"}'
+          ></textarea>
+          <div v-if="headersError" class="error-message">{{ headersError }}</div>
+        </div>
+      </fieldset>
+
+      <fieldset class="form-group options-fieldset">
+        <legend>Extractor Options</legend>
+        <div class="form-group">
+          <label for="mode">Mode:</label>
+          <select id="mode" v-model="formData.extractorOptions.mode">
+            <option value="llm-extraction">LLM Extraction</option>
+          </select>
+        </div>
+        <div class="form-group">
+          <label for="prompt">Extraction Prompt:</label>
+          <textarea
+            id="prompt"
+            v-model="formData.extractorOptions.extractionPrompt"
+            rows="3"
+            placeholder="Describe the data to extract"
+          ></textarea>
+        </div>
+        <div class="form-group">
+          <label for="schema">Extraction Schema (JSON object):</label>
+          <textarea
+            id="schema"
+            v-model="schemaInput"
+            rows="6"
+            placeholder='{"title": {"type": "string"}}'
+          ></textarea>
+          <div v-if="schemaError" class="error-message">{{ schemaError }}</div>
+          <small>Provide a JSON schema describing the structure of the expected data.</small>
+        </div>
+      </fieldset>
+
+      <div class="form-group">
+        <label>
+          <input type="checkbox" v-model="formData.scraperOptions.useUnstructured" />
+          Use unstructured scraper
+        </label>
+      </div>
+
+      <button type="submit" class="primary-button" :disabled="loading">Scrape</button>
+    </form>
+
+    <div v-if="loading" class="status loading">
+      <div class="spinner"></div>
+      <span>Processing your request...</span>
+    </div>
+
+    <div v-if="error" class="status error">
+      <div class="error-icon">!</div>
+      <div>
+        <h3>Error occurred</h3>
+        <p>{{ error }}</p>
+        <button class="primary-button" @click="error = ''">Try again</button>
+      </div>
+    </div>
+
+    <div v-if="result" class="result">
+      <div class="result-header">
+        <h2>Results</h2>
+        <div class="download-options">
+          <button @click="downloadResult">Download JSON</button>
+        </div>
+      </div>
+      <pre>{{ formattedResult }}</pre>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, computed, watch } from 'vue';
+import { postV2 } from '@/api/v2Client';
+
+interface PageOptionsV2 {
+  screenshot: boolean;
+  onlyMainContent: boolean;
+  includeHtml: boolean;
+  waitFor?: number | null;
+  headers?: Record<string, string>;
+}
+
+interface ExtractorOptionsV2 {
+  mode: 'llm-extraction';
+  extractionPrompt: string;
+  extractionSchema?: Record<string, unknown>;
+}
+
+interface ScraperOptionsV2 {
+  useUnstructured: boolean;
+}
+
+interface FormDataV2 {
+  url: string;
+  pageOptions: PageOptionsV2;
+  extractorOptions: ExtractorOptionsV2;
+  scraperOptions: ScraperOptionsV2;
+}
+
+interface ScrapeResponseV2 {
+  success?: boolean;
+  data?: {
+    content?: string;
+    markdown?: string;
+    html?: string;
+    metadata?: Record<string, unknown>;
+    screenshotUrl?: string;
+  };
+  metadata?: Record<string, unknown>;
+}
+
+export default defineComponent({
+  name: 'ScrapeViewV2',
+  setup() {
+    const formData = ref<FormDataV2>({
+      url: '',
+      pageOptions: {
+        screenshot: false,
+        onlyMainContent: false,
+        includeHtml: false,
+        waitFor: undefined,
+        headers: undefined,
+      },
+      extractorOptions: {
+        mode: 'llm-extraction',
+        extractionPrompt: '',
+        extractionSchema: undefined,
+      },
+      scraperOptions: {
+        useUnstructured: false,
+      },
+    });
+
+    const headersInput = ref('');
+    const headersError = ref('');
+    const schemaInput = ref('');
+    const schemaError = ref('');
+    const loading = ref(false);
+    const error = ref('');
+    const result = ref<ScrapeResponseV2 | null>(null);
+
+    /**
+     * Computes a formatted JSON string of the scrape result for display purposes.
+     *
+     * @returns {string} The formatted JSON string or an empty string when no result is present.
+     */
+    const formattedResult = computed(() =>
+      result.value ? JSON.stringify(result.value, null, 2) : '',
+    );
+
+    /**
+     * Normalizes the headers input whenever the user updates the JSON string.
+     */
+    watch(
+      headersInput,
+      (value) => {
+        if (!value.trim()) {
+          formData.value.pageOptions.headers = undefined;
+          headersError.value = '';
+          return;
+        }
+        try {
+          const parsed = JSON.parse(value);
+          if (parsed === null || Array.isArray(parsed) || typeof parsed !== 'object') {
+            throw new Error('Headers must be a JSON object.');
+          }
+          const normalized: Record<string, string> = {};
+          Object.entries(parsed).forEach(([key, val]) => {
+            normalized[key] = String(val);
+          });
+          formData.value.pageOptions.headers = normalized;
+          headersError.value = '';
+        } catch (err) {
+          headersError.value = err instanceof Error ? err.message : 'Invalid headers JSON.';
+        }
+      },
+      { immediate: false },
+    );
+
+    /**
+     * Normalizes the extraction schema input whenever the JSON string changes.
+     */
+    watch(
+      schemaInput,
+      (value) => {
+        if (!value.trim()) {
+          formData.value.extractorOptions.extractionSchema = undefined;
+          schemaError.value = '';
+          return;
+        }
+        try {
+          const parsed = JSON.parse(value);
+          if (parsed === null || Array.isArray(parsed) || typeof parsed !== 'object') {
+            throw new Error('Schema must be a JSON object.');
+          }
+          formData.value.extractorOptions.extractionSchema = parsed as Record<string, unknown>;
+          schemaError.value = '';
+        } catch (err) {
+          schemaError.value = err instanceof Error ? err.message : 'Invalid schema JSON.';
+        }
+      },
+      { immediate: false },
+    );
+
+    /**
+     * Builds the request payload for the scrape call.
+     *
+     * @returns {Record<string, unknown>} The payload ready to be sent to the API.
+     */
+    const buildPayload = (): Record<string, unknown> => {
+      const payload: Record<string, unknown> = {
+        url: formData.value.url,
+      };
+
+      const pageOptions: Record<string, unknown> = {};
+      if (formData.value.pageOptions.screenshot) {
+        pageOptions.screenshot = true;
+      }
+      if (formData.value.pageOptions.onlyMainContent) {
+        pageOptions.onlyMainContent = true;
+      }
+      if (formData.value.pageOptions.includeHtml) {
+        pageOptions.includeHtml = true;
+      }
+      if (
+        formData.value.pageOptions.waitFor !== undefined &&
+        formData.value.pageOptions.waitFor !== null &&
+        !Number.isNaN(formData.value.pageOptions.waitFor)
+      ) {
+        pageOptions.waitFor = formData.value.pageOptions.waitFor;
+      }
+      if (
+        formData.value.pageOptions.headers &&
+        Object.keys(formData.value.pageOptions.headers).length
+      ) {
+        pageOptions.headers = formData.value.pageOptions.headers;
+      }
+      if (Object.keys(pageOptions).length > 0) {
+        payload.pageOptions = pageOptions;
+      }
+
+      const extractorOptions: Record<string, unknown> = {};
+      if (formData.value.extractorOptions.mode) {
+        extractorOptions.mode = formData.value.extractorOptions.mode;
+      }
+      if (formData.value.extractorOptions.extractionPrompt.trim()) {
+        extractorOptions.extractionPrompt = formData.value.extractorOptions.extractionPrompt.trim();
+      }
+      if (formData.value.extractorOptions.extractionSchema) {
+        extractorOptions.extractionSchema = formData.value.extractorOptions.extractionSchema;
+      }
+      if (Object.keys(extractorOptions).length > 0) {
+        payload.extractorOptions = extractorOptions;
+      }
+
+      if (formData.value.scraperOptions.useUnstructured) {
+        payload.scraperOptions = { useUnstructured: true };
+      }
+
+      return payload;
+    };
+
+    /**
+     * Sends the scrape request to the API and stores the result.
+     *
+     * @returns {Promise<void>} Resolves when the request completes.
+     */
+    const handleSubmit = async (): Promise<void> => {
+      if (headersError.value || schemaError.value) {
+        error.value = 'Please fix the JSON errors before submitting the request.';
+        return;
+      }
+
+      loading.value = true;
+      error.value = '';
+      result.value = null;
+      try {
+        const payload = buildPayload();
+        const response = await postV2<ScrapeResponseV2>('scrape', payload);
+        result.value = response.data;
+      } catch (err) {
+        error.value = err instanceof Error ? err.message : 'Scrape request failed.';
+      } finally {
+        loading.value = false;
+      }
+    };
+
+    /**
+     * Triggers a download of the scrape result as a JSON file.
+     */
+    const downloadResult = (): void => {
+      if (!result.value) {
+        return;
+      }
+      const blob = new Blob([JSON.stringify(result.value, null, 2)], {
+        type: 'application/json',
+      });
+      const link = document.createElement('a');
+      link.href = URL.createObjectURL(blob);
+      link.download = 'scrape-result-v2.json';
+      link.click();
+      URL.revokeObjectURL(link.href);
+    };
+
+    return {
+      formData,
+      headersInput,
+      headersError,
+      schemaInput,
+      schemaError,
+      loading,
+      error,
+      result,
+      formattedResult,
+      handleSubmit,
+      downloadResult,
+    };
+  },
+});
+</script>
+
+<style scoped>
+@import '@/assets/main.css';
+
+.scrape-view {
+  max-width: 900px;
+  margin: 0 auto;
+}
+
+.options-fieldset {
+  margin-bottom: 1.5rem;
+  border: 1px solid var(--color-border);
+  padding: 1rem;
+  border-radius: 8px;
+}
+
+.grid-layout {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+}
+
+.checkbox-label {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+textarea {
+  width: 100%;
+}
+
+.error-message {
+  color: #c0392b;
+  margin-top: 0.5rem;
+}
+</style>