diff --git a/docs/content/2.module/0.guide.md b/docs/content/2.module/0.guide.md
index 2c9211a228..05271636cd 100644
--- a/docs/content/2.module/0.guide.md
+++ b/docs/content/2.module/0.guide.md
@@ -60,6 +60,8 @@ nuxt.hook('devtools:customTabs', (tabs) => {
 })
 ```
 
+Learn more about [DevTools Utility Kit](/module/utils-kit).
+
 ## Lazy Service Launching
 
 If the view you are contributing is heavy to load, you can have the tab first and let user launch it when they need it.
diff --git a/docs/content/2.module/1.utils-kit.md b/docs/content/2.module/1.utils-kit.md
new file mode 100644
index 0000000000..21c8f2fbc8
--- /dev/null
+++ b/docs/content/2.module/1.utils-kit.md
@@ -0,0 +1,71 @@
+# Utility Kit
+
+::alert{type=warning}
+APIs are subject to change.
+::
+
+Since v0.3.0, we are now providing a utility kit for easier DevTools integrations, similar to `@nuxt/kit`.
+
+It can be access via `@nuxt/devtools/kit`:
+
+```ts
+import { addCustomTab } from '@nuxt/devtools/kit'
+```
+
+Generally, we recommend to module authors to install `@nuxt/devtools` as a dev dependency and bundled `@nuxt/devtools/kit` into your module.
+
+## `addCustomTab()`
+
+A shorthand for calling the hook `devtools:customTabs`.
+
+```ts
+import { addCustomTab } from '@nuxt/devtools/kit'
+
+addCustomTab(() => ({
+  // unique identifier
+  name: 'my-module',
+  // title to display in the tab
+  title: 'My Module',
+  // any icon from Iconify, or a URL to an image
+  icon: 'carbon:apps',
+  // iframe view
+  view: {
+    type: 'iframe',
+    src: '/url-to-your-module-view',
+  },
+}))
+```
+
+## `refreshCustomTabs()`
+
+A shorthand for call hook `devtools:customTabs:refresh`. It will refresh all custom tabs.
+
+## `startSubprocess()`
+
+Start a sub process using `execa` and create a terminal tab in DevTools.
+
+```ts
+import { startSubprocess } from '@nuxt/devtools/kit'
+
+const subprocess = startSubprocess(
+  {
+    command: 'code-server',
+    args: [
+      'serve-local',
+      '--accept-server-license-terms',
+      '--without-connection-token',
+      `--port=${port}`,
+    ],
+  },
+  {
+    id: 'devtools:vscode',
+    name: 'VS Code Server',
+    icon: 'logos-visual-studio-code',
+  },
+)
+```
+
+```ts
+subprocess.restart()
+subprocess.terminate()
+```
diff --git a/docs/content/2.module/1.ui-kit.md b/docs/content/2.module/2.ui-kit.md
similarity index 100%
rename from docs/content/2.module/1.ui-kit.md
rename to docs/content/2.module/2.ui-kit.md
diff --git a/docs/nuxt.config.ts b/docs/nuxt.config.ts
index 848bf1292b..771ebc4262 100644
--- a/docs/nuxt.config.ts
+++ b/docs/nuxt.config.ts
@@ -1,4 +1,7 @@
 export default defineNuxtConfig({
   extends: '@nuxt-themes/docus',
-  modules: ['@nuxtjs/plausible'],
+  modules: [
+    '@nuxtjs/plausible',
+    '../local',
+  ],
 })
diff --git a/local.ts b/local.ts
index 3d90bf6f78..97be7670ea 100644
--- a/local.ts
+++ b/local.ts
@@ -18,7 +18,6 @@
  * ```
  */
 import { defineNuxtModule, logger } from '@nuxt/kit'
-import { execa } from 'execa'
 import { resolve } from 'pathe'
 import { getPort } from 'get-port-please'
 import { searchForWorkspaceRoot } from 'vite'
@@ -26,6 +25,7 @@ import { ROUTE_CLIENT, defaultOptions } from './packages/devtools/src/constant'
 import type { ModuleOptions } from './packages/devtools/src/types'
 import { packageDir } from './packages/devtools/src/dirs'
 import { enableModule } from './packages/devtools/src/module-main'
+import { startSubprocess } from './packages/devtools/src/kit'
 
 export type { ModuleOptions }
 
@@ -40,10 +40,6 @@ export default defineNuxtModule<ModuleOptions>({
     const workspaceRoot = resolve(packageDir, '../..')
     const PORT = await getPort({ port: 12442 })
 
-    // TODO: add embedded terminal and forward logs to it
-    const subprocess = execa('npx', ['nuxi', 'dev', '--port', PORT.toString()], { cwd: clientDir, stdio: 'pipe' })
-    subprocess.stderr?.pipe(process.stderr)
-
     nuxt.hook('vite:extendConfig', (config) => {
       config.server ||= {}
       // add proxy to client
@@ -61,6 +57,22 @@ export default defineNuxtModule<ModuleOptions>({
       config.server.fs.allow.push(workspaceRoot)
     })
 
+    nuxt.hook('app:resolve', () => {
+      startSubprocess(
+        {
+          command: 'npx',
+          args: ['nuxi', 'dev', '--port', PORT.toString()],
+          cwd: clientDir,
+          stdio: 'pipe',
+        },
+        {
+          id: 'devtools:local',
+          name: 'Nuxt Devtools Local',
+          icon: 'logos-nuxt-icon',
+        },
+      )
+    })
+
     logger.info(`Nuxt Devtools is using local client from \`${clientDir}\``)
 
     return enableModule(options, nuxt)
diff --git a/packages/devtools-ui-kit/src/components/NDialog.vue b/packages/devtools-ui-kit/src/components/NDialog.vue
index 1d44c8187d..8d31822e46 100644
--- a/packages/devtools-ui-kit/src/components/NDialog.vue
+++ b/packages/devtools-ui-kit/src/components/NDialog.vue
@@ -45,13 +45,13 @@ export default {
 
 <template>
   <div
-    class="n-transition fixed flex items-center justify-center n-dialog inset-0 z-100"
+    class="n-transition fixed flex items-center justify-center z-100 n-dialog inset-0"
     :class="[
       show ? '' : 'op0 pointer-events-none',
     ]"
   >
     <div
-      class="absolute inset-0 -z-1"
+      class="inset-0 absolute -z-1"
       :class="[
         dim ? 'bg-black/50' : '',
       ]"
diff --git a/packages/devtools-ui-kit/src/components/NIconButton.vue b/packages/devtools-ui-kit/src/components/NIconButton.vue
new file mode 100644
index 0000000000..83616a526b
--- /dev/null
+++ b/packages/devtools-ui-kit/src/components/NIconButton.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { NuxtLink } from '#components'
+
+const props = defineProps<{
+  to?: string
+  icon: string
+}>()
+</script>
+
+<template>
+  <Component
+    :is="to ? NuxtLink : 'button'"
+    :to="to"
+    v-bind="$attrs"
+    class="n-transition n-icon-button"
+  >
+    <NIcon :icon="props.icon" />
+  </Component>
+</template>
diff --git a/packages/devtools-ui-kit/src/components/NSelect.vue b/packages/devtools-ui-kit/src/components/NSelect.vue
index cafac89c03..2e675ee3d8 100644
--- a/packages/devtools-ui-kit/src/components/NSelect.vue
+++ b/packages/devtools-ui-kit/src/components/NSelect.vue
@@ -20,12 +20,12 @@ const input = useVModel(props, 'modelValue', emit, { passive: true })
 
 <template>
   <div
-    class="n-bg-base rounded py-1 border n-border-base flex items-center flex n-text-input focus-within:n-focus-base focus-within:border-context px-2"
+    class="flex items-center flex n-bg-base rounded py-1 border n-border-base px-2 n-text-input focus-within:n-focus-base focus-within:border-context"
   >
     <slot name="icon">
       <NIcon v-if="icon" :icon="icon" class="op50 mr-0.4em text-1.1em" />
     </slot>
-    <select v-model="input" :disabled="disabled" class="flex-auto n-bg-base w-full !outline-none">
+    <select v-model="input" :disabled="disabled" class="n-bg-base flex-auto w-full !outline-none">
       <option v-if="placeholder" value="" disabled hidden>
         {{ placeholder }}
       </option>
diff --git a/packages/devtools-ui-kit/src/unocss.ts b/packages/devtools-ui-kit/src/unocss.ts
index 167c89d72e..2ec0ab6bca 100644
--- a/packages/devtools-ui-kit/src/unocss.ts
+++ b/packages/devtools-ui-kit/src/unocss.ts
@@ -121,6 +121,9 @@ export const unocssPreset = (): Preset => ({
 
     // code
     'n-code-block': 'dark:bg-[#121212] bg-white',
+
+    // icon-button
+    'n-icon-button': 'aspect-1/1 w-1.6em h-1.6em flex items-center justify-center rounded op50 hover:op100 hover:bg-active',
   },
 })
 
diff --git a/packages/devtools/client/components/AssetDetails.vue b/packages/devtools/client/components/AssetDetails.vue
index 594b67c0ca..eb975767f9 100644
--- a/packages/devtools/client/components/AssetDetails.vue
+++ b/packages/devtools/client/components/AssetDetails.vue
@@ -78,7 +78,7 @@ const supportsPreview = computed(() => {
 <template>
   <div flex="~ col gap-4" w-full of-hidden min-h-full p4>
     <template v-if="supportsPreview">
-      <div op50 mb--2 flex="~ gap2" items-center>
+      <div flex="~ gap2" op50 items-center mb--2>
         <div x-divider />
         <div flex-none>
           Preview
@@ -113,9 +113,11 @@ const supportsPreview = computed(() => {
             <div flex="~ gap-1" items-center>
               <FilepathItem :filepath="asset.filePath" w-full line-break ws-normal text-left />
               <div flex-auto />
-              <button n-icon-btn title="Open in Editor" @click="openInEditor(asset.filePath)">
-                <div i-carbon-launch />
-              </button>
+              <NIconButton
+                title="Open in Editor"
+                icon="carbon-launch"
+                @click="openInEditor(asset.filePath)"
+              />
             </div>
           </td>
         </tr>
@@ -129,12 +131,17 @@ const supportsPreview = computed(() => {
                 {{ asset.publicPath }}
               </div>
               <div flex-auto />
-              <NuxtLink n-icon-btn :to="asset.publicPath" target="_blank" title="Open in browser">
-                <div i-carbon-launch />
-              </NuxtLink>
-              <button n-icon-btn title="Copy public path" @click="copy(asset.publicPath)">
-                <div i-carbon-copy />
-              </button>
+              <NIconButton
+                :to="asset.publicPath"
+                icon="carbon-launch"
+                target="_blank"
+                title="Open in browser"
+              />
+              <NIconButton
+                title="Copy public path"
+                icon="carbon-copy"
+                @click="copy(asset.publicPath)"
+              />
             </div>
           </td>
         </tr>
diff --git a/packages/devtools/client/components/AssetGridItem.vue b/packages/devtools/client/components/AssetGridItem.vue
index e61fc4bcb5..fa09b5462a 100644
--- a/packages/devtools/client/components/AssetGridItem.vue
+++ b/packages/devtools/client/components/AssetGridItem.vue
@@ -14,9 +14,9 @@ const path = computed(() => {
 </script>
 
 <template>
-  <button flex="~ col gap-1" hover="bg-active" rounded p2 of-hidden items-center>
+  <button flex="~ col gap-1" hover="bg-active" rounded of-hidden items-center p2>
     <AssetPreview rounded w-30 h-30 border="~ base" :asset="asset" />
-    <div of-hidden w-full text-center ws-nowrap truncate text-xs>
+    <div of-hidden w-full ws-nowrap text-center truncate text-xs>
       {{ path }}
     </div>
   </button>
diff --git a/packages/devtools/client/components/AssetPreview.vue b/packages/devtools/client/components/AssetPreview.vue
index 67380d4c93..f41e3b4473 100644
--- a/packages/devtools/client/components/AssetPreview.vue
+++ b/packages/devtools/client/components/AssetPreview.vue
@@ -8,7 +8,7 @@ defineProps<{
 </script>
 
 <template>
-  <div flex items-center of-hidden justify-center p1 bg-active object-cover>
+  <div items-center of-hidden justify-center flex p1 bg-active object-cover>
     <template v-if="asset.type === 'image'">
       <img :src="asset.publicPath">
     </template>
diff --git a/packages/devtools/client/components/Badge.vue b/packages/devtools/client/components/Badge.vue
index 0d3d6e535b..1a71a0cacc 100644
--- a/packages/devtools/client/components/Badge.vue
+++ b/packages/devtools/client/components/Badge.vue
@@ -1,5 +1,5 @@
 <template>
-  <span class="text-xs whitespace-nowrap px-1.5 py-0.5 mx-0.5 rounded">
+  <span class="text-xs rounded whitespace-nowrap px-1.5 py-0.5 mx-0.5">
     <slot />
   </span>
 </template>
diff --git a/packages/devtools/client/components/ComponentDetails.vue b/packages/devtools/client/components/ComponentDetails.vue
index 650809b3cf..0311cb5afe 100644
--- a/packages/devtools/client/components/ComponentDetails.vue
+++ b/packages/devtools/client/components/ComponentDetails.vue
@@ -19,9 +19,7 @@ const copy = useCopy()
       <div>
         <ComponentName :component="component" />
       </div>
-      <button title="Copy name" n-icon-btn @click="copy(`<${name}></${name}>`)">
-        <div i-carbon-copy />
-      </button>
+      <NIconButton title="Copy name" icon="carbon-copy" @click="copy(`<${name}></${name}>`)" />
       <Badge
         v-if="component.global"
         bg-green-400:10 text-green-400
diff --git a/packages/devtools/client/components/ComponentItem.vue b/packages/devtools/client/components/ComponentItem.vue
index f453d6ee2b..6e55481553 100644
--- a/packages/devtools/client/components/ComponentItem.vue
+++ b/packages/devtools/client/components/ComponentItem.vue
@@ -11,13 +11,11 @@ const filePath = computed(() => props.component.filePath || props.component.file
 
 <template>
   <div
-    rounded
-    px2
-    py1
+
     hover="bg-active"
     class="group"
     flex="~ gap2"
-    w-full items-center
+    rounded w-full items-center px2 py1
   >
     <VDropdown>
       <button hover:text-primary>
diff --git a/packages/devtools/client/components/DockingPanel.vue b/packages/devtools/client/components/DockingPanel.vue
index e4d9388a3a..144cfab4ba 100644
--- a/packages/devtools/client/components/DockingPanel.vue
+++ b/packages/devtools/client/components/DockingPanel.vue
@@ -19,7 +19,7 @@ function refreshPage() {
 
 <template>
   <div>
-    <div v-if="client" px3 py2 border="b base" flex="~ col gap-1">
+    <div v-if="client" py2 px3 border="b base" flex="~ col gap-1">
       <div text-sm op50>
         Dock devtools to
       </div>
diff --git a/packages/devtools/client/components/DrawerRight.vue b/packages/devtools/client/components/DrawerRight.vue
index 24c1a91b4e..f2e13ebe04 100644
--- a/packages/devtools/client/components/DrawerRight.vue
+++ b/packages/devtools/client/components/DrawerRight.vue
@@ -41,13 +41,11 @@ export default {
       ref="el"
       border="l base"
       flex="~ col gap-1"
-      of-auto right-0 text-sm absolute bottom-0 glass-effect z-10 z-20
+      text-sm absolute of-auto right-0 bottom-0 glass-effect z-10 z-20
       :style="{ top: `${top}px` }"
       v-bind="$attrs"
     >
-      <button absolute z-20 n-icon-btn text-xl right-2 top-2 @click="$emit('close')">
-        <div i-carbon-close />
-      </button>
+      <NIconButton absolute z-20 text-xl right-2 top-2 icon="carbon-close" @click="$emit('close')" />
       <div w-full of-auto h-full relative>
         <slot />
       </div>
diff --git a/packages/devtools/client/components/HooksTable.vue b/packages/devtools/client/components/HooksTable.vue
index c6a19cc4a1..68013fd7a5 100644
--- a/packages/devtools/client/components/HooksTable.vue
+++ b/packages/devtools/client/components/HooksTable.vue
@@ -84,7 +84,7 @@ function toggleSortedBy(by: SortBy) {
   <table w-full>
     <thead border="b base">
       <tr>
-        <th p1 ws-nowrap select-none text-right font-bold>
+        <th p1 ws-nowrap text-right select-none font-bold>
           <button @click="toggleSortedBy('start')">
             Order
             <div text-xs ml--1 :class="[sortby === 'start' ? 'op50' : 'op0', direction === 'asc' ? 'carbon-arrow-down' : 'carbon-arrow-up']" />
diff --git a/packages/devtools/client/components/ModuleItem.vue b/packages/devtools/client/components/ModuleItem.vue
index 60783713aa..92986d420f 100644
--- a/packages/devtools/client/components/ModuleItem.vue
+++ b/packages/devtools/client/components/ModuleItem.vue
@@ -96,7 +96,7 @@ const npmBase = 'https://www.npmjs.com/package/'
       <div
         v-if="data.icon || isPackageModule"
 
-        p4 rounded flex-none h-20 w-20 bg-gray:3 flex
+        p4 rounded flex-none flex h-20 w-20 bg-gray:3
       >
         <img v-if="data.icon" :src="iconBase + data.icon" :alt="name" ma>
         <div op50 ma i-carbon-circle-dash text-4xl />
diff --git a/packages/devtools/client/components/ModuleTreeNode.vue b/packages/devtools/client/components/ModuleTreeNode.vue
index 456796a978..6094bda117 100644
--- a/packages/devtools/client/components/ModuleTreeNode.vue
+++ b/packages/devtools/client/components/ModuleTreeNode.vue
@@ -15,7 +15,7 @@ const route = useRoute()
   <details open>
     <summary
 
-      select-none text-sm cursor-default truncate
+      select-none text-sm truncate cursor-default
       p="y1"
       flex="~ gap2"
     >
diff --git a/packages/devtools/client/components/SideNav.vue b/packages/devtools/client/components/SideNav.vue
index 5a5d3cb481..498dc13093 100644
--- a/packages/devtools/client/components/SideNav.vue
+++ b/packages/devtools/client/components/SideNav.vue
@@ -5,7 +5,7 @@ const tabs = useTabs()
 
 <template>
   <div border="r base" flex="~ col gap-0.5" h-full items-center z-100 bg-base>
-    <div flex="~ col" items-center bg-base top-0 sticky z-1 pt3 mb1>
+    <div flex="~ col" items-center bg-base top-0 pt3 sticky z-1 mb1>
       <VDropdown placement="left-start" :distance="20">
         <button
 
diff --git a/packages/devtools/client/components/SideNavItem.vue b/packages/devtools/client/components/SideNavItem.vue
index c3ef11e0fe..977b4ddd04 100644
--- a/packages/devtools/client/components/SideNavItem.vue
+++ b/packages/devtools/client/components/SideNavItem.vue
@@ -20,7 +20,7 @@ const isEnabled = computed(() => {
       :to="'path' in tab ? tab.path : `/modules/custom-${tab.name}`"
       flex="~"
       hover="bg-active"
-      items-center justify-center p1 w-10 text-secondary select-none rounded-xl h-10
+      items-center justify-center p1 select-none w-10 text-secondary rounded-xl h-10
       exact-active-class="!text-primary bg-active"
     >
       <TabIcon
diff --git a/packages/devtools/client/components/StateEditor.vue b/packages/devtools/client/components/StateEditor.vue
index f2dde00d34..3d47f6374f 100644
--- a/packages/devtools/client/components/StateEditor.vue
+++ b/packages/devtools/client/components/StateEditor.vue
@@ -49,8 +49,8 @@ async function refresh() {
 <template>
   <div class="state-editor-details" :open="!name ? true : isOpen">
     <div
-      select-none px4
-      flex="~ gap2" items-center
+
+      flex="~ gap2" select-none items-center px4
     >
       <button
         v-if="name" flex="~"
@@ -65,9 +65,7 @@ async function refresh() {
         >{{ name }}</code>
       </button>
       <template v-if="isOpen">
-        <button title="Refresh" n-icon-btn @click="refresh">
-          <div i-carbon-renew />
-        </button>
+        <NIconButton title="Refresh" icon="carbon-renew " @click="refresh" />
       </template>
     </div>
     <template v-if="isOpen || !name">
diff --git a/packages/devtools/client/components/TerminalView.vue b/packages/devtools/client/components/TerminalView.vue
new file mode 100644
index 0000000000..deda969306
--- /dev/null
+++ b/packages/devtools/client/components/TerminalView.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { Terminal } from 'xterm'
+import { FitAddon } from 'xterm-addon-fit'
+import 'xterm/css/xterm.css'
+import type { TerminalInfo } from '../../src/types'
+
+const props = defineProps<{
+  id: string
+}>()
+
+const container = ref<HTMLElement>()
+const nuxt = useNuxtApp()
+const info = ref<TerminalInfo>()
+let term: Terminal
+
+onMounted(async () => {
+  term = new Terminal({
+    convertEol: true,
+    cols: 80,
+    screenReaderMode: true,
+  })
+  const fitAddon = new FitAddon()
+  term.loadAddon(fitAddon)
+  term.open(container.value!)
+  fitAddon.fit()
+
+  useEventListener(window, 'resize', () => {
+    fitAddon.fit()
+  })
+
+  info.value = await rpc.getTerminalDetail(props.id)
+  if (info.value?.buffer)
+    term.write(info.value.buffer)
+
+  // @ts-expect-error missing hooks type
+  nuxt.hook('devtools:terminal:data', (id: string, data: string) => {
+    if (id === props.id)
+      term.write(data)
+  })
+})
+
+function clear() {
+  rpc.runTerminalAction(props.id, 'clear')
+  term?.clear()
+}
+</script>
+
+<template>
+  <div border="b base" p2 flex="~ gap-2">
+    <span>{{ info?.description }}</span>
+    <span class="flex-auto" />
+    <NIconButton title="Clear" icon="i-carbon-clean" @click="clear()" />
+    <NIconButton v-if="info?.restartable" title="Refresh" icon="carbon-renew" @click="rpc.runTerminalAction(id, 'restart')" />
+    <NIconButton v-if="info?.terminatable" title="Terminate" icon="carbon-delete" @click="rpc.runTerminalAction(id, 'terminate')" />
+  </div>
+  <div ref="container" h-full w-full of-auto bg-black />
+</template>
diff --git a/packages/devtools/client/composables/state.ts b/packages/devtools/client/composables/state.ts
index 245fd65a85..bf867c79d5 100644
--- a/packages/devtools/client/composables/state.ts
+++ b/packages/devtools/client/composables/state.ts
@@ -28,13 +28,13 @@ export function useComponents() {
       .filter(i => !/^Lazy[A-Z]/.test(i.pascalName))
       // dedupe server components
       .filter(i => !(serverComponents.value || [])
-        .find(s => s.pascalName === i.pascalName)),
+        .find((s: any) => s.pascalName === i.pascalName)),
   )
 
   return computed(() => [
     ...globalComponents.value,
     ...serverComponents.value || [],
-  ].sort((a, b) => a.pascalName.localeCompare(b.pascalName)))
+  ].sort((a: any, b: any) => a.pascalName.localeCompare(b.pascalName)))
 }
 
 export function getPackageVersions() {
@@ -75,6 +75,10 @@ export function useCustomTabs() {
   return useAsyncState('getCustomTabs', () => rpc.getCustomTabs())
 }
 
+export function useTerminals() {
+  return useAsyncState('getTerminals', () => rpc.getTerminals())
+}
+
 export function useTabs() {
   const router = useRouter()
   const customTabs = useCustomTabs()
diff --git a/packages/devtools/client/layouts/default.vue b/packages/devtools/client/layouts/default.vue
index 252af22df0..1abd0961f0 100644
--- a/packages/devtools/client/layouts/default.vue
+++ b/packages/devtools/client/layouts/default.vue
@@ -8,7 +8,7 @@ const waiting = computed(() => !client.value && !showConnectionWarning.value)
     <Notification />
     <div v-if="waiting" h-full w-full flex>
       <div flex="~ col" text-lg items-center ma animate-pulse>
-        <div op50 i-carbon-circle-dash animate-spin text-4xl />
+        <div op50 i-carbon-circle-dash text-4xl animate-spin />
         Connecting...
       </div>
     </div>
diff --git a/packages/devtools/client/pages/modules/assets.vue b/packages/devtools/client/pages/modules/assets.vue
index 75464f0e19..7327363a07 100644
--- a/packages/devtools/client/pages/modules/assets.vue
+++ b/packages/devtools/client/pages/modules/assets.vue
@@ -52,7 +52,7 @@ const navbar = ref<HTMLElement>()
 
 <template>
   <div h-full of-auto>
-    <div ref="navbar" flex="~ col gap-2" border="b base" p4 pb2 navbar-glass flex-1>
+    <div ref="navbar" flex="~ col gap-2" border="b base" p4 navbar-glass flex-1 pb2>
       <div flex="~ gap4">
         <NTextInput
           v-model="search"
diff --git a/packages/devtools/client/pages/modules/imports.vue b/packages/devtools/client/pages/modules/imports.vue
index 8eff3ec8da..ff27be7754 100644
--- a/packages/devtools/client/pages/modules/imports.vue
+++ b/packages/devtools/client/pages/modules/imports.vue
@@ -72,7 +72,7 @@ const filtered = computed(() => {
 
 <template>
   <div v-if="config" h-full of-auto>
-    <div flex="~ col gap4" border="b base" px4 flex-1 navbar-glass pt4 pb2>
+    <div flex="~ col gap4" border="b base" px4 flex-1 navbar-glass pb2 pt4>
       <NTextInput
         v-model="search"
         placeholder="Search..."
diff --git a/packages/devtools/client/pages/modules/storage.vue b/packages/devtools/client/pages/modules/storage.vue
index 3d129d83bc..2ad4f36035 100644
--- a/packages/devtools/client/pages/modules/storage.vue
+++ b/packages/devtools/client/pages/modules/storage.vue
@@ -121,9 +121,7 @@ async function renameCurrentItem() {
   <PanelLeftRight v-if="currentStorage" storage-key="tab-storage">
     <template #left>
       <div class="items-center flex justify-between px-3 h-[48px] gap1">
-        <button n-icon-btn ml--1 @click="currentStorage = ''">
-          <div i-carbon-chevron-left />
-        </button>
+        <NIconButton icon="carbon-chevron-left" ml--1 @click="currentStorage = ''" />
         <div class="w-full text-sm">
           <NSelect v-model="currentStorage" n="primary" icon="carbon-data-base">
             <option v-for="(_storage, name) of storageMounts" :key="name" :value="name">
@@ -163,10 +161,10 @@ async function renameCurrentItem() {
 
     <template #right>
       <div v-if="currentItem?.key" h-full of-hidden flex="~ col">
-        <div border="b base" class="text-sm flex items-center justify-between px-4 flex-none h-[49px]">
+        <div border="b base" class="text-sm flex items-center justify-between flex-none px-4 h-[49px]">
           <div class="flex items-center gap-4">
             <NTextInput v-if="currentItem.editingKey" v-model="currentItem.updatedKey" @keyup.enter="renameCurrentItem" />
-            <code v-else>{{ keyName(currentItem.key) }} <NIcon icon="carbon-edit" class="op50 hover:op100 cursor-pointer" @click="currentItem.editingKey = true" /></code>
+            <code v-else>{{ keyName(currentItem.key) }} <NIcon icon="carbon-edit" class="op50 cursor-pointer hover:op100" @click="currentItem.editingKey = true" /></code>
             <NButton v-if="!currentItem.editingKey" n="green xs" :disabled="currentItem.content === currentItem.updatedContent" :class="{ 'border-green': currentItem.content !== currentItem.updatedContent }" @click="saveCurrentItem">
               Save
             </NButton>
diff --git a/packages/devtools/client/pages/modules/terminals.vue b/packages/devtools/client/pages/modules/terminals.vue
new file mode 100644
index 0000000000..095c8acb29
--- /dev/null
+++ b/packages/devtools/client/pages/modules/terminals.vue
@@ -0,0 +1,59 @@
+<script setup lang="ts">
+definePageMeta({
+  icon: 'carbon-terminal',
+  title: 'Terminals',
+})
+
+const terminals = useTerminals()
+const route = useRoute()
+const router = useRouter()
+
+const selected = computed(() => {
+  const id = route.query.id as string
+  return terminals.value?.find(t => t.id === id)
+})
+
+watchEffect(() => {
+  if (!route.query.id && terminals.value?.length)
+    router.replace(`/modules/terminals?id=${encodeURIComponent(terminals.value[0].id)}`)
+})
+</script>
+
+<template>
+  <div v-if="terminals?.length" h-full w-full of-hidden grid="~ rows-[max-content_max-content_1fr]">
+    <!-- TODO: Refactor to have general component -->
+    <div ref="navbar" flex="~" border="b base" navbar-glass flex-1 items-center>
+      <NuxtLink
+        v-for="t of terminals"
+        :key="t.id" border="r base"
+        flex="~ gap-2" items-center px3 py2
+        :class="t.id === selected?.id ? 'bg-active' : ''"
+        :to="`/modules/terminals?id=${encodeURIComponent(t.id)}` "
+      >
+        <NIcon v-if="t.icon " :icon="t.icon" />
+        <span :class="t.id === selected?.id ? '' : 'op50'">
+          {{ t.name }}
+        </span>
+      </NuxtLink>
+    </div>
+
+    <template v-if="selected">
+      <TerminalView :id="selected.id" :key="selected.id" />
+    </template>
+    <template v-else>
+      <div>
+        Terminal not found
+      </div>
+    </template>
+  </div>
+  <div v-else h-full items-center flex justify-center>
+    <em op50>No terminal attached</em>
+  </div>
+</template>
+
+<style>
+.xterm {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+</style>
diff --git a/packages/devtools/client/setup/client-rpc.ts b/packages/devtools/client/setup/client-rpc.ts
index 31cb582520..3d34658bdf 100644
--- a/packages/devtools/client/setup/client-rpc.ts
+++ b/packages/devtools/client/setup/client-rpc.ts
@@ -1,7 +1,9 @@
 import type { ClientFunctions } from '../../src/types'
+import type {} from '../../src/types/hooks'
 
 export function setupClientRPC() {
   const nuxt = useNuxtApp()
+  const router = useRouter()
 
   Object.assign(clientFunctions, {
     async refresh(type) {
@@ -11,5 +13,12 @@ export function setupClientRPC() {
     async callHook(hook: string, ...args: any[]) {
       nuxt.hooks.callHookParallel(hook as any, ...args)
     },
+    async onTerminalData(id: string, data: string) {
+      // @ts-expect-error fail to extend hooks
+      nuxt.hooks.callHookParallel('devtools:terminal:data', { id, data })
+    },
+    async navigateTo(path: string) {
+      router.push(path)
+    },
   } satisfies ClientFunctions)
 }
diff --git a/packages/devtools/client/setup/unocss-runtime.ts b/packages/devtools/client/setup/unocss-runtime.ts
index 305bd905db..75eac9ac03 100644
--- a/packages/devtools/client/setup/unocss-runtime.ts
+++ b/packages/devtools/client/setup/unocss-runtime.ts
@@ -1,6 +1,6 @@
+// @ts-expect-error missin types
 import presetIcons from '@unocss/preset-icons/browser'
 import initUnocssRuntime from '@unocss/runtime'
-// @ts-expect-error missin types
 
 initUnocssRuntime({
   defaults: {
diff --git a/packages/devtools/client/unocss.config.ts b/packages/devtools/client/unocss.config.ts
index 14853a2648..362eba62ec 100644
--- a/packages/devtools/client/unocss.config.ts
+++ b/packages/devtools/client/unocss.config.ts
@@ -13,8 +13,6 @@ export default defineConfig({
 
       'text-secondary': 'color-black/50 dark:color-white/50',
 
-      'n-icon-btn': 'aspect-1/1 w-1.6em h-1.6em flex items-center justify-center rounded op50 hover:op100 hover:bg-active',
-
       // Reusable
       'x-divider': 'h-1px w-full bg-gray/15',
     },
diff --git a/packages/devtools/package.json b/packages/devtools/package.json
index 9a91002919..05542e6236 100644
--- a/packages/devtools/package.json
+++ b/packages/devtools/package.json
@@ -110,6 +110,8 @@
     "vue-tsc": "^1.2.0",
     "wait-on": "^7.0.1",
     "which": "^3.0.0",
-    "ws": "^8.12.1"
+    "ws": "^8.12.1",
+    "xterm": "^5.1.0",
+    "xterm-addon-fit": "^0.7.0"
   }
 }
diff --git a/packages/devtools/src/integrations/vscode.ts b/packages/devtools/src/integrations/vscode.ts
index 9fda9fea54..88420ff4f3 100644
--- a/packages/devtools/src/integrations/vscode.ts
+++ b/packages/devtools/src/integrations/vscode.ts
@@ -6,6 +6,7 @@ import which from 'which'
 import waitOn from 'wait-on'
 import { LOG_PREFIX } from '../logger'
 import type { RPCContext } from '../server-rpc/types'
+import { startSubprocess } from '../kit'
 
 export async function setup({ nuxt, options }: RPCContext) {
   const installed = !!await which('code-server').catch(() => null)
@@ -32,16 +33,22 @@ export async function setup({ nuxt, options }: RPCContext) {
 
     logger.info(LOG_PREFIX, `Starting VS Code Server at ${url} ...`)
 
-    const command = execa('code-server', [
-      'serve-local',
-      '--accept-server-license-terms',
-      '--without-connection-token',
-      `--port=${port}`,
-    ])
-
-    nuxt.hook('close', () => {
-      command.kill()
-    })
+    startSubprocess(
+      {
+        command: 'code-server',
+        args: [
+          'serve-local',
+          '--accept-server-license-terms',
+          '--without-connection-token',
+          `--port=${port}`,
+        ],
+      },
+      {
+        id: 'devtools:vscode',
+        name: 'VS Code Server',
+        icon: 'logos-visual-studio-code',
+      },
+    )
 
     await waitOn({
       resources: [url],
diff --git a/packages/devtools/src/kit/index.ts b/packages/devtools/src/kit/index.ts
index 435ab5b21f..31f285af44 100644
--- a/packages/devtools/src/kit/index.ts
+++ b/packages/devtools/src/kit/index.ts
@@ -1,6 +1,8 @@
 import { useNuxt } from '@nuxt/kit'
-import type { ModuleCustomTab } from '../types'
-import '../types/hooks'
+import type { Options as ExecaOptions } from 'execa'
+import { execa } from 'execa'
+import type { ModuleCustomTab, TerminalState } from '../types'
+import type {} from '../types/hooks'
 
 /**
  * Hooks to extend a custom tab in devtools.
@@ -21,3 +23,91 @@ export function addCustomTab(tab: ModuleCustomTab | (() => ModuleCustomTab | Pro
 export function refreshCustomTabs(nuxt = useNuxt()) {
   return nuxt.callHook('devtools:customTabs:refresh')
 }
+
+export interface SubprocessOptions extends ExecaOptions {
+  command: string
+  args?: string[]
+}
+
+/**
+ * Create a subprocess that handled by the DevTools.
+ */
+export function startSubprocess(
+  execaOptions: SubprocessOptions,
+  tabOptions: TerminalState,
+  nuxt = useNuxt(),
+) {
+  const id = tabOptions.id
+
+  function start() {
+    const process = execa(
+      execaOptions.command,
+      execaOptions.args,
+      {
+        ...execaOptions,
+        env: {
+          COLORS: 'true',
+          FORCE_COLOR: 'true',
+          ...execaOptions.env,
+        },
+      },
+    )
+
+    process.stdout!.on('data', (data) => {
+      nuxt.callHook('devtools:terminal:write', id, data)
+    })
+    process.stderr!.on('data', (data) => {
+      nuxt.callHook('devtools:terminal:write', id, data)
+    })
+    process.on('exit', (code) => {
+      nuxt.callHook('devtools:terminal:write', id, `\nprocess terminalated with ${code}\n`)
+    })
+
+    return process
+  }
+
+  register()
+  nuxt.hook('close', () => {
+    terminate()
+  })
+
+  let process = start()
+
+  function restart() {
+    process?.kill()
+
+    clear()
+    process = start()
+  }
+
+  function clear() {
+    tabOptions.buffer = ''
+    register()
+  }
+
+  function terminate() {
+    try {
+      process?.kill()
+    }
+    catch (e) {
+    }
+    nuxt.callHook('devtools:terminal:remove', id)
+  }
+
+  function register() {
+    nuxt.callHook('devtools:terminal:register', {
+      onActionRestart: restart,
+      onActionTerminate: terminate,
+      ...tabOptions,
+    })
+  }
+
+  return {
+    getProcess() {
+      return process
+    },
+    terminate,
+    restart,
+    clear,
+  }
+}
diff --git a/packages/devtools/src/server-rpc/index.ts b/packages/devtools/src/server-rpc/index.ts
index 164eee309d..e8c69bc543 100644
--- a/packages/devtools/src/server-rpc/index.ts
+++ b/packages/devtools/src/server-rpc/index.ts
@@ -14,6 +14,7 @@ import { setupCustomTabRPC } from './custom-tabs'
 import { setupGeneralRPC } from './general'
 import { setupWizardRPC } from './wizard'
 import type { RPCContext } from './types'
+import { setupTerminalRPC } from './terminal'
 
 export function setupRPC(nuxt: Nuxt, options: ModuleOptions) {
   const serverFunctions = {} as ServerFunctions
@@ -37,6 +38,7 @@ export function setupRPC(nuxt: Nuxt, options: ModuleOptions) {
     ...setupAssetsRPC(ctx),
     ...setupNpmRPC(ctx),
     ...setupWizardRPC(ctx),
+    ...setupTerminalRPC(ctx),
   } satisfies ServerFunctions)
 
   const wsClients = new Set<WebSocket>()
diff --git a/packages/devtools/src/server-rpc/terminal.ts b/packages/devtools/src/server-rpc/terminal.ts
new file mode 100644
index 0000000000..e44b9d2a33
--- /dev/null
+++ b/packages/devtools/src/server-rpc/terminal.ts
@@ -0,0 +1,82 @@
+import type { ServerFunctions, TerminalAction, TerminalInfo, TerminalState } from '../types'
+import type { RPCContext } from './types'
+import type {} from '../types/hooks'
+
+export function setupTerminalRPC({ nuxt, birpc, refresh }: RPCContext) {
+  const terminals = new Map<string, TerminalState>()
+
+  nuxt.hook('devtools:terminal:register', (terminal) => {
+    terminals.set(terminal.id, terminal)
+    refresh('getTerminals')
+    return terminal.id
+  })
+
+  nuxt.hook('devtools:terminal:remove', (id) => {
+    if (!terminals.has(id))
+      return false
+    terminals.delete(id)
+    refresh('getTerminals')
+    return true
+  })
+
+  nuxt.hook('devtools:terminal:write', (id: string, data: string) => {
+    const terminal = terminals.get(id)
+    if (!terminal)
+      return false
+
+    terminal.buffer ||= ''
+    terminal.buffer += data
+    birpc.broadcast.onTerminalData.asEvent(id, data)
+    return true
+  })
+
+  function serializeTerminal(terminal: TerminalState, buffer?: boolean): TerminalInfo
+  function serializeTerminal(terminal: TerminalState | undefined, buffer?: boolean): TerminalInfo | undefined
+  function serializeTerminal(terminal?: TerminalState, buffer = false): TerminalInfo | undefined {
+    if (!terminal)
+      return
+    return {
+      id: terminal.id,
+      name: terminal.name,
+      description: terminal.description,
+      icon: terminal.icon,
+      terminatable: !!terminal.onActionTerminate,
+      restartable: !!terminal.onActionRestart,
+      buffer: buffer
+        ? terminal.buffer
+        : undefined,
+    }
+  }
+
+  return {
+    getTerminals() {
+      return Array.from(terminals.values())
+        .map(i => serializeTerminal(i))
+    },
+    getTerminalDetail(id: string) {
+      return serializeTerminal(terminals.get(id), true)
+    },
+    async runTerminalAction(id: string, action: TerminalAction) {
+      const terminal = terminals.get(id)
+      if (!terminal)
+        return false
+
+      switch (action) {
+        case 'restart':
+          if (!terminal.onActionRestart)
+            return false
+          await terminal.onActionRestart()
+          return true
+        case 'terminate':
+          if (!terminal.onActionTerminate)
+            return false
+          await terminal.onActionTerminate()
+          return true
+        case 'clear':
+          terminal.buffer = ''
+          refresh('getTerminals')
+          return true
+      }
+    },
+  } satisfies Partial<ServerFunctions>
+}
diff --git a/packages/devtools/src/types/hooks.ts b/packages/devtools/src/types/hooks.ts
index 81f91217d5..f955ec4674 100644
--- a/packages/devtools/src/types/hooks.ts
+++ b/packages/devtools/src/types/hooks.ts
@@ -1,4 +1,5 @@
 import type { ModuleCustomTab } from './custom-tabs'
+import type { TerminalState } from './integrations'
 
 declare module '@nuxt/schema' {
   interface NuxtHooks {
@@ -21,6 +22,37 @@ declare module '@nuxt/schema' {
      * Retrigger update for custom tabs, `devtools:customTabs` will be called again.
      */
     'devtools:customTabs:refresh': () => void
+
+    /**
+     * Register a terminal.
+     */
+    'devtools:terminal:register': (terminal: TerminalState) => void
+
+    /**
+     * Write to a terminal.
+     *
+     * Returns true if terminal is found.
+     */
+    'devtools:terminal:write': (id: string, content: string) => void
+
+    /**
+     * Remove a terminal from devtools.
+     *
+     * Returns true if terminal is found and deleted.
+     */
+    'devtools:terminal:remove': (id: string) => void
+  }
+}
+
+declare module '@nuxt/schema' {
+  /**
+   * Runtime Hooks
+   */
+  interface RuntimeNuxtHooks {
+    /**
+     * On terminal data.
+     */
+    'devtools:terminal:data': (id: string, data: string) => void
   }
 }
 
diff --git a/packages/devtools/src/types/integrations.ts b/packages/devtools/src/types/integrations.ts
index 40b0fd05ba..e30f3d73bf 100644
--- a/packages/devtools/src/types/integrations.ts
+++ b/packages/devtools/src/types/integrations.ts
@@ -105,3 +105,35 @@ export interface CodeSnippet {
   name: string
   docs?: string
 }
+
+export interface TerminalBase {
+  id: string
+  name: string
+  description?: string
+  icon?: string
+}
+
+export type TerminalAction = 'restart' | 'terminate' | 'clear'
+
+export interface TerminalInfo extends TerminalBase {
+  restartable?: boolean
+  terminatable?: boolean
+  buffer?: string
+}
+
+export interface TerminalState extends TerminalBase {
+  /**
+   * User action to restart the terminal, when not provided, this action will be disabled
+   */
+  onActionRestart?: () => Promise<void> | void
+
+  /**
+   * User action to terminate the terminal, when not provided, this action will be disabled
+   */
+  onActionTerminate?: () => Promise<void> | void
+
+  /**
+   * Content buffer
+   */
+  buffer?: string
+}
diff --git a/packages/devtools/src/types/rpc.ts b/packages/devtools/src/types/rpc.ts
index b379c1c1cd..e3fe8c910c 100644
--- a/packages/devtools/src/types/rpc.ts
+++ b/packages/devtools/src/types/rpc.ts
@@ -4,7 +4,7 @@ import type { StorageValue } from 'unstorage'
 import type { Component } from 'vue'
 import type { WizardActions, WizardArgs } from '../wizard'
 import type { ModuleCustomTab } from './custom-tabs'
-import type { AssetInfo, AutoImportsWithMetadata, HookInfo, ImageMeta, UpdateInfo } from './integrations'
+import type { AssetInfo, AutoImportsWithMetadata, HookInfo, ImageMeta, TerminalAction, TerminalInfo, UpdateInfo } from './integrations'
 import type { ComponentRelationship } from './module'
 
 export interface ServerFunctions {
@@ -20,6 +20,11 @@ export interface ServerFunctions {
   getStaticAssets(): Promise<AssetInfo[]>
   getPackageVersions(): UpdateInfo[]
 
+  // Terminal
+  getTerminals(): TerminalInfo[]
+  getTerminalDetail(id: string): TerminalInfo | undefined
+  runTerminalAction(id: string, action: TerminalAction): Promise<boolean>
+
   // Storage
   getStorageMounts(): Promise<StorageMounts>
   getStorageKeys(base?: string): Promise<string[]>
@@ -40,6 +45,9 @@ export interface ServerFunctions {
 export interface ClientFunctions {
   refresh(event: ClientUpdateEvent): void
   callHook(hook: string, ...args: any[]): Promise<void>
+  navigateTo(path: string): void
+
+  onTerminalData(id: string, data: string): void
 }
 
 export type ClientUpdateEvent = keyof ServerFunctions
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 93fe326534..33ae9911d7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -128,6 +128,8 @@ importers:
       wait-on: ^7.0.1
       which: ^3.0.0
       ws: ^8.12.1
+      xterm: ^5.1.0
+      xterm-addon-fit: ^0.7.0
     dependencies:
       '@antfu/install-pkg': 0.1.1
       '@nuxt/kit': 3.2.3
@@ -190,6 +192,8 @@ importers:
       wait-on: 7.0.1
       which: 3.0.0
       ws: 8.12.1
+      xterm: 5.1.0
+      xterm-addon-fit: 0.7.0_xterm@5.1.0
 
   packages/devtools-ui-kit:
     specifiers:
@@ -12427,6 +12431,18 @@ packages:
     engines: {node: '>=0.4'}
     dev: true
 
+  /xterm-addon-fit/0.7.0_xterm@5.1.0:
+    resolution: {integrity: sha512-tQgHGoHqRTgeROPnvmtEJywLKoC/V9eNs4bLLz7iyJr1aW/QFzRwfd3MGiJ6odJd9xEfxcW36/xRU47JkD5NKQ==}
+    peerDependencies:
+      xterm: ^5.0.0
+    dependencies:
+      xterm: 5.1.0
+    dev: true
+
+  /xterm/5.1.0:
+    resolution: {integrity: sha512-LovENH4WDzpwynj+OTkLyZgJPeDom9Gra4DMlGAgz6pZhIDCQ+YuO7yfwanY+gVbn/mmZIStNOnVRU/ikQuAEQ==}
+    dev: true
+
   /xxhashjs/0.2.2:
     resolution: {integrity: sha512-AkTuIuVTET12tpsVIQo+ZU6f/qDmKuRUcjaqR+OIvm+aCBsZ95i7UVY5WJ9TMsSaZ0DA2WxoZ4acu0sPH+OKAw==}
     dependencies: