diff --git a/apps/stage-tamagotchi-tauri/locales/en.yml b/apps/stage-tamagotchi-tauri/locales/en.yml
index 31e3de21d..c1620893b 100644
--- a/apps/stage-tamagotchi-tauri/locales/en.yml
+++ b/apps/stage-tamagotchi-tauri/locales/en.yml
@@ -67,6 +67,8 @@ settings:
     models:
       description: Live2D, VRM, etc.
       title: Models
+    memory:
+      description: Where memories got stored, and organized
     modules:
       consciousness:
         description: Personality, desired model, etc.
@@ -177,6 +179,9 @@ settings:
             title: Voice Settings
       description: LLMs, speech providers, etc.
       provider:
+        anthropic:
+          description: anthropic.com
+          title: Anthropic | Claude
         cloudflare-workers-ai:
           description: cloudflare.com
           fields:
@@ -248,11 +253,13 @@ settings:
           description: fireworks.ai
           title: Fireworks.ai
         microsoft-speech:
+          description: speech.microsoft.com
           fields:
             field:
               region:
                 description: Speech Service region
                 label: Region
+          title: Microsoft / Azure Speech
         mistral:
           description: mistral.ai
           title: Mistral
@@ -271,6 +278,9 @@ settings:
         openrouter:
           description: openrouter.ai
           title: OpenRouter
+        perplexity:
+          description: perplexity.ai
+          title: Perplexity
         together:
           description: together.ai
           title: Together.ai
@@ -316,30 +326,11 @@ settings:
                 title: Nordic Colors
             title: Theme Presets
       title: Themes
-    shortcuts:
-      title: Shortcuts
-      description: Configure the shortcuts for the stage
-      sections:
-        section:
-          window-controls:
-            title: Window Controls
-            press-keys-hint:
-              label: Press Keys...Or Escape to cancel
-            fields:
-              field:
-                toggle-resize:
-                  label: Toggle Resize
-                toggle-move:
-                  label: Toggle Move
-                toggle-ignore-mouse-event: # TODO: Add this feature
-                  label: Toggle Ignore Mouse Event
-
   sections:
     section:
       general:
         title: General
-  dark-mode: Dark mode
-  stage-transitions: Stage Transitions
+  theme: Theme
   title: Settings
   voices: Voice
 stage:
diff --git a/apps/stage-tamagotchi-tauri/locales/zh-CN.yml b/apps/stage-tamagotchi-tauri/locales/zh-CN.yml
index 9aeed2a81..92ac99391 100644
--- a/apps/stage-tamagotchi-tauri/locales/zh-CN.yml
+++ b/apps/stage-tamagotchi-tauri/locales/zh-CN.yml
@@ -50,6 +50,9 @@ settings:
   microphone: 麦克风
   models: 模型
   pages:
+    memory:
+      description: 存放记忆的地方，以及策略
+      title: 记忆体
     models:
       description: 切换角色的 Live2D，VRM 模型
       title: 角色模型
@@ -165,6 +168,9 @@ settings:
             title: 声音配置
       description: LLM，语音合成，语音识别提供商等
       provider:
+        anthropic:
+          description: anthropic.com
+          title: Anthropic | Claude
         cloudflare-workers-ai:
           description: Cloudflare.com
           fields:
@@ -234,11 +240,13 @@ settings:
           description: Fireworks.ai
           title: Fireworks.ai
         microsoft-speech:
+          description: speech.microsoft.com
           fields:
             field:
               region:
                 description: 服务 Endpoint 地区（比如亚太 eastasia 区域）
                 label: Endpoint 地区
+          title: Microsoft / Azure 语音服务
         mistral:
           description: mistral.ai
           title: Mistral
@@ -257,6 +265,9 @@ settings:
         openrouter:
           description: OpenRouter.ai
           title: OpenRouter
+        perplexity:
+          description: perplexity.ai
+          title: Perplexity
         together:
           description: 一起
           title: Together.ai
@@ -295,29 +306,11 @@ settings:
                 title: 北欧颜色
             title: 主题预设
       title: 舞台主题
-    shortcuts:
-      title: 快捷键
-      description: 配置舞台快捷键
-      sections:
-        section:
-          window-controls:
-            title: 窗口控制
-            press-keys-hint:
-              label: 按下快捷键...或按下 Esc 取消
-            fields:
-              field:
-                toggle-resize:
-                  label: 切换大小
-                toggle-move:
-                  label: 切换移动
-                toggle-ignore-mouse-event: # TODO: Add this feature
-                  label: 切换鼠标穿透
   sections:
     section:
       general:
         title: 通用
-  dark-mode: 暗黑模式
-  stage-transitions: 动画效果
+  theme: 主题颜色
   title: 设置
   voices: 声线
 stage:
diff --git a/apps/stage-tamagotchi-tauri/src/pages/settings/providers/anthropic.vue b/apps/stage-tamagotchi-tauri/src/pages/settings/providers/anthropic.vue
new file mode 100644
index 000000000..09829e8e2
--- /dev/null
+++ b/apps/stage-tamagotchi-tauri/src/pages/settings/providers/anthropic.vue
@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import type { RemovableRef } from '@vueuse/core'
+
+import {
+  ProviderAdvancedSettings,
+  ProviderApiKeyInput,
+  ProviderBaseUrlInput,
+  ProviderBasicSettings,
+  ProviderSettingsContainer,
+  ProviderSettingsLayout,
+} from '@proj-airi/stage-ui/components'
+import { useProvidersStore } from '@proj-airi/stage-ui/stores'
+import { storeToRefs } from 'pinia'
+import { computed, onMounted, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
+
+const { t } = useI18n()
+const router = useRouter()
+const providersStore = useProvidersStore()
+const { providers } = storeToRefs(providersStore) as { providers: RemovableRef<Record<string, any>> }
+
+// Get provider metadata
+const providerId = 'anthropic'
+const providerMetadata = computed(() => providersStore.getProviderMetadata(providerId))
+
+// Use computed properties for settings
+const apiKey = computed({
+  get: () => providers.value[providerId]?.apiKey || '',
+  set: (value) => {
+    if (!providers.value[providerId])
+      providers.value[providerId] = {}
+
+    providers.value[providerId].apiKey = value
+  },
+})
+
+const baseUrl = computed({
+  get: () => providers.value[providerId]?.baseUrl || 'https://api.anthropic.com/v1/',
+  set: (value) => {
+    if (!providers.value[providerId])
+      providers.value[providerId] = {}
+
+    providers.value[providerId].baseUrl = value
+  },
+})
+
+onMounted(() => {
+  // Initialize provider if it doesn't exist
+  if (!providers.value[providerId]) {
+    providers.value[providerId] = {
+      baseUrl: 'https://api.anthropic.com/v1/',
+    }
+  }
+
+  // Initialize refs with current values
+  apiKey.value = providers.value[providerId]?.apiKey || ''
+  baseUrl.value = providers.value[providerId]?.baseUrl || 'https://api.anthropic.com/v1/'
+})
+
+// Watch settings and update the provider configuration
+watch([apiKey, baseUrl], () => {
+  providers.value[providerId] = {
+    ...providers.value[providerId],
+    apiKey: apiKey.value,
+    baseUrl: baseUrl.value || 'https://api.anthropic.com/v1/',
+  }
+})
+
+function handleResetSettings() {
+  providers.value[providerId] = {
+    baseUrl: 'https://api.anthropic.com/v1/',
+  }
+}
+</script>
+
+<template>
+  <ProviderSettingsLayout
+    :provider-name="providerMetadata?.localizedName || 'Anthropic | Claude'"
+    :provider-icon="providerMetadata?.icon"
+    :on-back="() => router.back()"
+  >
+    <div bg="orange-50 dark:orange-900/20" rounded-xl p-4 flex="~ col gap-3">
+      <h2 text-xl font-bold text="orange-700 dark:orange-500">
+        Before you start
+      </h2>
+      <p>
+        While Anthropic recently did announce that they are having a beta support for
+        OpenAI SDK compatibility <a underline href="https://docs.anthropic.com/en/api/openai-sdk">(you can read more here)</a>,
+        but due to the implementation details comes with <a underline href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CORS">CORS</a>
+        restrictions which not aligned with the OpenAI SDK, it's currently not possible to use this provider in the browser.
+      </p>
+      <p>
+        If you do need to use this provider, you will need a dedicated proxy backend like a Serverless Function running on
+        <a underline href="https://workers.cloudflare.com/">Cloudflare Workers</a> or some CORS bypassing services to bypass the CORS restrictions.
+      </p>
+    </div>
+    <ProviderSettingsContainer>
+      <ProviderBasicSettings
+        :title="t('settings.pages.providers.common.section.basic.title')"
+        :description="t('settings.pages.providers.common.section.basic.description')"
+        :on-reset="handleResetSettings"
+      >
+        <ProviderApiKeyInput
+          v-model="apiKey"
+          :provider-name="providerMetadata?.localizedName || 'Anthropic'"
+          placeholder="sk-..."
+        />
+      </ProviderBasicSettings>
+
+      <ProviderAdvancedSettings :title="t('settings.pages.providers.common.section.advanced.title')">
+        <ProviderBaseUrlInput
+          v-model="baseUrl"
+          placeholder="https://api.anthropic.com/v1/"
+        />
+      </ProviderAdvancedSettings>
+    </ProviderSettingsContainer>
+  </ProviderSettingsLayout>
+</template>
diff --git a/apps/stage-tamagotchi-tauri/uno.config.ts b/apps/stage-tamagotchi-tauri/uno.config.ts
index ee1ce45db..e39f4206e 100644
--- a/apps/stage-tamagotchi-tauri/uno.config.ts
+++ b/apps/stage-tamagotchi-tauri/uno.config.ts
@@ -80,6 +80,7 @@ export default defineConfig({
         /\.(vue|svelte|[jt]sx|mdx?|astro|elm|php|phtml|html)($|\?)/,
         // include js/ts files
         '(components|src)/**/*.{js,ts}',
+        '**/stage-ui/**/*.{js,ts}',
       ],
     },
   },
diff --git a/apps/stage-tamagotchi/src/renderer/locales/en.yml b/apps/stage-tamagotchi/src/renderer/locales/en.yml
index 53474f506..c1620893b 100644
--- a/apps/stage-tamagotchi/src/renderer/locales/en.yml
+++ b/apps/stage-tamagotchi/src/renderer/locales/en.yml
@@ -179,6 +179,9 @@ settings:
             title: Voice Settings
       description: LLMs, speech providers, etc.
       provider:
+        anthropic:
+          description: anthropic.com
+          title: Anthropic | Claude
         cloudflare-workers-ai:
           description: cloudflare.com
           fields:
@@ -250,11 +253,13 @@ settings:
           description: fireworks.ai
           title: Fireworks.ai
         microsoft-speech:
+          description: speech.microsoft.com
           fields:
             field:
               region:
                 description: Speech Service region
                 label: Region
+          title: Microsoft / Azure Speech
         mistral:
           description: mistral.ai
           title: Mistral
@@ -273,6 +278,9 @@ settings:
         openrouter:
           description: openrouter.ai
           title: OpenRouter
+        perplexity:
+          description: perplexity.ai
+          title: Perplexity
         together:
           description: together.ai
           title: Together.ai
diff --git a/apps/stage-tamagotchi/src/renderer/locales/zh-CN.yml b/apps/stage-tamagotchi/src/renderer/locales/zh-CN.yml
index ca9b1e5ba..92ac99391 100644
--- a/apps/stage-tamagotchi/src/renderer/locales/zh-CN.yml
+++ b/apps/stage-tamagotchi/src/renderer/locales/zh-CN.yml
@@ -168,6 +168,9 @@ settings:
             title: 声音配置
       description: LLM，语音合成，语音识别提供商等
       provider:
+        anthropic:
+          description: anthropic.com
+          title: Anthropic | Claude
         cloudflare-workers-ai:
           description: Cloudflare.com
           fields:
@@ -237,11 +240,13 @@ settings:
           description: Fireworks.ai
           title: Fireworks.ai
         microsoft-speech:
+          description: speech.microsoft.com
           fields:
             field:
               region:
                 description: 服务 Endpoint 地区（比如亚太 eastasia 区域）
                 label: Endpoint 地区
+          title: Microsoft / Azure 语音服务
         mistral:
           description: mistral.ai
           title: Mistral
@@ -260,6 +265,9 @@ settings:
         openrouter:
           description: OpenRouter.ai
           title: OpenRouter
+        perplexity:
+          description: perplexity.ai
+          title: Perplexity
         together:
           description: 一起
           title: Together.ai
diff --git a/apps/stage-tamagotchi/src/renderer/src/pages/settings/providers/anthropic.vue b/apps/stage-tamagotchi/src/renderer/src/pages/settings/providers/anthropic.vue
new file mode 100644
index 000000000..09829e8e2
--- /dev/null
+++ b/apps/stage-tamagotchi/src/renderer/src/pages/settings/providers/anthropic.vue
@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import type { RemovableRef } from '@vueuse/core'
+
+import {
+  ProviderAdvancedSettings,
+  ProviderApiKeyInput,
+  ProviderBaseUrlInput,
+  ProviderBasicSettings,
+  ProviderSettingsContainer,
+  ProviderSettingsLayout,
+} from '@proj-airi/stage-ui/components'
+import { useProvidersStore } from '@proj-airi/stage-ui/stores'
+import { storeToRefs } from 'pinia'
+import { computed, onMounted, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
+
+const { t } = useI18n()
+const router = useRouter()
+const providersStore = useProvidersStore()
+const { providers } = storeToRefs(providersStore) as { providers: RemovableRef<Record<string, any>> }
+
+// Get provider metadata
+const providerId = 'anthropic'
+const providerMetadata = computed(() => providersStore.getProviderMetadata(providerId))
+
+// Use computed properties for settings
+const apiKey = computed({
+  get: () => providers.value[providerId]?.apiKey || '',
+  set: (value) => {
+    if (!providers.value[providerId])
+      providers.value[providerId] = {}
+
+    providers.value[providerId].apiKey = value
+  },
+})
+
+const baseUrl = computed({
+  get: () => providers.value[providerId]?.baseUrl || 'https://api.anthropic.com/v1/',
+  set: (value) => {
+    if (!providers.value[providerId])
+      providers.value[providerId] = {}
+
+    providers.value[providerId].baseUrl = value
+  },
+})
+
+onMounted(() => {
+  // Initialize provider if it doesn't exist
+  if (!providers.value[providerId]) {
+    providers.value[providerId] = {
+      baseUrl: 'https://api.anthropic.com/v1/',
+    }
+  }
+
+  // Initialize refs with current values
+  apiKey.value = providers.value[providerId]?.apiKey || ''
+  baseUrl.value = providers.value[providerId]?.baseUrl || 'https://api.anthropic.com/v1/'
+})
+
+// Watch settings and update the provider configuration
+watch([apiKey, baseUrl], () => {
+  providers.value[providerId] = {
+    ...providers.value[providerId],
+    apiKey: apiKey.value,
+    baseUrl: baseUrl.value || 'https://api.anthropic.com/v1/',
+  }
+})
+
+function handleResetSettings() {
+  providers.value[providerId] = {
+    baseUrl: 'https://api.anthropic.com/v1/',
+  }
+}
+</script>
+
+<template>
+  <ProviderSettingsLayout
+    :provider-name="providerMetadata?.localizedName || 'Anthropic | Claude'"
+    :provider-icon="providerMetadata?.icon"
+    :on-back="() => router.back()"
+  >
+    <div bg="orange-50 dark:orange-900/20" rounded-xl p-4 flex="~ col gap-3">
+      <h2 text-xl font-bold text="orange-700 dark:orange-500">
+        Before you start
+      </h2>
+      <p>
+        While Anthropic recently did announce that they are having a beta support for
+        OpenAI SDK compatibility <a underline href="https://docs.anthropic.com/en/api/openai-sdk">(you can read more here)</a>,
+        but due to the implementation details comes with <a underline href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CORS">CORS</a>
+        restrictions which not aligned with the OpenAI SDK, it's currently not possible to use this provider in the browser.
+      </p>
+      <p>
+        If you do need to use this provider, you will need a dedicated proxy backend like a Serverless Function running on
+        <a underline href="https://workers.cloudflare.com/">Cloudflare Workers</a> or some CORS bypassing services to bypass the CORS restrictions.
+      </p>
+    </div>
+    <ProviderSettingsContainer>
+      <ProviderBasicSettings
+        :title="t('settings.pages.providers.common.section.basic.title')"
+        :description="t('settings.pages.providers.common.section.basic.description')"
+        :on-reset="handleResetSettings"
+      >
+        <ProviderApiKeyInput
+          v-model="apiKey"
+          :provider-name="providerMetadata?.localizedName || 'Anthropic'"
+          placeholder="sk-..."
+        />
+      </ProviderBasicSettings>
+
+      <ProviderAdvancedSettings :title="t('settings.pages.providers.common.section.advanced.title')">
+        <ProviderBaseUrlInput
+          v-model="baseUrl"
+          placeholder="https://api.anthropic.com/v1/"
+        />
+      </ProviderAdvancedSettings>
+    </ProviderSettingsContainer>
+  </ProviderSettingsLayout>
+</template>
diff --git a/apps/stage-tamagotchi/uno.config.ts b/apps/stage-tamagotchi/uno.config.ts
index ee1ce45db..e39f4206e 100644
--- a/apps/stage-tamagotchi/uno.config.ts
+++ b/apps/stage-tamagotchi/uno.config.ts
@@ -80,6 +80,7 @@ export default defineConfig({
         /\.(vue|svelte|[jt]sx|mdx?|astro|elm|php|phtml|html)($|\?)/,
         // include js/ts files
         '(components|src)/**/*.{js,ts}',
+        '**/stage-ui/**/*.{js,ts}',
       ],
     },
   },
diff --git a/apps/stage-web/locales/en.yml b/apps/stage-web/locales/en.yml
index ed1525f70..eb757a767 100644
--- a/apps/stage-web/locales/en.yml
+++ b/apps/stage-web/locales/en.yml
@@ -47,8 +47,10 @@ settings:
     stage-transitions:
       title: Disable Stage Transitions
     use-page-specific-transitions:
+      description: >-
+        Some pages will have their own transitions, this will override the stage
+        transitions
       title: Use Page Specific Transitions
-      description: Some pages will have their own transitions, this will override the stage transitions
   language:
     chinese: 简体中文
     english: English
@@ -71,30 +73,30 @@ settings:
   models: Model
   pages:
     card:
-      title: Airi Card
-      description: Use Airi character card presets
-      upload: Upload
-      delete: Delete
-      active: Active
       activate: Activate
-      delete_card: Delete Card
-      delete_confirmation: Are you sure you want to delete this card?
+      active: Active
+      cancel: Cancel
       card_not_found: Card not found
-      created_by: created by
-      creator_notes: Creator Notes
-      description_label: Description
       character: Character
-      personality: Personality
-      scenario: Scenario
-      systemprompt: System Prompt
-      posthistoryinstructions: Post-History Instructions
-      modules: Modules
       consciousness:
         model: Consciousness / Model
+      created_by: created by
+      creator_notes: Creator Notes
+      delete: Delete
+      delete_card: Delete Card
+      delete_confirmation: Are you sure you want to delete this card?
+      description: Use Airi character card presets
+      description_label: Description
+      modules: Modules
+      personality: Personality
+      posthistoryinstructions: Post-History Instructions
+      scenario: Scenario
       speech:
         model: Speech / Model
         voice: Speech / Voice
-      cancel: Cancel
+      systemprompt: System Prompt
+      title: Airi Card
+      upload: Upload
     memory:
       description: Where memories got stored, and organized
       title: Memory
@@ -211,6 +213,9 @@ settings:
             title: Voice Settings
       description: LLMs, speech providers, etc.
       provider:
+        anthropic:
+          description: anthropic.com
+          title: Anthropic | Claude
         cloudflare-workers-ai:
           description: cloudflare.com
           fields:
@@ -282,11 +287,13 @@ settings:
           description: fireworks.ai
           title: Fireworks.ai
         microsoft-speech:
+          description: speech.microsoft.com
           fields:
             field:
               region:
                 description: Speech Service region
                 label: Region
+          title: Microsoft / Azure Speech
         mistral:
           description: mistral.ai
           title: Mistral
@@ -305,6 +312,9 @@ settings:
         openrouter:
           description: openrouter.ai
           title: OpenRouter
+        perplexity:
+          description: perplexity.ai
+          title: Perplexity
         together:
           description: together.ai
           title: Together.ai
diff --git a/apps/stage-web/locales/zh-CN.yml b/apps/stage-web/locales/zh-CN.yml
index a6e76efb5..eae80c358 100644
--- a/apps/stage-web/locales/zh-CN.yml
+++ b/apps/stage-web/locales/zh-CN.yml
@@ -199,6 +199,9 @@ settings:
             title: 声音配置
       description: LLM，语音合成，语音识别提供商等
       provider:
+        anthropic:
+          description: anthropic.com
+          title: Anthropic | Claude
         cloudflare-workers-ai:
           description: Cloudflare.com
           fields:
@@ -268,11 +271,13 @@ settings:
           description: Fireworks.ai
           title: Fireworks.ai
         microsoft-speech:
+          description: speech.microsoft.com
           fields:
             field:
               region:
                 description: 服务 Endpoint 地区（比如亚太 eastasia 区域）
                 label: Endpoint 地区
+          title: Microsoft / Azure 语音服务
         mistral:
           description: mistral.ai
           title: Mistral
@@ -291,6 +296,9 @@ settings:
         openrouter:
           description: OpenRouter.ai
           title: OpenRouter
+        perplexity:
+          description: perplexity.ai
+          title: Perplexity
         together:
           description: 一起
           title: Together.ai
diff --git a/apps/stage-web/src/pages/settings/providers/anthropic.vue b/apps/stage-web/src/pages/settings/providers/anthropic.vue
new file mode 100644
index 000000000..09829e8e2
--- /dev/null
+++ b/apps/stage-web/src/pages/settings/providers/anthropic.vue
@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import type { RemovableRef } from '@vueuse/core'
+
+import {
+  ProviderAdvancedSettings,
+  ProviderApiKeyInput,
+  ProviderBaseUrlInput,
+  ProviderBasicSettings,
+  ProviderSettingsContainer,
+  ProviderSettingsLayout,
+} from '@proj-airi/stage-ui/components'
+import { useProvidersStore } from '@proj-airi/stage-ui/stores'
+import { storeToRefs } from 'pinia'
+import { computed, onMounted, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
+
+const { t } = useI18n()
+const router = useRouter()
+const providersStore = useProvidersStore()
+const { providers } = storeToRefs(providersStore) as { providers: RemovableRef<Record<string, any>> }
+
+// Get provider metadata
+const providerId = 'anthropic'
+const providerMetadata = computed(() => providersStore.getProviderMetadata(providerId))
+
+// Use computed properties for settings
+const apiKey = computed({
+  get: () => providers.value[providerId]?.apiKey || '',
+  set: (value) => {
+    if (!providers.value[providerId])
+      providers.value[providerId] = {}
+
+    providers.value[providerId].apiKey = value
+  },
+})
+
+const baseUrl = computed({
+  get: () => providers.value[providerId]?.baseUrl || 'https://api.anthropic.com/v1/',
+  set: (value) => {
+    if (!providers.value[providerId])
+      providers.value[providerId] = {}
+
+    providers.value[providerId].baseUrl = value
+  },
+})
+
+onMounted(() => {
+  // Initialize provider if it doesn't exist
+  if (!providers.value[providerId]) {
+    providers.value[providerId] = {
+      baseUrl: 'https://api.anthropic.com/v1/',
+    }
+  }
+
+  // Initialize refs with current values
+  apiKey.value = providers.value[providerId]?.apiKey || ''
+  baseUrl.value = providers.value[providerId]?.baseUrl || 'https://api.anthropic.com/v1/'
+})
+
+// Watch settings and update the provider configuration
+watch([apiKey, baseUrl], () => {
+  providers.value[providerId] = {
+    ...providers.value[providerId],
+    apiKey: apiKey.value,
+    baseUrl: baseUrl.value || 'https://api.anthropic.com/v1/',
+  }
+})
+
+function handleResetSettings() {
+  providers.value[providerId] = {
+    baseUrl: 'https://api.anthropic.com/v1/',
+  }
+}
+</script>
+
+<template>
+  <ProviderSettingsLayout
+    :provider-name="providerMetadata?.localizedName || 'Anthropic | Claude'"
+    :provider-icon="providerMetadata?.icon"
+    :on-back="() => router.back()"
+  >
+    <div bg="orange-50 dark:orange-900/20" rounded-xl p-4 flex="~ col gap-3">
+      <h2 text-xl font-bold text="orange-700 dark:orange-500">
+        Before you start
+      </h2>
+      <p>
+        While Anthropic recently did announce that they are having a beta support for
+        OpenAI SDK compatibility <a underline href="https://docs.anthropic.com/en/api/openai-sdk">(you can read more here)</a>,
+        but due to the implementation details comes with <a underline href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CORS">CORS</a>
+        restrictions which not aligned with the OpenAI SDK, it's currently not possible to use this provider in the browser.
+      </p>
+      <p>
+        If you do need to use this provider, you will need a dedicated proxy backend like a Serverless Function running on
+        <a underline href="https://workers.cloudflare.com/">Cloudflare Workers</a> or some CORS bypassing services to bypass the CORS restrictions.
+      </p>
+    </div>
+    <ProviderSettingsContainer>
+      <ProviderBasicSettings
+        :title="t('settings.pages.providers.common.section.basic.title')"
+        :description="t('settings.pages.providers.common.section.basic.description')"
+        :on-reset="handleResetSettings"
+      >
+        <ProviderApiKeyInput
+          v-model="apiKey"
+          :provider-name="providerMetadata?.localizedName || 'Anthropic'"
+          placeholder="sk-..."
+        />
+      </ProviderBasicSettings>
+
+      <ProviderAdvancedSettings :title="t('settings.pages.providers.common.section.advanced.title')">
+        <ProviderBaseUrlInput
+          v-model="baseUrl"
+          placeholder="https://api.anthropic.com/v1/"
+        />
+      </ProviderAdvancedSettings>
+    </ProviderSettingsContainer>
+  </ProviderSettingsLayout>
+</template>
diff --git a/apps/stage-web/uno.config.ts b/apps/stage-web/uno.config.ts
index 5f4969087..51e6dc25c 100644
--- a/apps/stage-web/uno.config.ts
+++ b/apps/stage-web/uno.config.ts
@@ -74,6 +74,7 @@ export default defineConfig({
         /\.(vue|svelte|[jt]sx|mdx?|astro|elm|php|phtml|html)($|\?)/,
         // include js/ts files
         '(components|src)/**/*.{js,ts}',
+        '**/stage-ui/**/*.{js,ts}',
       ],
     },
   },
diff --git a/package.json b/package.json
index 704fb949e..132bb025c 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
   },
   "license": "MIT",
   "scripts": {
-    "postinstall": "npx simple-git-hooks",
+    "postinstall": "npx simple-git-hooks && pnpm packages:build",
     "dev": "pnpm -rF=\"./packages/*\" -F=\"./apps/*\" run --parallel dev",
     "build": "pnpm -rF=\"./packages/*\" -F=\"./apps/*\" run build",
     "apps:dev": "pnpm packages:stub && pnpm -rF=\"./apps/*\" run --parallel dev",