diff --git a/README.md b/README.md
index 835dc5a..b127157 100644
--- a/README.md
+++ b/README.md
@@ -2,12 +2,9 @@
 
 This is a web UI for https://github.com/dzhng/deep-research. It supports streaming AI responses, and viasualization of the research process using a tree structure.
 
-Note: The project is currently WIP, expect bugs. README will be updated once the project is usable.
-
-Rough preview of the UI: 
-
-<img width="1087" alt="image" src="https://github.com/user-attachments/assets/4bb5b722-0300-4d4f-bb01-fc1ed2404442" />
+> Note: The project is currently WIP, expect bugs.
 
+<video src="https://github.com/user-attachments/assets/c3738551-b258-47c6-90a8-fd097e5165c8"></video>
 
 ## Setup
 
@@ -80,3 +77,7 @@ bun run preview
 ```
 
 Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
+
+## License
+
+MIT
diff --git a/app.vue b/app.vue
index 88300e4..a6d8b77 100644
--- a/app.vue
+++ b/app.vue
@@ -18,9 +18,15 @@
         content:
           'SiliconCloud Stats 是一个用于分析 SiliconCloud 平台使用情况的工具。通过输入 Cookie，可以拉取 SiliconCloud 控制台 API 来实现各种分析功能，如 token 用量分析等。',
       },
-      { name: 'keywords', content: 'SiliconCloud, 数据分析, token 用量, API 分析, 控制台工具' },
+      {
+        name: 'keywords',
+        content: 'SiliconCloud, 数据分析, token 用量, API 分析, 控制台工具',
+      },
       // Open Graph tags
-      { property: 'og:title', content: 'SiliconCloud Stats - SiliconCloud 平台使用情况分析工具' },
+      {
+        property: 'og:title',
+        content: 'SiliconCloud Stats - SiliconCloud 平台使用情况分析工具',
+      },
       {
         property: 'og:description',
         content:
@@ -30,8 +36,15 @@
       { property: 'og:image', content: '/images/readme-showcase-total.webp' },
       // Twitter Card tags
       { name: 'twitter:card', content: 'summary_large_image' },
-      { name: 'twitter:title', content: 'SiliconCloud Stats - SiliconCloud 平台使用情况分析工具' },
-      { name: 'twitter:description', content: 'SiliconCloud Stats 是一个用于分析 SiliconCloud 平台使用情况的工具。' },
+      {
+        name: 'twitter:title',
+        content: 'SiliconCloud Stats - SiliconCloud 平台使用情况分析工具',
+      },
+      {
+        name: 'twitter:description',
+        content:
+          'SiliconCloud Stats 是一个用于分析 SiliconCloud 平台使用情况的工具。',
+      },
       { name: 'twitter:image', content: '/images/readme-showcase-total.webp' },
     ],
     // script: [
diff --git a/components/ColorModeButton.vue b/components/ColorModeButton.vue
index eaeb974..4092850 100644
--- a/components/ColorModeButton.vue
+++ b/components/ColorModeButton.vue
@@ -19,6 +19,10 @@
 
 <template>
   <div>
-    <UButton :icon="preference === 'dark' ? 'i-lucide-sun' : 'i-lucide-moon'" color="primary" @click="toggleColorMode" />
+    <UButton
+      :icon="preference === 'dark' ? 'i-lucide-sun' : 'i-lucide-moon'"
+      color="primary"
+      @click="toggleColorMode"
+    />
   </div>
 </template>
diff --git a/components/DeepResearch.vue b/components/DeepResearch.vue
index 6fa66e9..7ede475 100644
--- a/components/DeepResearch.vue
+++ b/components/DeepResearch.vue
@@ -1,5 +1,10 @@
 <script setup lang="ts">
-  import { deepResearch, type PartialSearchResult, type ResearchResult, type ResearchStep } from '~/lib/deep-research'
+  import {
+    deepResearch,
+    type PartialSearchResult,
+    type ResearchResult,
+    type ResearchStep,
+  } from '~/lib/deep-research'
   import type { TreeNode } from './Tree.vue'
 
   const emit = defineEmits<{
@@ -44,7 +49,10 @@
             tree.value.children.push(node)
           } else {
             // 找到父节点并添加
-            const parentNode = findNode(tree.value, getParentNodeId(step.nodeId))
+            const parentNode = findNode(
+              tree.value,
+              getParentNodeId(step.nodeId),
+            )
             if (parentNode) {
               parentNode.children.push(node)
             }
@@ -160,7 +168,8 @@
     <template #header>
       <h2 class="font-bold">3. Web Browsing</h2>
       <p class="text-sm text-gray-500">
-        The AI will then search the web based on our research goal, and iterate until the depth is reached.
+        The AI will then search the web based on our research goal, and iterate
+        until the depth is reached.
         <br />
         Click a child node to view details.
       </p>
@@ -174,7 +183,9 @@
         <h2 class="text-xl font-bold mt-2">{{ selectedNode.label }}</h2>
 
         <!-- Root node has no additional information -->
-        <p v-if="selectedNode.id === '0'"> This is the beginning of your deep research journey! </p>
+        <p v-if="selectedNode.id === '0'">
+          This is the beginning of your deep research journey!
+        </p>
         <template v-else>
           <h3 class="text-lg font-semibold mt-2">Research Goal:</h3>
           <p>{{ selectedNode.researchGoal }}</p>
@@ -188,7 +199,11 @@
 
           <h3 class="text-lg font-semibold mt-2">Learnings:</h3>
           <ul class="list-disc list-inside">
-            <li v-for="(learning, index) in selectedNode.learnings" :key="index">{{ learning }}</li>
+            <li
+              v-for="(learning, index) in selectedNode.learnings"
+              :key="index"
+              >{{ learning }}</li
+            >
           </ul>
         </template>
       </div>
diff --git a/components/ResearchFeedback.vue b/components/ResearchFeedback.vue
index b614c42..563d07a 100644
--- a/components/ResearchFeedback.vue
+++ b/components/ResearchFeedback.vue
@@ -74,7 +74,10 @@
   <UCard>
     <template #header>
       <h2 class="font-bold">2. Model Feedback</h2>
-      <p class="text-sm text-gray-500"> The AI will ask you some follow up questions to help you clarify the research direction. </p>
+      <p class="text-sm text-gray-500">
+        The AI will ask you some follow up questions to help you clarify the
+        research direction.
+      </p>
     </template>
 
     <div class="flex flex-col gap-2">
@@ -82,7 +85,11 @@
       <div v-if="!feedback.length && !error">Waiting for model feedback...</div>
       <template v-else>
         <div v-if="error" class="text-red-500">{{ error }}</div>
-        <div v-for="(feedback, index) in feedback" class="flex flex-col gap-2" :key="index">
+        <div
+          v-for="(feedback, index) in feedback"
+          class="flex flex-col gap-2"
+          :key="index"
+        >
           Assistant: {{ feedback.assistantQuestion }}
           <UInput v-model="feedback.userAnswer" />
         </div>
diff --git a/components/ResearchForm.vue b/components/ResearchForm.vue
index f5bd43a..1854394 100644
--- a/components/ResearchForm.vue
+++ b/components/ResearchForm.vue
@@ -21,7 +21,9 @@
     numQuestions: 3,
   })
 
-  const isSubmitButtonDisabled = computed(() => !form.query || !form.breadth || !form.depth || !form.numQuestions)
+  const isSubmitButtonDisabled = computed(
+    () => !form.query || !form.breadth || !form.depth || !form.numQuestions,
+  )
 
   function handleSubmit() {
     emit('submit', {
@@ -41,29 +43,63 @@
     </template>
     <div class="flex flex-col gap-2">
       <UFormField label="Research Topic" required>
-        <UTextarea class="w-full" v-model="form.query" :rows="3" placeholder="Enter whatever you want to research..." required />
+        <UTextarea
+          class="w-full"
+          v-model="form.query"
+          :rows="3"
+          placeholder="Enter whatever you want to research..."
+          required
+        />
       </UFormField>
 
       <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
         <UFormField label="Number of Questions" required>
           <template #help> Number of questions for you to clarify. </template>
-          <UInput v-model="form.numQuestions" class="w-full" type="number" :min="1" :max="5" :step="1" />
+          <UInput
+            v-model="form.numQuestions"
+            class="w-full"
+            type="number"
+            :min="1"
+            :max="5"
+            :step="1"
+          />
         </UFormField>
 
         <UFormField label="Depth" required>
           <template #help> How deep you want to dig. </template>
-          <UInput v-model="form.depth" class="w-full" type="number" :min="1" :max="5" :step="1" />
+          <UInput
+            v-model="form.depth"
+            class="w-full"
+            type="number"
+            :min="1"
+            :max="5"
+            :step="1"
+          />
         </UFormField>
 
         <UFormField label="Breadth" required>
           <template #help> Number of searches in each depth. </template>
-          <UInput v-model="form.breadth" class="w-full" type="number" :min="1" :max="5" :step="1" />
+          <UInput
+            v-model="form.breadth"
+            class="w-full"
+            type="number"
+            :min="1"
+            :max="5"
+            :step="1"
+          />
         </UFormField>
       </div>
     </div>
 
     <template #footer>
-      <UButton type="submit" color="primary" :loading="isLoadingFeedback" :disabled="isSubmitButtonDisabled" block @click="handleSubmit">
+      <UButton
+        type="submit"
+        color="primary"
+        :loading="isLoadingFeedback"
+        :disabled="isSubmitButtonDisabled"
+        block
+        @click="handleSubmit"
+      >
         {{ isLoadingFeedback ? 'Researching...' : 'Start Research' }}
       </UButton>
     </template>
diff --git a/components/ResearchReport.vue b/components/ResearchReport.vue
index 08a3774..7dacefc 100644
--- a/components/ResearchReport.vue
+++ b/components/ResearchReport.vue
@@ -1,6 +1,9 @@
 <script setup lang="ts">
   import { marked } from 'marked'
-  import { writeFinalReport, type WriteFinalReportParams } from '~/lib/deep-research'
+  import {
+    writeFinalReport,
+    type WriteFinalReportParams,
+  } from '~/lib/deep-research'
 
   interface CustomReportParams extends WriteFinalReportParams {
     visitedUrls: string[]
@@ -10,8 +13,12 @@
   const loading = ref(false)
   const loadingExportPdf = ref(false)
   const reportContent = ref('')
-  const reportHtml = computed(() => marked(reportContent.value, { gfm: true, silent: true }))
-  const isExportButtonDisabled = computed(() => !reportContent.value || loading.value || loadingExportPdf.value)
+  const reportHtml = computed(() =>
+    marked(reportContent.value, { gfm: true, silent: true }),
+  )
+  const isExportButtonDisabled = computed(
+    () => !reportContent.value || loading.value || loadingExportPdf.value,
+  )
 
   async function generateReport(params: CustomReportParams) {
     loading.value = true
@@ -113,7 +120,9 @@
     />
     <template v-else>
       <div v-if="error" class="text-red-500">{{ error }}</div>
-      <div v-else>{{ loading ? 'Generating report...' : 'Waiting for report..' }}.</div>
+      <div v-else
+        >{{ loading ? 'Generating report...' : 'Waiting for report..' }}.</div
+      >
     </template>
   </UCard>
 </template>
diff --git a/components/Tree.vue b/components/Tree.vue
index e73e6a9..20e48ce 100644
--- a/components/Tree.vue
+++ b/components/Tree.vue
@@ -72,7 +72,12 @@
     </UButton>
     <ol v-if="node.children.length > 0" class="space-y-2">
       <li v-for="node in node.children" :key="node.id">
-        <Tree class="ml-2" :node="node" :selected-node @select="emit('select', $event)" />
+        <Tree
+          class="ml-2"
+          :node="node"
+          :selected-node
+          @select="emit('select', $event)"
+        />
       </li>
     </ol>
   </div>
diff --git a/lib/ai/providers.ts b/lib/ai/providers.ts
index f5df1ce..7045d0c 100644
--- a/lib/ai/providers.ts
+++ b/lib/ai/providers.ts
@@ -1,25 +1,25 @@
-import { createOpenAI } from '@ai-sdk/openai';
-import { getEncoding } from 'js-tiktoken';
+import { createOpenAI } from '@ai-sdk/openai'
+import { getEncoding } from 'js-tiktoken'
 
-import { RecursiveCharacterTextSplitter } from './text-splitter';
+import { RecursiveCharacterTextSplitter } from './text-splitter'
 
 // Providers
 const openai = createOpenAI({
   apiKey: import.meta.env.VITE_OPENAI_API_KEY!,
   baseURL: import.meta.env.VITE_OPENAI_ENDPOINT || 'https://api.openai.com/v1',
-});
+})
 
-const customModel = import.meta.env.VITE_OPENAI_MODEL || 'o3-mini';
+const customModel = import.meta.env.VITE_OPENAI_MODEL || 'o3-mini'
 
 // Models
 
 export const o3MiniModel = openai(customModel, {
   // reasoningEffort: customModel.startsWith('o') ? 'medium' : undefined,
   structuredOutputs: true,
-});
+})
 
-const MinChunkSize = 140;
-const encoder = getEncoding('o200k_base');
+const MinChunkSize = 140
+const encoder = getEncoding('o200k_base')
 
 // trim prompt to maximum context size
 export function trimPrompt(
@@ -27,32 +27,32 @@ export function trimPrompt(
   contextSize = Number(import.meta.env.VITE_CONTEXT_SIZE) || 128_000,
 ) {
   if (!prompt) {
-    return '';
+    return ''
   }
 
-  const length = encoder.encode(prompt).length;
+  const length = encoder.encode(prompt).length
   if (length <= contextSize) {
-    return prompt;
+    return prompt
   }
 
-  const overflowTokens = length - contextSize;
+  const overflowTokens = length - contextSize
   // on average it's 3 characters per token, so multiply by 3 to get a rough estimate of the number of characters
-  const chunkSize = prompt.length - overflowTokens * 3;
+  const chunkSize = prompt.length - overflowTokens * 3
   if (chunkSize < MinChunkSize) {
-    return prompt.slice(0, MinChunkSize);
+    return prompt.slice(0, MinChunkSize)
   }
 
   const splitter = new RecursiveCharacterTextSplitter({
     chunkSize,
     chunkOverlap: 0,
-  });
-  const trimmedPrompt = splitter.splitText(prompt)[0] ?? '';
+  })
+  const trimmedPrompt = splitter.splitText(prompt)[0] ?? ''
 
   // last catch, there's a chance that the trimmed prompt is same length as the original prompt, due to how tokens are split & innerworkings of the splitter, handle this case by just doing a hard cut
   if (trimmedPrompt.length === prompt.length) {
-    return trimPrompt(prompt.slice(0, chunkSize), contextSize);
+    return trimPrompt(prompt.slice(0, chunkSize), contextSize)
   }
 
   // recursively trim until the prompt is within the context size
-  return trimPrompt(trimmedPrompt, contextSize);
+  return trimPrompt(trimmedPrompt, contextSize)
 }
diff --git a/lib/ai/text-splitter.test.ts b/lib/ai/text-splitter.test.ts
index 08301e5..31670c4 100644
--- a/lib/ai/text-splitter.test.ts
+++ b/lib/ai/text-splitter.test.ts
@@ -1,77 +1,80 @@
-import assert from 'node:assert';
-import { describe, it, beforeEach } from 'node:test';
-import { RecursiveCharacterTextSplitter } from './text-splitter';
+import assert from 'node:assert'
+import { describe, it, beforeEach } from 'node:test'
+import { RecursiveCharacterTextSplitter } from './text-splitter'
 
 describe('RecursiveCharacterTextSplitter', () => {
-  let splitter: RecursiveCharacterTextSplitter;
+  let splitter: RecursiveCharacterTextSplitter
 
   beforeEach(() => {
     splitter = new RecursiveCharacterTextSplitter({
       chunkSize: 50,
       chunkOverlap: 10,
-    });
-  });
+    })
+  })
 
   it('Should correctly split text by separators', () => {
-    const text = 'Hello world, this is a test of the recursive text splitter.';
+    const text = 'Hello world, this is a test of the recursive text splitter.'
 
     // Test with initial chunkSize
-    assert.deepEqual(
-      splitter.splitText(text),
-      ['Hello world', 'this is a test of the recursive text splitter']
-    );
+    assert.deepEqual(splitter.splitText(text), [
+      'Hello world',
+      'this is a test of the recursive text splitter',
+    ])
 
     // Test with updated chunkSize
-    splitter.chunkSize = 100;
+    splitter.chunkSize = 100
     assert.deepEqual(
       splitter.splitText(
-        'Hello world, this is a test of the recursive text splitter. If I have a period, it should split along the period.'
+        'Hello world, this is a test of the recursive text splitter. If I have a period, it should split along the period.',
       ),
       [
         'Hello world, this is a test of the recursive text splitter',
         'If I have a period, it should split along the period.',
-      ]
-    );
+      ],
+    )
 
     // Test with another updated chunkSize
-    splitter.chunkSize = 110;
+    splitter.chunkSize = 110
     assert.deepEqual(
       splitter.splitText(
-        'Hello world, this is a test of the recursive text splitter. If I have a period, it should split along the period.\nOr, if there is a new line, it should prioritize splitting on new lines instead.'
+        'Hello world, this is a test of the recursive text splitter. If I have a period, it should split along the period.\nOr, if there is a new line, it should prioritize splitting on new lines instead.',
       ),
       [
         'Hello world, this is a test of the recursive text splitter',
         'If I have a period, it should split along the period.',
         'Or, if there is a new line, it should prioritize splitting on new lines instead.',
-      ]
-    );
-  });
+      ],
+    )
+  })
 
   it('Should handle empty string', () => {
-    assert.deepEqual(splitter.splitText(''), []);
-  });
+    assert.deepEqual(splitter.splitText(''), [])
+  })
 
   it('Should handle special characters and large texts', () => {
-    const largeText = 'A'.repeat(1000);
-    splitter.chunkSize = 200;
+    const largeText = 'A'.repeat(1000)
+    splitter.chunkSize = 200
     assert.deepEqual(
       splitter.splitText(largeText),
-      Array(5).fill('A'.repeat(200))
-    );
+      Array(5).fill('A'.repeat(200)),
+    )
 
-    const specialCharText = 'Hello!@# world$%^ &*( this) is+ a-test';
-    assert.deepEqual(
-      splitter.splitText(specialCharText),
-      ['Hello!@#', 'world$%^', '&*( this)', 'is+', 'a-test']
-    );
-  });
+    const specialCharText = 'Hello!@# world$%^ &*( this) is+ a-test'
+    assert.deepEqual(splitter.splitText(specialCharText), [
+      'Hello!@#',
+      'world$%^',
+      '&*( this)',
+      'is+',
+      'a-test',
+    ])
+  })
 
   it('Should handle chunkSize equal to chunkOverlap', () => {
-    splitter.chunkSize = 50;
-    splitter.chunkOverlap = 50;
+    splitter.chunkSize = 50
+    splitter.chunkOverlap = 50
     assert.throws(
       () => splitter.splitText('Invalid configuration'),
-      new Error('Cannot have chunkOverlap >= chunkSize')
-    );
-  });
-});
+      new Error('Cannot have chunkOverlap >= chunkSize'),
+    )
+  })
+})
diff --git a/lib/ai/text-splitter.ts b/lib/ai/text-splitter.ts
index a7be002..382c0aa 100644
--- a/lib/ai/text-splitter.ts
+++ b/lib/ai/text-splitter.ts
@@ -1,60 +1,60 @@
 interface TextSplitterParams {
-  chunkSize: number;
+  chunkSize: number
 
-  chunkOverlap: number;
+  chunkOverlap: number
 }
 
 abstract class TextSplitter implements TextSplitterParams {
-  chunkSize = 1000;
-  chunkOverlap = 200;
+  chunkSize = 1000
+  chunkOverlap = 200
 
   constructor(fields?: Partial<TextSplitterParams>) {
-    this.chunkSize = fields?.chunkSize ?? this.chunkSize;
-    this.chunkOverlap = fields?.chunkOverlap ?? this.chunkOverlap;
+    this.chunkSize = fields?.chunkSize ?? this.chunkSize
+    this.chunkOverlap = fields?.chunkOverlap ?? this.chunkOverlap
     if (this.chunkOverlap >= this.chunkSize) {
-      throw new Error('Cannot have chunkOverlap >= chunkSize');
+      throw new Error('Cannot have chunkOverlap >= chunkSize')
     }
   }
 
-  abstract splitText(text: string): string[];
+  abstract splitText(text: string): string[]
 
   createDocuments(texts: string[]): string[] {
-    const documents: string[] = [];
+    const documents: string[] = []
     for (let i = 0; i < texts.length; i += 1) {
-      const text = texts[i];
+      const text = texts[i]
       for (const chunk of this.splitText(text!)) {
-        documents.push(chunk);
+        documents.push(chunk)
       }
     }
-    return documents;
+    return documents
   }
 
   splitDocuments(documents: string[]): string[] {
-    return this.createDocuments(documents);
+    return this.createDocuments(documents)
   }
 
   private joinDocs(docs: string[], separator: string): string | null {
-    const text = docs.join(separator).trim();
-    return text === '' ? null : text;
+    const text = docs.join(separator).trim()
+    return text === '' ? null : text
   }
 
   mergeSplits(splits: string[], separator: string): string[] {
-    const docs: string[] = [];
-    const currentDoc: string[] = [];
-    let total = 0;
+    const docs: string[] = []
+    const currentDoc: string[] = []
+    let total = 0
     for (const d of splits) {
-      const _len = d.length;
+      const _len = d.length
       if (total + _len >= this.chunkSize) {
         if (total > this.chunkSize) {
           console.warn(
             `Created a chunk of size ${total}, +
 which is longer than the specified ${this.chunkSize}`,
-          );
+          )
         }
         if (currentDoc.length > 0) {
-          const doc = this.joinDocs(currentDoc, separator);
+          const doc = this.joinDocs(currentDoc, separator)
           if (doc !== null) {
-            docs.push(doc);
+            docs.push(doc)
           }
           // Keep on popping if:
           // - we have a larger chunk than in the chunk overlap
@@ -63,81 +63,81 @@ which is longer than the specified ${this.chunkSize}`,
             total > this.chunkOverlap ||
             (total + _len > this.chunkSize && total > 0)
           ) {
-            total -= currentDoc[0]!.length;
-            currentDoc.shift();
+            total -= currentDoc[0]!.length
+            currentDoc.shift()
           }
         }
       }
-      currentDoc.push(d);
-      total += _len;
+      currentDoc.push(d)
+      total += _len
     }
-    const doc = this.joinDocs(currentDoc, separator);
+    const doc = this.joinDocs(currentDoc, separator)
     if (doc !== null) {
-      docs.push(doc);
+      docs.push(doc)
     }
-    return docs;
+    return docs
   }
 }
 
 export interface RecursiveCharacterTextSplitterParams
   extends TextSplitterParams {
-  separators: string[];
+  separators: string[]
 }
 
 export class RecursiveCharacterTextSplitter
   extends TextSplitter
   implements RecursiveCharacterTextSplitterParams
 {
-  separators: string[] = ['\n\n', '\n', '.', ',', '>', '<', ' ', ''];
+  separators: string[] = ['\n\n', '\n', '.', ',', '>', '<', ' ', '']
 
   constructor(fields?: Partial<RecursiveCharacterTextSplitterParams>) {
-    super(fields);
-    this.separators = fields?.separators ?? this.separators;
+    super(fields)
+    this.separators = fields?.separators ?? this.separators
   }
 
   splitText(text: string): string[] {
-    const finalChunks: string[] = [];
+    const finalChunks: string[] = []
 
     // Get appropriate separator to use
-    let separator: string = this.separators[this.separators.length - 1]!;
+    let separator: string = this.separators[this.separators.length - 1]!
     for (const s of this.separators) {
       if (s === '') {
-        separator = s;
-        break;
+        separator = s
+        break
       }
       if (text.includes(s)) {
-        separator = s;
-        break;
+        separator = s
+        break
       }
     }
 
     // Now that we have the separator, split the text
-    let splits: string[];
+    let splits: string[]
     if (separator) {
-      splits = text.split(separator);
+      splits = text.split(separator)
     } else {
-      splits = text.split('');
+      splits = text.split('')
     }
 
     // Now go merging things, recursively splitting longer texts.
-    let goodSplits: string[] = [];
+    let goodSplits: string[] = []
     for (const s of splits) {
       if (s.length < this.chunkSize) {
-        goodSplits.push(s);
+        goodSplits.push(s)
       } else {
         if (goodSplits.length) {
-          const mergedText = this.mergeSplits(goodSplits, separator);
-          finalChunks.push(...mergedText);
-          goodSplits = [];
+          const mergedText = this.mergeSplits(goodSplits, separator)
+          finalChunks.push(...mergedText)
+          goodSplits = []
         }
-        const otherInfo = this.splitText(s);
-        finalChunks.push(...otherInfo);
+        const otherInfo = this.splitText(s)
+        finalChunks.push(...otherInfo)
       }
     }
     if (goodSplits.length) {
-      const mergedText = this.mergeSplits(goodSplits, separator);
-      finalChunks.push(...mergedText);
+      const mergedText = this.mergeSplits(goodSplits, separator)
+      finalChunks.push(...mergedText)
     }
-    return finalChunks;
+    return finalChunks
   }
 }
diff --git a/lib/deep-research.ts b/lib/deep-research.ts
index c939c7d..2737698 100644
--- a/lib/deep-research.ts
+++ b/lib/deep-research.ts
@@ -1,43 +1,57 @@
-import { generateObject, streamText } from 'ai';
-import { compact } from 'lodash-es';
-import pLimit from 'p-limit';
-import { z } from 'zod';
-import { parseStreamingJson, type DeepPartial } from '~/utils/json';
+import { generateObject, streamText } from 'ai'
+import { compact } from 'lodash-es'
+import pLimit from 'p-limit'
+import { z } from 'zod'
+import { parseStreamingJson, type DeepPartial } from '~/utils/json'
 
-import { o3MiniModel, trimPrompt } from './ai/providers';
-import { systemPrompt } from './prompt';
-import zodToJsonSchema from 'zod-to-json-schema';
-import { tavily, type TavilySearchResponse } from '@tavily/core';
+import { o3MiniModel, trimPrompt } from './ai/providers'
+import { systemPrompt } from './prompt'
+import zodToJsonSchema from 'zod-to-json-schema'
+import { tavily, type TavilySearchResponse } from '@tavily/core'
 
 export type ResearchResult = {
-  learnings: string[];
-  visitedUrls: string[];
-};
-
+  learnings: string[]
+  visitedUrls: string[]
+}
 
 export interface WriteFinalReportParams {
-  prompt: string;
-  learnings: string[];
+  prompt: string
+  learnings: string[]
 }
 // useRuntimeConfig()
 // Used for streaming response
-export type SearchQuery = z.infer<typeof searchQueriesTypeSchema>['queries'][0];
-export type PartialSearchQuery = DeepPartial<SearchQuery>;
-export type SearchResult = z.infer<typeof searchResultTypeSchema>;
-export type PartialSearchResult = DeepPartial<SearchResult>;
+export type SearchQuery = z.infer<typeof searchQueriesTypeSchema>['queries'][0]
+export type PartialSearchQuery = DeepPartial<SearchQuery>
+export type SearchResult = z.infer<typeof searchResultTypeSchema>
+export type PartialSearchResult = DeepPartial<SearchResult>
 
 export type ResearchStep =
   | { type: 'generating_query'; result: PartialSearchQuery; nodeId: string }
-  | { type: 'generated_query'; query: string; result: PartialSearchQuery; nodeId: string }
+  | {
+      type: 'generated_query'
+      query: string
+      result: PartialSearchQuery
+      nodeId: string
+    }
   | { type: 'searching'; query: string; nodeId: string }
   | { type: 'search_complete'; urls: string[]; nodeId: string }
-  | { type: 'processing_serach_result'; query: string; result: PartialSearchResult; nodeId: string }
-  | { type: 'processed_search_result'; query: string; result: SearchResult; nodeId: string }
+  | {
+      type: 'processing_serach_result'
+      query: string
+      result: PartialSearchResult
+      nodeId: string
+    }
+  | {
+      type: 'processed_search_result'
+      query: string
+      result: SearchResult
+      nodeId: string
+    }
   | { type: 'error'; message: string; nodeId: string }
-  | { type: 'complete'; learnings: string[], visitedUrls: string[] };
+  | { type: 'complete'; learnings: string[]; visitedUrls: string[] }
 
 // increase this if you have higher API rate limits
-const ConcurrencyLimit = 2;
+const ConcurrencyLimit = 2
 
 // Initialize Firecrawl with optional API key and optional base url
 
@@ -59,7 +73,7 @@ export const searchQueriesTypeSchema = z.object({
       researchGoal: z.string(),
     }),
   ),
-});
+})
 
 // take en user query, return a list of SERP queries
 export function generateSearchQueries({
@@ -67,10 +81,10 @@ export function generateSearchQueries({
   numQueries = 3,
   learnings,
 }: {
-  query: string;
-  numQueries?: number;
+  query: string
+  numQueries?: number
   // optional, if provided, the research will continue from the last learning
-  learnings?: string[];
+  learnings?: string[]
 }) {
   const schema = z.object({
     queries: z
@@ -84,40 +98,38 @@ export function generateSearchQueries({
             ),
         }),
       )
-      .describe(`List of SERP queries, max of ${numQueries}`)
+      .describe(`List of SERP queries, max of ${numQueries}`),
   })
-  const jsonSchema = JSON.stringify(zodToJsonSchema(schema));
+  const jsonSchema = JSON.stringify(zodToJsonSchema(schema))
 
   const prompt = [
     `Given the following prompt from the user, generate a list of SERP queries to research the topic. Return a maximum of ${numQueries} queries, but feel free to return less if the original prompt is clear. Make sure each query is unique and not similar to each other: <prompt>${query}</prompt>\n\n`,
     learnings
-      ? `Here are some learnings from previous research, use them to generate more specific queries: ${learnings.join(
-        '\n',
-      )}`
+      ? `Here are some learnings from previous research, use them to generate more specific queries: ${learnings.join('\n')}`
       : '',
     `You MUST respond in JSON with the following schema: ${jsonSchema}`,
-  ].join('\n\n');
+  ].join('\n\n')
   return streamText({
     model: o3MiniModel,
     system: systemPrompt(),
     prompt,
-  });
+  })
 }
 
 export const searchResultTypeSchema = z.object({
   learnings: z.array(z.string()),
   followUpQuestions: z.array(z.string()),
-});
+})
 function processSearchResult({
   query,
   result,
   numLearnings = 3,
   numFollowUpQuestions = 3,
 }: {
-  query: string;
+  query: string
   result: TavilySearchResponse
-  numLearnings?: number;
-  numFollowUpQuestions?: number;
+  numLearnings?: number
+  numFollowUpQuestions?: number
 }) {
   const schema = z.object({
     learnings: z
@@ -128,25 +140,23 @@ function processSearchResult({
       .describe(
         `List of follow-up questions to research the topic further, max of ${numFollowUpQuestions}`,
       ),
-  });
-  const jsonSchema = JSON.stringify(zodToJsonSchema(schema));
-  const contents = compact(result.results.map(item => item.content)).map(
-    content => trimPrompt(content, 25_000),
-  );
+  })
+  const jsonSchema = JSON.stringify(zodToJsonSchema(schema))
+  const contents = compact(result.results.map((item) => item.content)).map(
+    (content) => trimPrompt(content, 25_000),
+  )
   const prompt = [
     `Given the following contents from a SERP search for the query <query>${query}</query>, generate a list of learnings from the contents. Return a maximum of ${numLearnings} learnings, but feel free to return less if the contents are clear. Make sure each learning is unique and not similar to each other. The learnings should be concise and to the point, as detailed and information dense as possible. Make sure to include any entities like people, places, companies, products, things, etc in the learnings, as well as any exact metrics, numbers, or dates. The learnings will be used to research the topic further.`,
-    `<contents>${contents
-      .map(content => `<content>\n${content}\n</content>`)
-      .join('\n')}</contents>`,
+    `<contents>${contents.map((content) => `<content>\n${content}\n</content>`).join('\n')}</contents>`,
     `You MUST respond in JSON with the following schema: ${jsonSchema}`,
-  ].join('\n\n');
+  ].join('\n\n')
 
   return streamText({
     model: o3MiniModel,
     abortSignal: AbortSignal.timeout(60_000),
     system: systemPrompt(),
     prompt,
-  });
+  })
 }
 
 export function writeFinalReport({
@@ -155,28 +165,28 @@ export function writeFinalReport({
 }: WriteFinalReportParams) {
   const learningsString = trimPrompt(
     learnings
-      .map(learning => `<learning>\n${learning}\n</learning>`)
+      .map((learning) => `<learning>\n${learning}\n</learning>`)
       .join('\n'),
     150_000,
-  );
+  )
   const _prompt = [
     `Given the following prompt from the user, write a final report on the topic using the learnings from research. Make it as as detailed as possible, aim for 3 or more pages, include ALL the learnings from research:`,
     `<prompt>${prompt}</prompt>`,
     `Here are all the learnings from previous research:`,
     `<learnings>\n${learningsString}\n</learnings>`,
     `Write the report in Markdown.`,
-    `## Deep Research Report`
-  ].join('\n\n');
+    `## Deep Research Report`,
+  ].join('\n\n')
 
   return streamText({
     model: o3MiniModel,
     system: systemPrompt(),
     prompt: _prompt,
-  });
+  })
 }
 
 function childNodeId(parentNodeId: string, currentIndex: number) {
-  return `${parentNodeId}-${currentIndex}`;
+  return `${parentNodeId}-${currentIndex}`
 }
 
 export async function deepResearch({
@@ -187,15 +197,15 @@ export async function deepResearch({
   visitedUrls = [],
   onProgress,
   currentDepth = 1,
-  nodeId = '0'
+  nodeId = '0',
 }: {
-  query: string;
-  breadth: number;
-  maxDepth: number;
-  learnings?: string[];
-  visitedUrls?: string[];
-  onProgress: (step: ResearchStep) => void;
-  currentDepth?: number;
+  query: string
+  breadth: number
+  maxDepth: number
+  learnings?: string[]
+  visitedUrls?: string[]
+  onProgress: (step: ResearchStep) => void
+  currentDepth?: number
   nodeId?: string
 }): Promise<ResearchResult> {
   try {
@@ -203,25 +213,25 @@ export async function deepResearch({
       query,
       learnings,
       numQueries: breadth,
-    });
-    const limit = pLimit(ConcurrencyLimit);
+    })
+    const limit = pLimit(ConcurrencyLimit)
 
-    let searchQueries: PartialSearchQuery[] = [];
+    let searchQueries: PartialSearchQuery[] = []
 
     for await (const parsedQueries of parseStreamingJson(
       searchQueriesResult.textStream,
       searchQueriesTypeSchema,
-      (value) => !!value.queries?.length && !!value.queries[0]?.query
+      (value) => !!value.queries?.length && !!value.queries[0]?.query,
     )) {
       if (parsedQueries.queries) {
         for (let i = 0; i < searchQueries.length; i++) {
           onProgress({
             type: 'generating_query',
             result: searchQueries[i],
-            nodeId: childNodeId(nodeId, i)
-          });
+            nodeId: childNodeId(nodeId, i),
+          })
         }
-        searchQueries = parsedQueries.queries;
+        searchQueries = parsedQueries.queries
       }
     }
 
@@ -230,21 +240,22 @@ export async function deepResearch({
         type: 'generated_query',
         query,
         result: searchQueries[i],
-        nodeId: childNodeId(nodeId, i)
-      });
+        nodeId: childNodeId(nodeId, i),
+      })
     }
 
     const results = await Promise.all(
       searchQueries.map((searchQuery, i) =>
         limit(async () => {
-          if (!searchQuery?.query) return {
-            learnings: [],
-            visitedUrls: [],
-          }
+          if (!searchQuery?.query)
+            return {
+              learnings: [],
+              visitedUrls: [],
+            }
           onProgress({
             type: 'searching',
             query: searchQuery.query,
-            nodeId: childNodeId(nodeId, i)
+            nodeId: childNodeId(nodeId, i),
           })
           try {
             // const result = await firecrawl.search(searchQuery.query, {
@@ -255,42 +266,50 @@ export async function deepResearch({
             const result = await tvly.search(searchQuery.query, {
               maxResults: 5,
             })
-            console.log(`Ran ${searchQuery.query}, found ${result.results.length} contents`);
+            console.log(
+              `Ran ${searchQuery.query}, found ${result.results.length} contents`,
+            )
 
             // Collect URLs from this search
-            const newUrls = compact(result.results.map(item => item.url));
+            const newUrls = compact(result.results.map((item) => item.url))
             onProgress({
               type: 'search_complete',
               urls: newUrls,
               nodeId: childNodeId(nodeId, i),
             })
             // Breadth for the next search is half of the current breadth
-            const nextBreadth = Math.ceil(breadth / 2);
+            const nextBreadth = Math.ceil(breadth / 2)
 
             const searchResultGenerator = processSearchResult({
               query: searchQuery.query,
               result,
               numFollowUpQuestions: nextBreadth,
-            });
-            let searchResult: PartialSearchResult = {};
+            })
+            let searchResult: PartialSearchResult = {}
 
             for await (const parsedLearnings of parseStreamingJson(
               searchResultGenerator.textStream,
               searchResultTypeSchema,
-              (value) => !!value.learnings?.length
+              (value) => !!value.learnings?.length,
             )) {
-              searchResult = parsedLearnings;
+              searchResult = parsedLearnings
               onProgress({
                 type: 'processing_serach_result',
                 result: parsedLearnings,
                 query: searchQuery.query,
-                nodeId: childNodeId(nodeId, i)
-              });
+                nodeId: childNodeId(nodeId, i),
+              })
             }
-            console.log(`Processed search result for ${searchQuery.query}`, searchResult);
-            const allLearnings = [...learnings, ...(searchResult.learnings ?? [])];
-            const allUrls = [...visitedUrls, ...newUrls];
-            const nextDepth = currentDepth + 1;
+            console.log(
+              `Processed search result for ${searchQuery.query}`,
+              searchResult,
+            )
+            const allLearnings = [
+              ...learnings,
+              ...(searchResult.learnings ?? []),
+            ]
+            const allUrls = [...visitedUrls, ...newUrls]
+            const nextDepth = currentDepth + 1
 
             onProgress({
               type: 'processed_search_result',
@@ -299,18 +318,21 @@ export async function deepResearch({
                 followUpQuestions: searchResult.followUpQuestions ?? [],
               },
               query: searchQuery.query,
-              nodeId: childNodeId(nodeId, i)
+              nodeId: childNodeId(nodeId, i),
             })
 
-            if (nextDepth < maxDepth && searchResult.followUpQuestions?.length) {
+            if (
+              nextDepth < maxDepth &&
+              searchResult.followUpQuestions?.length
+            ) {
               console.warn(
                 `Researching deeper, breadth: ${nextBreadth}, depth: ${nextDepth}`,
-              );
+              )
 
               const nextQuery = `
               Previous research goal: ${searchQuery.researchGoal}
-              Follow-up research directions: ${searchResult.followUpQuestions.map(q => `\n${q}`).join('')}
-            `.trim();
+              Follow-up research directions: ${searchResult.followUpQuestions.map((q) => `\n${q}`).join('')}
+            `.trim()
 
               return deepResearch({
                 query: nextQuery,
@@ -321,36 +343,38 @@ export async function deepResearch({
                 onProgress,
                 currentDepth: nextDepth,
                 nodeId: childNodeId(nodeId, i),
-              });
+              })
             } else {
               return {
                 learnings: allLearnings,
                 visitedUrls: allUrls,
-              };
+              }
             }
           } catch (e: any) {
-            throw new Error(`Error searching for ${searchQuery.query}, depth ${currentDepth}\nMessage: ${e.message}`)
+            throw new Error(
+              `Error searching for ${searchQuery.query}, depth ${currentDepth}\nMessage: ${e.message}`,
+            )
           }
         }),
       ),
-    );
+    )
     // Conclude results
-    const _learnings = [...new Set(results.flatMap(r => r.learnings))]
-    const _visitedUrls = [...new Set(results.flatMap(r => r.visitedUrls))]
+    const _learnings = [...new Set(results.flatMap((r) => r.learnings))]
+    const _visitedUrls = [...new Set(results.flatMap((r) => r.visitedUrls))]
     // Complete should only be called once
     if (nodeId === '0') {
       onProgress({
         type: 'complete',
         learnings: _learnings,
         visitedUrls: _visitedUrls,
-      });
+      })
     }
     return {
       learnings: _learnings,
       visitedUrls: _visitedUrls,
     }
   } catch (error: any) {
-    console.error(error);
+    console.error(error)
     onProgress({
       type: 'error',
       message: error?.message ?? 'Something went wrong',
@@ -361,4 +385,4 @@ export async function deepResearch({
       visitedUrls: [],
     }
   }
-}
\ No newline at end of file
+}
diff --git a/lib/feedback.ts b/lib/feedback.ts
index addfcbe..13a8642 100644
--- a/lib/feedback.ts
+++ b/lib/feedback.ts
@@ -1,22 +1,22 @@
-import { streamText } from 'ai';
-import { z } from 'zod';
+import { streamText } from 'ai'
+import { z } from 'zod'
 import { zodToJsonSchema } from 'zod-to-json-schema'
 
-import { o3MiniModel } from './ai/providers';
-import { systemPrompt } from './prompt';
+import { o3MiniModel } from './ai/providers'
+import { systemPrompt } from './prompt'
 
 type PartialFeedback = DeepPartial<z.infer<typeof feedbackTypeSchema>>
 
 export const feedbackTypeSchema = z.object({
-  questions: z.array(z.string())
+  questions: z.array(z.string()),
 })
 
 export function generateFeedback({
   query,
   numQuestions = 3,
 }: {
-  query: string;
-  numQuestions?: number;
+  query: string
+  numQuestions?: number
 }) {
   const schema = z.object({
     questions: z
@@ -24,22 +24,22 @@ export function generateFeedback({
       .describe(
         `Follow up questions to clarify the research direction, max of ${numQuestions}`,
       ),
-  });
-  const jsonSchema = JSON.stringify(zodToJsonSchema(schema));
+  })
+  const jsonSchema = JSON.stringify(zodToJsonSchema(schema))
   const prompt = [
     `Given the following query from the user, ask some follow up questions to clarify the research direction. Return a maximum of ${numQuestions} questions, but feel free to return less if the original query is clear: <query>${query}</query>`,
     `You MUST respond in JSON with the following schema: ${jsonSchema}`,
-  ].join('\n\n');
+  ].join('\n\n')
 
   const stream = streamText({
     model: o3MiniModel,
     system: systemPrompt(),
     prompt,
-  });
+  })
 
   return parseStreamingJson(
     stream.textStream,
     feedbackTypeSchema,
-    (value: PartialFeedback) => !!value.questions && value.questions.length > 0
+    (value: PartialFeedback) => !!value.questions && value.questions.length > 0,
   )
 }
diff --git a/lib/prompt.ts b/lib/prompt.ts
index b3ad653..ee6dfbf 100644
--- a/lib/prompt.ts
+++ b/lib/prompt.ts
@@ -1,5 +1,5 @@
 export const systemPrompt = () => {
-  const now = new Date().toISOString();
+  const now = new Date().toISOString()
   return `You are an expert researcher. Today is ${now}. Follow these instructions when responding:
   - You may be asked to research subjects that is after your knowledge cutoff, assume the user is right when presented with news.
   - The user is a highly experienced analyst, no need to simplify it, be as detailed as possible and make sure your response is correct.
@@ -11,5 +11,5 @@ export const systemPrompt = () => {
   - Provide detailed explanations, I'm comfortable with lots of detail.
   - Value good arguments over authorities, the source is irrelevant.
   - Consider new technologies and contrarian ideas, not just the conventional wisdom.
-  - You may use high levels of speculation or prediction, just flag it for me.`;
-};
+  - You may use high levels of speculation or prediction, just flag it for me.`
+}
diff --git a/lib/run.ts b/lib/run.ts
index cfa05df..6423542 100644
--- a/lib/run.ts
+++ b/lib/run.ts
@@ -1,27 +1,27 @@
-import * as fs from 'fs/promises';
-import * as readline from 'readline';
+import * as fs from 'fs/promises'
+import * as readline from 'readline'
 
-import { deepResearch, writeFinalReport } from './deep-research';
-import { generateFeedback } from './feedback';
+import { deepResearch, writeFinalReport } from './deep-research'
+import { generateFeedback } from './feedback'
 
 const rl = readline.createInterface({
   input: process.stdin,
   output: process.stdout,
-});
+})
 
 // Helper function to get user input
 function askQuestion(query: string): Promise<string> {
-  return new Promise(resolve => {
-    rl.question(query, answer => {
-      resolve(answer);
-    });
-  });
+  return new Promise((resolve) => {
+    rl.question(query, (answer) => {
+      resolve(answer)
+    })
+  })
 }
 
 // run the agent
 async function run() {
   // Get initial query
-  const initialQuery = await askQuestion('What would you like to research? ');
+  const initialQuery = await askQuestion('What would you like to research? ')
 
   // Get breath and depth parameters
   const breadth =
@@ -30,29 +30,29 @@ async function run() {
         'Enter research breadth (recommended 2-10, default 4): ',
       ),
       10,
-    ) || 4;
+    ) || 4
   const depth =
     parseInt(
       await askQuestion('Enter research depth (recommended 1-5, default 2): '),
       10,
-    ) || 2;
+    ) || 2
 
-  console.log(`Creating research plan...`);
+  console.log(`Creating research plan...`)
 
   // Generate follow-up questions
   const followUpQuestions = await generateFeedback({
     query: initialQuery,
-  });
+  })
 
   console.log(
     '\nTo better understand your research needs, please answer these follow-up questions:',
-  );
+  )
 
   // Collect answers to follow-up questions
-  const answers: string[] = [];
+  const answers: string[] = []
   for (const question of followUpQuestions) {
-    const answer = await askQuestion(`\n${question}\nYour answer: `);
-    answers.push(answer);
+    const answer = await askQuestion(`\n${question}\nYour answer: `)
+    answers.push(answer)
   }
 
   // Combine all information for deep research
@@ -60,34 +60,34 @@ async function run() {
 Initial Query: ${initialQuery}
 Follow-up Questions and Answers:
 ${followUpQuestions.map((q, i) => `Q: ${q}\nA: ${answers[i]}`).join('\n')}
-`;
+`
 
-  console.log('\nResearching your topic...');
+  console.log('\nResearching your topic...')
 
   const { learnings, visitedUrls } = await deepResearch({
     query: combinedQuery,
     breadth,
     depth,
-  });
+  })
 
-  console.log(`\n\nLearnings:\n\n${learnings.join('\n')}`);
+  console.log(`\n\nLearnings:\n\n${learnings.join('\n')}`)
   console.log(
     `\n\nVisited URLs (${visitedUrls.length}):\n\n${visitedUrls.join('\n')}`,
-  );
-  console.log('Writing final report...');
+  )
+  console.log('Writing final report...')
 
   const report = await writeFinalReport({
     prompt: combinedQuery,
     learnings,
     visitedUrls,
-  });
+  })
 
   // Save report to file
-  await fs.writeFile('output.md', report, 'utf-8');
+  await fs.writeFile('output.md', report, 'utf-8')
 
-  console.log(`\n\nFinal Report:\n\n${report}`);
-  console.log('\nReport has been saved to output.md');
-  rl.close();
+  console.log(`\n\nFinal Report:\n\n${report}`)
+  console.log('\nReport has been saved to output.md')
+  rl.close()
 }
 
-run().catch(console.error);
+run().catch(console.error)
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 42834e0..6c0ee1b 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -1,11 +1,6 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
-  modules: [
-    '@pinia/nuxt',
-    '@nuxt/ui',
-    '@nuxtjs/color-mode',
-    '@vueuse/nuxt',
-  ],
+  modules: ['@pinia/nuxt', '@nuxt/ui', '@nuxtjs/color-mode', '@vueuse/nuxt'],
 
   colorMode: {
     preference: 'system',
diff --git a/pages/index.vue b/pages/index.vue
index 279e3a2..6542a8c 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -3,12 +3,26 @@
     <UContainer>
       <div class="max-w-4xl mx-auto py-8 space-y-4">
         <div class="flex items-center justify-between">
-          <h1 class="text-3xl font-bold text-center mb-2"> Deep Research Assistant </h1>
+          <h1 class="text-3xl font-bold text-center mb-2">
+            Deep Research Assistant
+          </h1>
           <ColorModeButton />
         </div>
-        <ResearchForm :is-loading-feedback="!!feedbackRef?.isLoading" ref="formRef" @submit="generateFeedback" />
-        <ResearchFeedback :is-loading-search="!!deepResearchRef?.isLoading" ref="feedbackRef" @submit="startDeepSearch" />
-        <DeepResearch ref="deepResearchRef" @complete="generateReport" class="mb-8" />
+        <ResearchForm
+          :is-loading-feedback="!!feedbackRef?.isLoading"
+          ref="formRef"
+          @submit="generateFeedback"
+        />
+        <ResearchFeedback
+          :is-loading-search="!!deepResearchRef?.isLoading"
+          ref="feedbackRef"
+          @submit="startDeepSearch"
+        />
+        <DeepResearch
+          ref="deepResearchRef"
+          @complete="generateReport"
+          class="mb-8"
+        />
         <ResearchReport ref="reportRef" />
       </div>
     </UContainer>
@@ -49,9 +63,18 @@ ${feedback.value.map((qa) => `Q: ${qa.assistantQuestion}\nA: ${qa.userAnswer}`).
   }
 
   async function startDeepSearch(_feedback: ResearchFeedbackResult[]) {
-    if (!formRef.value?.form.query || !formRef.value?.form.breadth || !formRef.value?.form.depth) return
+    if (
+      !formRef.value?.form.query ||
+      !formRef.value?.form.breadth ||
+      !formRef.value?.form.depth
+    )
+      return
     feedback.value = _feedback
-    deepResearchRef.value?.startResearch(getCombinedQuery(), formRef.value.form.breadth, formRef.value.form.depth)
+    deepResearchRef.value?.startResearch(
+      getCombinedQuery(),
+      formRef.value.form.breadth,
+      formRef.value.form.depth,
+    )
   }
 
   async function generateReport(_researchResult: ResearchResult) {
diff --git a/prettier.config.cjs b/prettier.config.cjs
index 69b7a30..0f7297d 100644
--- a/prettier.config.cjs
+++ b/prettier.config.cjs
@@ -6,5 +6,4 @@ module.exports = {
   proseWrap: 'never',
   htmlWhitespaceSensitivity: 'strict',
   endOfLine: 'auto',
-  printWidth: 140,
 }
diff --git a/server/api/deep-research.post.ts b/server/api/deep-research.post.ts
index d318026..fa208e3 100644
--- a/server/api/deep-research.post.ts
+++ b/server/api/deep-research.post.ts
@@ -1,9 +1,8 @@
 // This file is currently unused
-import { deepResearch, ResearchStep } from "~/lib/deep-research";
+import { deepResearch, ResearchStep } from '~/lib/deep-research'
 
-export default defineEventHandler(async event => {
-  const { initialQuery, feedback, depth, breadth } =
-    await readBody(event)
+export default defineEventHandler(async (event) => {
+  const { initialQuery, feedback, depth, breadth } = await readBody(event)
   console.log({ initialQuery, feedback, depth, breadth })
 
   // 设置 SSE 响应头
@@ -31,4 +30,4 @@ ${feedback.map((qa: { question: string; answer: string }) => `Q: ${qa.question}\
     })
     resolve()
   })
-})
\ No newline at end of file
+})
diff --git a/server/api/generate-feedback.post.ts b/server/api/generate-feedback.post.ts
index ce6117a..2e43555 100644
--- a/server/api/generate-feedback.post.ts
+++ b/server/api/generate-feedback.post.ts
@@ -1,7 +1,7 @@
 // This file is currently unused
-import { generateFeedback } from "~/lib/feedback";
+import { generateFeedback } from '~/lib/feedback'
 
-export default defineEventHandler(async event => {
+export default defineEventHandler(async (event) => {
   const { query, numQuestions } = await readBody(event)
   console.log({ query, numQuestions })
   const feedback = generateFeedback({
@@ -16,4 +16,4 @@ export default defineEventHandler(async event => {
       return 'Error generating feedback'
     },
   })
-})
\ No newline at end of file
+})
diff --git a/stores/config.ts b/stores/config.ts
new file mode 100644
index 0000000..3b3fe19
--- /dev/null
+++ b/stores/config.ts
@@ -0,0 +1,5 @@
+export interface Config {
+  ai: {
+    provider: 'openai-compatible'
+  }
+}
diff --git a/test.ts b/test.ts
new file mode 100644
index 0000000..6eebb3b
--- /dev/null
+++ b/test.ts
@@ -0,0 +1,16 @@
+import { generateFeedback } from './lib/feedback'
+
+async function test() {
+  console.log('test')
+  const feedback = generateFeedback({
+    query: 'Why is the sky blue?',
+  })
+  console.log('feedback', feedback)
+
+  for await (const partial of feedback.textStream) {
+    console.log(partial)
+  }
+  console.log('end', feedback)
+}
+
+test()
diff --git a/utils/json.ts b/utils/json.ts
index 78a3546..385caea 100644
--- a/utils/json.ts
+++ b/utils/json.ts
@@ -1,53 +1,53 @@
-import { parsePartialJson } from '@ai-sdk/ui-utils';
-import { z } from 'zod';
+import { parsePartialJson } from '@ai-sdk/ui-utils'
+import { z } from 'zod'
 
 export type DeepPartial<T> = T extends object
   ? T extends Array<any>
-  ? T
-  : { [P in keyof T]?: DeepPartial<T[P]> }
-  : T;
-
+    ? T
+    : { [P in keyof T]?: DeepPartial<T[P]> }
+  : T
 
 export function removeJsonMarkdown(text: string) {
   if (text.startsWith('```json')) {
-    text = text.slice(7);
+    text = text.slice(7)
   } else if (text.startsWith('json')) {
-    text = text.slice(4);
+    text = text.slice(4)
   } else if (text.startsWith('```')) {
-    text = text.slice(3);
+    text = text.slice(3)
   }
   if (text.endsWith('```')) {
-    text = text.slice(0, -3);
+    text = text.slice(0, -3)
   }
-  return text;
+  return text
 }
 
 /**
  * 解析流式的 JSON 数据
  * @param textStream 字符串流
- * @param schema zod schema 用于类型验证
+ * @param _schema zod schema 用于类型验证
  * @param isValid 自定义验证函数，用于判断解析出的 JSON 是否有效
  * @returns 异步生成器，yield 解析后的数据
  */
 export async function* parseStreamingJson<T extends z.ZodType>(
   textStream: AsyncIterable<string>,
-  schema: T,
-  isValid: (value: DeepPartial<z.infer<T>>) => boolean
+  _schema: T,
+  isValid: (value: DeepPartial<z.infer<T>>) => boolean,
 ): AsyncGenerator<DeepPartial<z.infer<T>>> {
-  let rawText = '';
-  let isParseSuccessful = false;
+  let rawText = ''
+  let isParseSuccessful = false
 
   for await (const chunk of textStream) {
-    rawText = removeJsonMarkdown(rawText + chunk);
-    const parsed = parsePartialJson(rawText);
+    rawText = removeJsonMarkdown(rawText + chunk)
+    const parsed = parsePartialJson(rawText)
 
-    isParseSuccessful = parsed.state === 'repaired-parse' || parsed.state === 'successful-parse';
-    if (isParseSuccessful) {
-      yield parsed.value as DeepPartial<z.infer<T>>;
+    isParseSuccessful =
+      parsed.state === 'repaired-parse' || parsed.state === 'successful-parse'
+    if (isParseSuccessful && isValid(parsed.value as any)) {
+      yield parsed.value as DeepPartial<z.infer<T>>
     } else {
-      console.dir(parsed, { depth: null, colors: true });
+      console.dir(parsed, { depth: null, colors: true })
     }
   }
 
-  return { isSuccessful: isParseSuccessful };
-}
\ No newline at end of file
+  return { isSuccessful: isParseSuccessful }
+}