diff --git a/docs/errors/OXDT0005.md b/docs/errors/OXDT0005.md
new file mode 100644
index 000000000..bfd546d6a
--- /dev/null
+++ b/docs/errors/OXDT0005.md
@@ -0,0 +1,16 @@
+---
+outline: deep
+---
+# OXDT0005: Oxlint Setup Failed
+
+## Message
+> Failed to set up Oxlint: `{reason}`
+
+## Cause
+Vite DevTools could not install or initialize Oxlint in the project root.
+
+## Fix
+Check the project package manager and configuration, then try again.
+
+## Source
+- [`packages/oxc/src/node/rpc/functions/oxlint-migrate.ts`](https://github.com/vitejs/devtools/blob/main/packages/oxc/src/node/rpc/functions/oxlint-migrate.ts) — runs the installation, initialization, and migration commands.
diff --git a/docs/errors/index.md b/docs/errors/index.md
index 4c865edb8..c73587391 100644
--- a/docs/errors/index.md
+++ b/docs/errors/index.md
@@ -78,3 +78,4 @@ Emitted by `@vitejs/devtools-oxc`.
 | [OXDT0002](./OXDT0002) | error | Invalid Lint Result ID |
 | [OXDT0003](./OXDT0003) | error | Failed to Delete Lint Result |
 | [OXDT0004](./OXDT0004) | error | Oxlint Config Inspection Failed |
+| [OXDT0005](./OXDT0005) | error | Oxlint Setup Failed |
diff --git a/packages/oxc/package.json b/packages/oxc/package.json
index bda58c743..d71649ec9 100644
--- a/packages/oxc/package.json
+++ b/packages/oxc/package.json
@@ -46,6 +46,7 @@
     "cac": "catalog:deps",
     "devframe": "catalog:deps",
     "local-pkg": "catalog:deps",
+    "nypm": "catalog:deps",
     "nostics": "catalog:deps",
     "pathe": "catalog:deps",
     "tinyexec": "catalog:deps"
diff --git a/packages/oxc/src/app/components/SetupOxlintDialog.vue b/packages/oxc/src/app/components/SetupOxlintDialog.vue
new file mode 100644
index 000000000..9815f4d3a
--- /dev/null
+++ b/packages/oxc/src/app/components/SetupOxlintDialog.vue
@@ -0,0 +1,186 @@
+<script setup lang="ts">
+import { DEVTOOLS_TERMINALS_DOCK_ID } from '@vitejs/devtools-kit/constants'
+import ActionButton from '@vitejs/devtools-ui/components/Action/ActionButton.vue'
+import FormCheckbox from '@vitejs/devtools-ui/components/Form/FormCheckbox.vue'
+import OverlayModal from '@vitejs/devtools-ui/components/Overlay/OverlayModal.vue'
+import VisualLoading from '@vitejs/devtools-ui/components/Visual/VisualLoading.vue'
+import { ref, watch } from 'vue'
+import { useRpc } from '#imports'
+
+const emit = defineEmits<{ refresh: [] }>()
+const open = defineModel<boolean>('open', { default: false })
+const rpc = useRpc()
+
+type Stage = 'confirm' | 'running' | 'error'
+
+const stage = ref<Stage>('confirm')
+const canMigrate = ref(false)
+const migrate = ref(true)
+const gitDirty = ref(false)
+const commandLine = ref('')
+const sessionId = ref<string>()
+const errorMessage = ref<string>()
+let previewRequest = 0
+
+async function loadPreview() {
+  const request = ++previewRequest
+  try {
+    const preview = await rpc.value.call('devtools-oxc:setup-preview', {
+      migrate: migrate.value,
+    })
+    if (request !== previewRequest) return
+    canMigrate.value = preview.canMigrate
+    if (!preview.canMigrate) migrate.value = false
+    commandLine.value = preview.command
+    gitDirty.value = preview.gitDirty
+  } catch (error) {
+    if (request !== previewRequest) return
+    errorMessage.value = error instanceof Error ? error.message : String(error)
+  }
+}
+
+watch(open, async isOpen => {
+  if (!isOpen) return
+  stage.value = 'confirm'
+  canMigrate.value = false
+  migrate.value = true
+  gitDirty.value = false
+  commandLine.value = ''
+  sessionId.value = undefined
+  errorMessage.value = undefined
+  await loadPreview()
+})
+
+watch(migrate, () => {
+  if (open.value && stage.value === 'confirm') loadPreview()
+})
+
+async function confirmSetup() {
+  stage.value = 'running'
+  errorMessage.value = undefined
+  try {
+    const action =
+      migrate.value && canMigrate.value
+        ? 'devtools-oxc:migrate-eslint'
+        : 'devtools-oxc:install-oxlint'
+    const result = await rpc.value.call(action)
+    sessionId.value = result.sessionId
+    await rpc.value.call('devtools-oxc:wait-for-setup')
+    if (!open.value) return
+    emit('refresh')
+    open.value = false
+  } catch (error) {
+    if (!open.value) return
+    stage.value = 'error'
+    errorMessage.value = error instanceof Error ? error.message : String(error)
+  }
+}
+
+async function viewInTerminal() {
+  if (sessionId.value) {
+    await rpc.value.call('hub:docks:activate', {
+      dockId: DEVTOOLS_TERMINALS_DOCK_ID,
+      params: { sessionId: sessionId.value },
+    })
+  }
+  open.value = false
+}
+</script>
+
+<template>
+  <OverlayModal v-model:open="open">
+    <template #title> Setup Oxlint with devtools</template>
+
+    <div class="flex flex-col gap-4 w-140 max-w-full min-h-64">
+      <template v-if="stage === 'confirm'">
+        <p class="m0 op70 text-sm">
+          <template v-if="canMigrate && migrate">
+            Oxlint will be installed as a development dependency, and
+            <a
+              href="https://github.com/oxc-project/oxlint-migrate"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="color-active hover:underline"
+            >
+              oxlint-migrate
+            </a>
+            will convert your ESLint flat config into an Oxlint configuration.
+          </template>
+          <template v-else>
+            Oxlint will be installed as a development dependency and create a starter configuration
+            with <code>oxlint --init</code>.
+          </template>
+        </p>
+
+        <div>
+          <pre
+            class="m0 p3 rounded-lg border border-base bg-code font-mono text-sm of-auto text-left"
+          ><code>{{ commandLine || 'Loading…' }}</code></pre>
+        </div>
+
+        <p v-if="gitDirty" class="m0 text-amber text-sm flex gap-2 items-start">
+          <span class="i-ph-warning-duotone mt-0.5 shrink-0" />
+          <span>The Git working tree is not clean. Setup may modify project files.</span>
+        </p>
+
+        <p v-if="errorMessage" class="m0 text-red text-sm">
+          {{ errorMessage }}
+        </p>
+
+        <div class="flex-auto" />
+        <div class="flex items-center justify-between gap-2">
+          <FormCheckbox v-if="canMigrate" v-model="migrate">
+            <span class="text-sm">Migrate from ESLint</span>
+          </FormCheckbox>
+          <div class="flex gap-2">
+            <ActionButton @click="open = false"> Cancel </ActionButton>
+            <ActionButton
+              variant="primary"
+              icon="i-ph-rocket-launch-duotone"
+              @click="confirmSetup()"
+            >
+              Setup Oxlint
+            </ActionButton>
+          </div>
+        </div>
+      </template>
+
+      <template v-else-if="stage === 'running'">
+        <VisualLoading class="flex-auto" text="Setting up Oxlint…" />
+        <div class="flex justify-end gap-2">
+          <ActionButton @click="open = false"> Dismiss </ActionButton>
+          <ActionButton
+            v-if="sessionId"
+            variant="primary"
+            icon="i-ph-terminal-window-duotone"
+            @click="viewInTerminal()"
+          >
+            View in terminals
+          </ActionButton>
+        </div>
+      </template>
+
+      <template v-else>
+        <div class="flex gap-2 items-center text-red">
+          <span class="i-ph-x-circle-duotone" />
+          Oxlint setup failed.
+        </div>
+        <p v-if="errorMessage" class="m0 op70 text-sm">
+          {{ errorMessage }}
+        </p>
+        <div class="flex-auto" />
+        <div class="flex justify-end gap-2">
+          <ActionButton @click="open = false"> Close </ActionButton>
+          <ActionButton
+            v-if="sessionId"
+            variant="primary"
+            icon="i-ph-terminal-window-duotone"
+            @click="viewInTerminal()"
+          >
+            View in terminals
+          </ActionButton>
+        </div>
+      </template>
+    </div>
+  </OverlayModal>
+</template>
diff --git a/packages/oxc/src/app/pages/index.vue b/packages/oxc/src/app/pages/index.vue
index 1339b645b..ab3ea45b2 100644
--- a/packages/oxc/src/app/pages/index.vue
+++ b/packages/oxc/src/app/pages/index.vue
@@ -1,42 +1,26 @@
 <script setup lang="ts">
 import BannerOxcDevTools from '@vitejs/devtools-ui/components/Banner/BannerOxcDevTools.vue'
 import DisplayBadge from '@vitejs/devtools-ui/components/Display/DisplayBadge.vue'
-import DisplayFileIcon from '@vitejs/devtools-ui/components/Display/DisplayFileIcon.vue'
-import DisplayNumberBadge from '@vitejs/devtools-ui/components/Display/DisplayNumberBadge.vue'
 import { useAsyncState } from '@vueuse/core'
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
+import { createOverview } from '../utils/overview'
 import { useRpc } from '#imports'
 
 const rpc = useRpc()
 const vitePlusDarkLogo = '/__devtools-oxc/viteplus-dark.svg'
 const vitePlusLightLogo = '/__devtools-oxc/viteplus-light.svg'
 
-const { state: overview, isLoading } = useAsyncState(
-  () => rpc.value.call('devtools-oxc:overview'),
-  {
-    oxlint: {
-      installed: false,
-      version: undefined,
-      latest: true,
-      npmxLink: undefined,
-    },
-    oxfmt: {
-      installed: false,
-      version: undefined,
-      latest: true,
-      npmxLink: undefined,
-    },
-    vitePlus: undefined,
-  },
-)
+const {
+  state: overview,
+  isLoading,
+  execute: refreshOverview,
+} = useAsyncState(() => rpc.value.call('devtools-oxc:overview'), createOverview())
 
-const { state: configFiles } = useAsyncState(
-  () => rpc.value.call('devtools-oxc:get-config-files'),
-  [],
-)
+const setupOpen = ref(false)
 
 interface ToolView {
   title: string
+  description: string
   icon: string
   to: string
 }
@@ -46,14 +30,34 @@ const tools = computed(() => {
   const oxlintViews: ToolView[] = [
     ...(oxlint.installed
       ? [
-          { title: 'Lint Inspector', icon: 'i-ph-magnifying-glass-duotone', to: '/oxlint/lint' },
-          { title: 'Config Inspector', icon: 'i-ph-gear-duotone', to: '/oxlint/config' },
+          {
+            title: 'Lint Inspector',
+            description: 'View diagnostics and rules',
+            icon: 'i-ph-magnifying-glass-duotone',
+            to: '/oxlint/lint',
+          },
+          {
+            title: 'Config Inspector',
+            description: 'Inspect configuration files',
+            icon: 'i-ph-gear-duotone',
+            to: '/oxlint/config',
+          },
         ]
       : []),
-    { title: 'Documents', icon: 'i-ph-book-open-duotone', to: '/oxlint/documents' },
+    {
+      title: 'Documents',
+      description: 'Guides and references',
+      icon: 'i-ph-book-open-duotone',
+      to: '/oxlint/documents',
+    },
   ]
   const oxfmtViews: ToolView[] = [
-    { title: 'Documents', icon: 'i-ph-book-open-duotone', to: '/oxfmt/documents' },
+    {
+      title: 'Documents',
+      description: 'Guides and references',
+      icon: 'i-ph-book-open-duotone',
+      to: '/oxfmt/documents',
+    },
   ]
 
   return [
@@ -61,14 +65,12 @@ const tools = computed(() => {
       id: 'oxlint',
       name: 'Oxlint',
       info: oxlint,
-      configs: configFiles.value.filter(file => file.tool === 'oxlint'),
       views: oxlintViews,
     },
     {
       id: 'oxfmt',
       name: 'Oxfmt',
       info: overview.value.oxfmt,
-      configs: configFiles.value.filter(file => file.tool === 'oxfmt'),
       views: oxfmtViews,
     },
   ]
@@ -106,26 +108,24 @@ const tools = computed(() => {
       <div
         v-for="tool in tools"
         :key="tool.id"
-        class="border border-base rounded p2 flex-1 min-w-max"
+        class="border border-base rounded-lg p-4 flex-1 min-w-120"
       >
-        <div class="p4 flex flex-col gap-4 h-full">
-          <div class="text-2xl font-semibold">{{ tool.name }}</div>
-
-          <div class="grid grid-cols-[max-content_160px_2fr] gap-2 items-center">
-            <div class="i-ph-tag-duotone op-fade" />
-            <span class="op-fade">Version</span>
-            <div class="flex items-center gap-2 w-full">
+        <div class="flex flex-col gap-6 h-full">
+          <div class="flex items-start justify-between gap-4">
+            <div>
+              <div class="text-2xl font-semibold">{{ tool.name }}</div>
               <a
                 v-if="tool.info.installed"
                 :href="tool.info.npmxLink"
                 target="_blank"
-                class="hover:color-active font-mono"
+                class="block mt-1 hover:color-active op-fade text-sm font-mono"
               >
                 v{{ tool.info.version }}
               </a>
-              <span v-else class="op-fade">Not installed</span>
+              <div v-else class="block mt-1 h-5" aria-hidden="true" />
+            </div>
+            <template v-if="tool.info.installed">
               <a
-                v-if="tool.info.installed"
                 :href="
                   tool.info.latest ? undefined : `https://npmx.dev/package/${tool.id}/v/latest`
                 "
@@ -138,45 +138,39 @@ const tools = computed(() => {
                   :class="tool.info.latest ? 'badge-color-green' : 'badge-color-amber'"
                 />
               </a>
-            </div>
-
-            <div class="i-ph-files-duotone op-fade" />
-            <span class="op-fade">Configs</span>
-            <VDropdown v-if="tool.configs.length" placement="bottom-start" :triggers="['hover']">
-              <DisplayNumberBadge
-                :number="tool.configs.length"
-                class="py1 rounded-full font-mono inline-block text-sm cursor-pointer hover:color-active"
-              />
-
-              <template #popper>
-                <div class="p3 min-w-60 flex flex-col gap-2 font-mono text-sm">
-                  <div
-                    v-for="config in tool.configs"
-                    :key="`${config.tool}:${config.path}`"
-                    class="flex items-center gap-2"
-                  >
-                    <DisplayFileIcon class="flex-none" :filename="config.path" />
-                    <span>{{ config.path }}</span>
-                  </div>
-                </div>
-              </template>
-            </VDropdown>
-            <span v-else class="op-fade text-sm">Not found</span>
+            </template>
+            <DisplayBadge v-else text="Not installed" :color="false" class="badge-color-gray" />
           </div>
 
-          <div class="flex gap-2">
+          <div class="grid grid-cols-[repeat(auto-fit,minmax(10rem,1fr))] gap-2">
+            <button
+              v-if="tool.id === 'oxlint' && !tool.info.installed"
+              type="button"
+              class="rounded-lg px-3 py-3 flex items-start gap-3 hover:bg-active transition-colors disabled:pointer-events-none disabled:op30!"
+              @click="setupOpen = true"
+            >
+              <div class="i-ph-rocket-launch-duotone text-2xl mt-0.5" />
+              <div class="text-left">
+                <div class="font-medium">Setup Oxlint</div>
+                <div class="text-xs op-fade mt-0.5">Install & setup Oxlint</div>
+              </div>
+            </button>
             <NuxtLink
               v-for="view in tool.views"
               :key="view.title"
               :to="view.to"
-              class="btn-action flex flex-col flex-1 min-w-max p4 !px4 whitespace-nowrap"
+              class="rounded-lg px-3 py-3 flex items-start gap-3 hover:bg-active transition-colors"
             >
-              <div :class="[view.icon, 'text-2xl']" />
-              {{ view.title }}
+              <div :class="[view.icon, 'text-2xl mt-0.5']" />
+              <div class="text-left">
+                <div class="font-medium">{{ view.title }}</div>
+                <div class="text-xs op-fade mt-0.5">{{ view.description }}</div>
+              </div>
             </NuxtLink>
           </div>
         </div>
       </div>
     </div>
+    <SetupOxlintDialog v-model:open="setupOpen" @refresh="refreshOverview()" />
   </div>
 </template>
diff --git a/packages/oxc/src/app/pages/oxfmt.vue b/packages/oxc/src/app/pages/oxfmt.vue
index c48def22d..982408ce4 100644
--- a/packages/oxc/src/app/pages/oxfmt.vue
+++ b/packages/oxc/src/app/pages/oxfmt.vue
@@ -8,11 +8,11 @@ useSideNav(() => [
     icon: 'i-ph-house-duotone',
     to: '/',
   },
-  {
-    title: 'Config Inspector',
-    icon: 'i-ph-sliders-duotone',
-    to: '/oxfmt/config',
-  },
+  // {
+  //   title: 'Config Inspector',
+  //   icon: 'i-ph-sliders-duotone',
+  //   to: '/oxfmt/config',
+  // },
   {
     title: 'Documents',
     icon: 'i-ph-book-open-duotone',
diff --git a/packages/oxc/src/app/pages/oxfmt/documents.vue b/packages/oxc/src/app/pages/oxfmt/documents.vue
index 5f1d8bfe8..3101b3f2a 100644
--- a/packages/oxc/src/app/pages/oxfmt/documents.vue
+++ b/packages/oxc/src/app/pages/oxfmt/documents.vue
@@ -1,7 +1,22 @@
+<script setup lang="ts">
+import VisualLoading from '@vitejs/devtools-ui/components/Visual/VisualLoading.vue'
+import { ref } from 'vue'
+
+const isLoading = ref(true)
+</script>
+
 <template>
-  <iframe
-    src="https://oxc.rs/docs/guide/usage/formatter.html"
-    title="Oxfmt Documentation"
-    class="border-0 block w-full h-full"
-  />
+  <div class="relative h-full">
+    <VisualLoading
+      v-if="isLoading"
+      class="absolute inset-0"
+      text="Loading Oxfmt documentation..."
+    />
+    <iframe
+      src="https://oxc.rs/docs/guide/usage/formatter.html"
+      title="Oxfmt Documentation"
+      class="border-0 block w-full h-full"
+      @load="isLoading = false"
+    />
+  </div>
 </template>
diff --git a/packages/oxc/src/app/pages/oxlint.vue b/packages/oxc/src/app/pages/oxlint.vue
index 1b37bbb45..dc16c5088 100644
--- a/packages/oxc/src/app/pages/oxlint.vue
+++ b/packages/oxc/src/app/pages/oxlint.vue
@@ -1,6 +1,15 @@
 <script setup lang="ts">
 import PanelSideNav from '@vitejs/devtools-ui/components/Panel/PanelSideNav.vue'
 import { useSideNav } from '@vitejs/devtools-ui/composables/nav'
+import { useAsyncState } from '@vueuse/core'
+import { createOverview } from '../utils/overview'
+import { useRpc } from '#imports'
+
+const rpc = useRpc()
+const { state: overview } = useAsyncState(
+  () => rpc.value.call('devtools-oxc:overview'),
+  createOverview(),
+)
 
 useSideNav(() => [
   {
@@ -8,16 +17,20 @@ useSideNav(() => [
     icon: 'i-ph-house-duotone',
     to: '/',
   },
-  {
-    title: 'Lint Inspector',
-    icon: 'i-ph-magnifying-glass-duotone',
-    to: '/oxlint/lint',
-  },
-  {
-    title: 'Config Inspector',
-    icon: 'i-ph-gear-duotone',
-    to: '/oxlint/config',
-  },
+  ...(overview.value.oxlint.installed
+    ? [
+        {
+          title: 'Lint Inspector',
+          icon: 'i-ph-magnifying-glass-duotone',
+          to: '/oxlint/lint',
+        },
+        {
+          title: 'Config Inspector',
+          icon: 'i-ph-gear-duotone',
+          to: '/oxlint/config',
+        },
+      ]
+    : []),
   {
     title: 'Documents',
     icon: 'i-ph-book-open-duotone',
diff --git a/packages/oxc/src/app/pages/oxlint/documents.vue b/packages/oxc/src/app/pages/oxlint/documents.vue
index cf822f3f2..9092f4065 100644
--- a/packages/oxc/src/app/pages/oxlint/documents.vue
+++ b/packages/oxc/src/app/pages/oxlint/documents.vue
@@ -1,7 +1,22 @@
+<script setup lang="ts">
+import VisualLoading from '@vitejs/devtools-ui/components/Visual/VisualLoading.vue'
+import { ref } from 'vue'
+
+const isLoading = ref(true)
+</script>
+
 <template>
-  <iframe
-    src="https://oxc.rs/docs/guide/usage/linter.html"
-    title="Oxlint Documentation"
-    class="border-0 block w-full h-full"
-  />
+  <div class="relative h-full">
+    <VisualLoading
+      v-if="isLoading"
+      class="absolute inset-0"
+      text="Loading Oxlint documentation..."
+    />
+    <iframe
+      src="https://oxc.rs/docs/guide/usage/linter.html"
+      title="Oxlint Documentation"
+      class="border-0 block w-full h-full"
+      @load="isLoading = false"
+    />
+  </div>
 </template>
diff --git a/packages/oxc/src/app/utils/overview.ts b/packages/oxc/src/app/utils/overview.ts
new file mode 100644
index 000000000..04ebec490
--- /dev/null
+++ b/packages/oxc/src/app/utils/overview.ts
@@ -0,0 +1,18 @@
+export function createOverview() {
+  return {
+    oxlint: {
+      installed: false,
+      version: undefined,
+      latest: true,
+      npmxLink: undefined,
+    },
+    oxfmt: {
+      installed: false,
+      version: undefined,
+      latest: true,
+      npmxLink: undefined,
+    },
+    vitePlus: undefined,
+    needsOxlintMigration: false,
+  }
+}
diff --git a/packages/oxc/src/node/__tests__/oxlint-migrate.test.ts b/packages/oxc/src/node/__tests__/oxlint-migrate.test.ts
new file mode 100644
index 000000000..16ed0a145
--- /dev/null
+++ b/packages/oxc/src/node/__tests__/oxlint-migrate.test.ts
@@ -0,0 +1,86 @@
+import { mkdtemp, rm, writeFile } from 'node:fs/promises'
+import { tmpdir } from 'node:os'
+import { join } from 'node:path'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { needsOxlintMigration, oxlintInstall, oxlintMigrate } from '../rpc/functions/oxlint-setup'
+
+const fixtures: string[] = []
+
+async function createFixture() {
+  const cwd = await mkdtemp(join(tmpdir(), 'oxlint-migrate-'))
+  fixtures.push(cwd)
+  return cwd
+}
+
+afterEach(async () => {
+  await Promise.all(fixtures.splice(0).map(dir => rm(dir, { recursive: true, force: true })))
+})
+
+describe('needsOxlintMigration', () => {
+  it.each([
+    'eslint.config.js',
+    'eslint.config.mjs',
+    'eslint.config.cjs',
+    'eslint.config.ts',
+    'eslint.config.mts',
+    'eslint.config.cts',
+  ])('detects %s', async file => {
+    const cwd = await createFixture()
+    await writeFile(join(cwd, file), 'export default []')
+    expect(needsOxlintMigration(cwd)).toBe(true)
+  })
+
+  it('requires a root ESLint config and no root Oxlint config', async () => {
+    const cwd = await createFixture()
+    await writeFile(join(cwd, 'eslint.config.mjs'), 'export default []')
+    expect(needsOxlintMigration(cwd)).toBe(true)
+
+    await writeFile(join(cwd, 'oxlint.config.ts'), 'export default {}')
+    expect(needsOxlintMigration(cwd)).toBe(false)
+
+    await rm(join(cwd, 'oxlint.config.ts'))
+    await writeFile(join(cwd, '.oxfmtrc.json'), '{}')
+    expect(needsOxlintMigration(cwd)).toBe(true)
+  })
+
+  it('runs installation and migration in one terminal session', async () => {
+    const cwd = await createFixture()
+    await writeFile(join(cwd, 'eslint.config.js'), 'export default []')
+    const getResult = vi
+      .fn<() => Promise<{ exitCode: number; stderr: string }>>()
+      .mockResolvedValue({ exitCode: 0, stderr: '' })
+    const startChildProcess = vi
+      .fn<(...args: unknown[]) => Promise<{ getResult: typeof getResult }>>()
+      .mockResolvedValue({ getResult })
+    const setup = oxlintMigrate.setup!({
+      cwd,
+      terminals: { startChildProcess, sessions: new Map() },
+    } as any)
+
+    await setup.handler!()
+
+    expect(startChildProcess).toHaveBeenCalledOnce()
+    expect(startChildProcess.mock.calls[0]![0].args.at(-1)).toContain(' && ')
+  })
+
+  it('installs Oxlint as a dev dependency before initializing it', async () => {
+    const cwd = await createFixture()
+    const startChildProcess = vi
+      .fn<
+        (
+          ...args: unknown[]
+        ) => Promise<{ getResult: () => Promise<{ exitCode: number; stderr: string }> }>
+      >()
+      .mockResolvedValue({ getResult: async () => ({ exitCode: 0, stderr: '' }) })
+    const setup = oxlintInstall.setup!({
+      cwd,
+      terminals: { startChildProcess, sessions: new Map() },
+    } as any)
+
+    await setup.handler!()
+
+    expect(startChildProcess.mock.calls[0]![0].args.at(-1)).toMatch(
+      /oxlint@latest && .*oxlint --init/,
+    )
+  })
+})
diff --git a/packages/oxc/src/node/devframe.ts b/packages/oxc/src/node/devframe.ts
index 5b6f2eab1..6aaee06d3 100644
--- a/packages/oxc/src/node/devframe.ts
+++ b/packages/oxc/src/node/devframe.ts
@@ -20,7 +20,7 @@ export const OXC_DEVTOOLS_BASE = '/__devtools-oxc/'
  */
 export const oxcDevframe = defineDevframe({
   id: 'devtools-oxc',
-  name: 'Oxc',
+  name: 'Oxc Devtools',
   version,
   packageName: name,
   homepage,
diff --git a/packages/oxc/src/node/diagnostics.ts b/packages/oxc/src/node/diagnostics.ts
index 52aa311d9..ac232d7a5 100644
--- a/packages/oxc/src/node/diagnostics.ts
+++ b/packages/oxc/src/node/diagnostics.ts
@@ -23,5 +23,9 @@ export const diagnostics = /* #__PURE__ */ defineDiagnostics({
         `Failed to inspect Oxlint config "${p.configPath}": ${p.reason}`,
       fix: 'Choose a supported Oxlint config inside the workspace and ensure Oxlint can read its rules.',
     },
+    OXDT0005: {
+      why: (p: { reason: string }) => `Failed to set up Oxlint: ${p.reason}`,
+      fix: 'Check the project package manager and configuration, then try again.',
+    },
   },
 })
diff --git a/packages/oxc/src/node/rpc/functions/get-config-files.ts b/packages/oxc/src/node/rpc/functions/get-config-files.ts
index 89323a95b..9fd014384 100644
--- a/packages/oxc/src/node/rpc/functions/get-config-files.ts
+++ b/packages/oxc/src/node/rpc/functions/get-config-files.ts
@@ -5,7 +5,6 @@ export const getConfigFiles = defineOxcRpc({
   name: 'devtools-oxc:get-config-files',
   type: 'query',
   jsonSerializable: true,
-  cacheable: true,
   setup: ctx => ({
     handler: () => getOxcConfigFiles(ctx.cwd),
   }),
diff --git a/packages/oxc/src/node/rpc/functions/overview.ts b/packages/oxc/src/node/rpc/functions/overview.ts
index 8525876db..2ace387f6 100644
--- a/packages/oxc/src/node/rpc/functions/overview.ts
+++ b/packages/oxc/src/node/rpc/functions/overview.ts
@@ -1,6 +1,7 @@
 import { defineOxcRpc } from '../_define'
 import { x } from 'tinyexec'
 import { getVitePlusVersions, isVitePlusInstalled } from '../../utils/vite-plus'
+import { needsOxlintMigration } from './oxlint-setup'
 
 type Package = {
   installed: boolean
@@ -50,6 +51,9 @@ export const overview = defineOxcRpc({
         } else {
           try {
             const { stdout } = await x('oxlint', ['--version'], { nodeOptions: { cwd: ctx.cwd } })
+            if (!stdout) {
+              throw new Error('Not installed')
+            }
             oxlint.installed = true
             oxlint.version = stdout.split(' ')[1]?.trim().replaceAll('\n', '') ?? undefined
             oxlint.latest = oxlint.version === oxlintData.version
@@ -59,6 +63,9 @@ export const overview = defineOxcRpc({
           }
           try {
             const { stdout } = await x('oxfmt', ['--version'], { nodeOptions: { cwd: ctx.cwd } })
+            if (!stdout) {
+              throw new Error('Not installed')
+            }
             oxfmt.installed = true
             oxfmt.version = stdout.split(' ')[1]?.trim().replaceAll('\n', '') ?? undefined
             oxfmt.latest = oxfmt.version === oxfmtData.version
@@ -71,6 +78,7 @@ export const overview = defineOxcRpc({
           oxlint,
           oxfmt,
           vitePlus: vitePlusVersions?.vitePlus,
+          needsOxlintMigration: needsOxlintMigration(ctx.cwd),
         }
       },
     }
diff --git a/packages/oxc/src/node/rpc/functions/oxlint-setup.ts b/packages/oxc/src/node/rpc/functions/oxlint-setup.ts
new file mode 100644
index 000000000..f92b67488
--- /dev/null
+++ b/packages/oxc/src/node/rpc/functions/oxlint-setup.ts
@@ -0,0 +1,177 @@
+import type { DevToolsTerminalHost } from '@vitejs/devtools-kit'
+import type { DevframeNodeContext } from 'devframe/types'
+import { existsSync } from 'node:fs'
+import { addDependencyCommand, detectPackageManager, dlxCommand } from 'nypm'
+import { Diagnostic } from 'nostics'
+import { join } from 'pathe'
+import { x } from 'tinyexec'
+import { diagnostics } from '../../diagnostics'
+import { CONFIG_FILES } from '../../utils/config-files'
+import { defineOxcRpc } from '../_define'
+
+const eslintConfigFiles = [
+  'eslint.config.js',
+  'eslint.config.mjs',
+  'eslint.config.cjs',
+  'eslint.config.ts',
+  'eslint.config.mts',
+  'eslint.config.cts',
+]
+
+type ContextWithTerminals = DevframeNodeContext & { terminals?: DevToolsTerminalHost }
+type MigrationSession = Awaited<ReturnType<DevToolsTerminalHost['startChildProcess']>>
+
+let current: MigrationSession | undefined
+let currentSessionId: string | undefined
+let runCount = 0
+
+export function needsOxlintMigration(root: string): boolean {
+  return (
+    eslintConfigFiles.some(file => existsSync(join(root, file))) &&
+    !Object.entries(CONFIG_FILES).some(
+      ([file, config]) => config.tool === 'oxlint' && existsSync(join(root, file)),
+    )
+  )
+}
+
+async function getSetupCommands(root: string, migrate: boolean): Promise<string[]> {
+  const packageManager = (await detectPackageManager(root))?.name ?? 'npm'
+  const install = addDependencyCommand(packageManager, 'oxlint@latest', { dev: true })
+  const setup = migrate
+    ? dlxCommand(packageManager, '@oxlint/migrate', { short: true })
+    : dlxCommand(packageManager, 'oxlint', { args: ['--init'], short: true })
+  return [install, setup]
+}
+
+async function isGitDirty(root: string): Promise<boolean> {
+  try {
+    const result = await x('git', ['-C', root, 'status', '--porcelain'], {
+      nodeOptions: { cwd: root },
+    })
+    return result.exitCode === 0 && Boolean(result.stdout.trim())
+  } catch {
+    return false
+  }
+}
+
+async function startMigration(context: ContextWithTerminals): Promise<{ sessionId?: string }> {
+  const root = context.cwd
+  if (!needsOxlintMigration(root))
+    throw diagnostics.OXDT0005({ reason: 'No eligible ESLint config was found.' })
+
+  try {
+    return startSetup(context, await getSetupCommands(root, true), 'Migrate ESLint to Oxlint')
+  } catch (error) {
+    if (error instanceof Diagnostic) throw error
+    throw diagnostics.OXDT0005({
+      reason: error instanceof Error ? error.message : String(error),
+      cause: error,
+    })
+  }
+}
+
+async function startInstall(context: ContextWithTerminals): Promise<{ sessionId?: string }> {
+  try {
+    return startSetup(context, await getSetupCommands(context.cwd, false), 'Install Oxlint')
+  } catch (error) {
+    if (error instanceof Diagnostic) throw error
+    throw diagnostics.OXDT0005({
+      reason: error instanceof Error ? error.message : String(error),
+      cause: error,
+    })
+  }
+}
+
+async function startSetup(
+  context: ContextWithTerminals,
+  commandLines: string[],
+  title: string,
+): Promise<{ sessionId?: string }> {
+  const terminals = context.terminals
+  if (terminals) {
+    if (currentSessionId && terminals.sessions.get(currentSessionId)?.status === 'running')
+      return { sessionId: currentSessionId }
+
+    const command = commandLines.join(' && ')
+    currentSessionId = `devtools-oxc:setup:${++runCount}`
+    current = await terminals.startChildProcess(
+      process.platform === 'win32'
+        ? { command: 'cmd', args: ['/d', '/s', '/c', command], cwd: context.cwd }
+        : { command: 'sh', args: ['-c', command], cwd: context.cwd },
+      { id: currentSessionId, title, icon: 'ph:terminal-window-duotone' },
+    )
+    return { sessionId: currentSessionId }
+  }
+
+  current = undefined
+  currentSessionId = undefined
+  for (const commandLine of commandLines) {
+    const [command, ...args] = commandLine.split(' ')
+    const result = await x(command!, args, { nodeOptions: { cwd: context.cwd } })
+    if (result.exitCode !== 0) {
+      throw diagnostics.OXDT0005({
+        reason: result.stderr.trim() || `Command exited with code ${result.exitCode ?? 'null'}.`,
+      })
+    }
+  }
+  return {}
+}
+
+async function waitForSetup(): Promise<void> {
+  if (!current) return
+  try {
+    const result = await current.getResult()
+    if (result.exitCode !== 0) {
+      throw diagnostics.OXDT0005({
+        reason:
+          result.stderr.trim() ||
+          `Migration command exited with code ${result.exitCode ?? 'null'}.`,
+      })
+    }
+  } catch (error) {
+    if (error instanceof Diagnostic) throw error
+    throw diagnostics.OXDT0005({
+      reason: error instanceof Error ? error.message : String(error),
+      cause: error,
+    })
+  }
+}
+
+export const oxlintMigrate = defineOxcRpc({
+  name: 'devtools-oxc:migrate-eslint',
+  type: 'action',
+  setup: context => ({
+    handler: () => startMigration(context as ContextWithTerminals),
+  }),
+})
+
+export const oxlintSetupPreview = defineOxcRpc({
+  name: 'devtools-oxc:setup-preview',
+  type: 'query',
+  jsonSerializable: true,
+  setup: context => ({
+    handler: async ({ migrate }: { migrate: boolean }) => {
+      const canMigrate = needsOxlintMigration(context.cwd)
+      const command = (await getSetupCommands(context.cwd, migrate && canMigrate)).join(' && ')
+      return {
+        canMigrate,
+        command,
+        gitDirty: await isGitDirty(context.cwd),
+      }
+    },
+  }),
+})
+
+export const oxlintInstall = defineOxcRpc({
+  name: 'devtools-oxc:install-oxlint',
+  type: 'action',
+  setup: context => ({
+    handler: () => startInstall(context as ContextWithTerminals),
+  }),
+})
+
+export const oxlintWaitForSetup = defineOxcRpc({
+  name: 'devtools-oxc:wait-for-setup',
+  type: 'action',
+  setup: () => ({ handler: waitForSetup }),
+})
diff --git a/packages/oxc/src/node/rpc/index.ts b/packages/oxc/src/node/rpc/index.ts
index aee7f05d1..11bb6c96e 100644
--- a/packages/oxc/src/node/rpc/index.ts
+++ b/packages/oxc/src/node/rpc/index.ts
@@ -9,6 +9,12 @@ import { oxlintGetConfigFile } from './functions/oxlint-get-config-file'
 import { oxfmtGetConfigFile } from './functions/oxfmt-get-config-file'
 import { openInEditor } from './functions/open-in-editor'
 import { getConfigFiles } from './functions/get-config-files'
+import {
+  oxlintInstall,
+  oxlintMigrate,
+  oxlintSetupPreview,
+  oxlintWaitForSetup,
+} from './functions/oxlint-setup'
 
 export const rpcFunctions = [
   oxlintRun,
@@ -20,6 +26,10 @@ export const rpcFunctions = [
   oxlintGetConfigFile,
   oxfmtGetConfigFile,
   getConfigFiles,
+  oxlintMigrate,
+  oxlintInstall,
+  oxlintSetupPreview,
+  oxlintWaitForSetup,
   openInEditor,
 ] as const
 
diff --git a/packages/oxc/src/node/utils/config-files.ts b/packages/oxc/src/node/utils/config-files.ts
index 2063e0c36..fd1c8be66 100644
--- a/packages/oxc/src/node/utils/config-files.ts
+++ b/packages/oxc/src/node/utils/config-files.ts
@@ -6,7 +6,7 @@ import { promisify } from 'node:util'
 
 const execFile = promisify(execFileCallback)
 
-const CONFIG_FILES = {
+export const CONFIG_FILES = {
   '.oxlintrc.json': { tool: 'oxlint', format: 'json' },
   '.oxlintrc.jsonc': { tool: 'oxlint', format: 'jsonc' },
   'oxlint.config.js': { tool: 'oxlint', format: 'js' },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a19009d28..bd5d5b719 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -982,6 +982,9 @@ importers:
       nostics:
         specifier: catalog:deps
         version: 1.2.0
+      nypm:
+        specifier: catalog:deps
+        version: 0.6.9
       pathe:
         specifier: catalog:deps
         version: 2.0.3