a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4",
+ className
+ )}
+ {...props}
+ />
+ )
+}
+
+function EmptyContent({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+export {
+ Empty,
+ EmptyHeader,
+ EmptyTitle,
+ EmptyDescription,
+ EmptyContent,
+ EmptyMedia,
+}
diff --git a/frontend/src/components/ui/item.tsx b/frontend/src/components/ui/item.tsx
new file mode 100644
index 0000000..d97de21
--- /dev/null
+++ b/frontend/src/components/ui/item.tsx
@@ -0,0 +1,193 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+import { Separator } from "@/components/ui/separator"
+
+function ItemGroup({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function ItemSeparator({
+ className,
+ ...props
+}: React.ComponentProps
) {
+ return (
+
+ )
+}
+
+const itemVariants = cva(
+ "group/item flex items-center border border-transparent text-sm rounded-md transition-colors [a]:hover:bg-accent/50 [a]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+ {
+ variants: {
+ variant: {
+ default: "bg-transparent",
+ outline: "border-border",
+ muted: "bg-muted/50",
+ },
+ size: {
+ default: "p-4 gap-4 ",
+ sm: "py-3 px-4 gap-2.5",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ size: "default",
+ },
+ }
+)
+
+function Item({
+ className,
+ variant = "default",
+ size = "default",
+ asChild = false,
+ ...props
+}: React.ComponentProps<"div"> &
+ VariantProps & { asChild?: boolean }) {
+ const Comp = asChild ? Slot : "div"
+ return (
+
+ )
+}
+
+const itemMediaVariants = cva(
+ "flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none group-has-[[data-slot=item-description]]/item:translate-y-0.5",
+ {
+ variants: {
+ variant: {
+ default: "bg-transparent",
+ icon: "size-8 border rounded-sm bg-muted [&_svg:not([class*='size-'])]:size-4",
+ image:
+ "size-10 rounded-sm overflow-hidden [&_img]:size-full [&_img]:object-cover",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ },
+ }
+)
+
+function ItemMedia({
+ className,
+ variant = "default",
+ ...props
+}: React.ComponentProps<"div"> & VariantProps) {
+ return (
+
+ )
+}
+
+function ItemContent({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function ItemTitle({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function ItemDescription({ className, ...props }: React.ComponentProps<"p">) {
+ return (
+ a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
+ className
+ )}
+ {...props}
+ />
+ )
+}
+
+function ItemActions({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function ItemHeader({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function ItemFooter({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+export {
+ Item,
+ ItemMedia,
+ ItemContent,
+ ItemActions,
+ ItemGroup,
+ ItemSeparator,
+ ItemTitle,
+ ItemDescription,
+ ItemHeader,
+ ItemFooter,
+}
diff --git a/frontend/src/components/ui/switch.tsx b/frontend/src/components/ui/switch.tsx
new file mode 100644
index 0000000..6a2b524
--- /dev/null
+++ b/frontend/src/components/ui/switch.tsx
@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import * as SwitchPrimitive from "@radix-ui/react-switch"
+
+import { cn } from "@/lib/utils"
+
+function Switch({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+
+
+ )
+}
+
+export { Switch }
diff --git a/frontend/src/components/workspace/settings/acknowledge-page.tsx b/frontend/src/components/workspace/settings/acknowledge-page.tsx
new file mode 100644
index 0000000..4d3c20c
--- /dev/null
+++ b/frontend/src/components/workspace/settings/acknowledge-page.tsx
@@ -0,0 +1,5 @@
+"use client";
+
+export function AcknowledgePage() {
+ return null;
+}
diff --git a/frontend/src/components/workspace/settings/appearance-settings-page.tsx b/frontend/src/components/workspace/settings/appearance-settings-page.tsx
new file mode 100644
index 0000000..c9166aa
--- /dev/null
+++ b/frontend/src/components/workspace/settings/appearance-settings-page.tsx
@@ -0,0 +1,193 @@
+"use client";
+
+import { MonitorSmartphoneIcon, MoonIcon, SunIcon } from "lucide-react";
+import { useTheme } from "next-themes";
+import { useMemo, type ComponentType, type SVGProps } from "react";
+
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from "@/components/ui/select";
+import { Separator } from "@/components/ui/separator";
+import { enUS, zhCN, type Locale } from "@/core/i18n";
+import { useI18n } from "@/core/i18n/hooks";
+import { cn } from "@/lib/utils";
+
+import { SettingsSection } from "./settings-section";
+
+const languageOptions: { value: Locale; label: string }[] = [
+ { value: "en-US", label: enUS.locale.localName },
+ { value: "zh-CN", label: zhCN.locale.localName },
+];
+
+export function AppearanceSettingsPage() {
+ const { t, locale, changeLocale } = useI18n();
+ const { theme, setTheme, resolvedTheme } = useTheme();
+ const currentTheme = (theme ?? "system") as "system" | "light" | "dark";
+
+ const themeOptions = useMemo(
+ () => [
+ {
+ id: "system",
+ label: t.settings.appearance.system,
+ description: t.settings.appearance.systemDescription,
+ icon: MonitorSmartphoneIcon,
+ },
+ {
+ id: "light",
+ label: t.settings.appearance.light,
+ description: t.settings.appearance.lightDescription,
+ icon: SunIcon,
+ },
+ {
+ id: "dark",
+ label: t.settings.appearance.dark,
+ description: t.settings.appearance.darkDescription,
+ icon: MoonIcon,
+ },
+ ],
+ [
+ t.settings.appearance.dark,
+ t.settings.appearance.darkDescription,
+ t.settings.appearance.light,
+ t.settings.appearance.lightDescription,
+ t.settings.appearance.system,
+ t.settings.appearance.systemDescription,
+ ],
+ );
+
+ return (
+
+
+
+ {themeOptions.map((option) => (
+ setTheme(value)}
+ />
+ ))}
+
+
+
+
+
+
+
+
+
{title}
+ {description && (
+ {description}
+ )}
+
+ {children}
+
+ );
+}
diff --git a/frontend/src/components/workspace/settings/skill-settings-page.tsx b/frontend/src/components/workspace/settings/skill-settings-page.tsx
new file mode 100644
index 0000000..1317953
--- /dev/null
+++ b/frontend/src/components/workspace/settings/skill-settings-page.tsx
@@ -0,0 +1,91 @@
+"use client";
+
+import { SparklesIcon } from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import {
+ Empty,
+ EmptyDescription,
+ EmptyHeader,
+ EmptyMedia,
+ EmptyTitle,
+} from "@/components/ui/empty";
+import {
+ Item,
+ ItemActions,
+ ItemTitle,
+ ItemContent,
+ ItemDescription,
+} from "@/components/ui/item";
+import { Switch } from "@/components/ui/switch";
+import { useI18n } from "@/core/i18n/hooks";
+import { useEnableSkill, useSkills } from "@/core/skills/hooks";
+import type { Skill } from "@/core/skills/type";
+
+import { SettingsSection } from "./settings-section";
+
+export function SkillSettingsPage() {
+ const { t } = useI18n();
+ const { skills, isLoading, error } = useSkills();
+ return (
+
+ {isLoading ? (
+ Loading...
+ ) : error ? (
+ Error: {error.message}
+ ) : (
+
+ )}
+
+ );
+}
+
+function SkillSettingsList({ skills }: { skills: Skill[] }) {
+ const { mutate: enableSkill } = useEnableSkill();
+ if (skills.length === 0) {
+ return (
+
+
+
+
+
+ No skill yet
+
+ Put your skill folders under the `/skills/custom` folder under the
+ root folder of DeerFlow.
+
+
+
+ );
+ }
+ return (
+
+ {skills.map((skill) => (
+
-
+
+
+
+
{skill.name}
+
{skill.category}
+
+ ))}
+
Loading...
+ ) : error ? (
+ Error: {error.message}
+ ) : (
+ config &&
+ )}
+
+ );
+}
+
+function MCPServerList({
+ servers,
+}: {
+ servers: Record;
+}) {
+ const { mutate: enableMCPServer } = useEnableMCPServer();
+ return (
+
+ {Object.entries(servers).map(([name, config]) => (
+
-
+
+
+
+
+
+ {config.description}
+
+
+
+
+ enableMCPServer({ serverName: name, enabled: checked })
+ }
+ />
+
+
+ ))}
+
-
- {t.common.settings}
-
-
-
-
-
-
-
-
-
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
);
}
diff --git a/frontend/src/core/i18n/locales/en-US.ts b/frontend/src/core/i18n/locales/en-US.ts
index a38d736..2f87746 100644
--- a/frontend/src/core/i18n/locales/en-US.ts
+++ b/frontend/src/core/i18n/locales/en-US.ts
@@ -1,6 +1,11 @@
import type { Translations } from "./types";
export const enUS: Translations = {
+ // Locale meta
+ locale: {
+ localName: "English",
+ },
+
// Common
common: {
home: "Home",
@@ -83,4 +88,41 @@ export const enUS: Translations = {
readFile: "Read file",
writeFile: "Write file",
},
+
+ // Settings
+ settings: {
+ title: "Settings",
+ description: "Adjust how DeerFlow looks and behaves for you.",
+ sections: {
+ appearance: "Appearance",
+ tools: "Tools",
+ skills: "Skills",
+ acknowledge: "Acknowledge",
+ },
+ appearance: {
+ themeTitle: "Theme",
+ themeDescription:
+ "Choose how the interface follows your device or stays fixed.",
+ system: "System",
+ light: "Light",
+ dark: "Dark",
+ systemDescription: "Match the operating system preference automatically.",
+ lightDescription: "Bright palette with higher contrast for daytime.",
+ darkDescription: "Dim palette that reduces glare for focus.",
+ languageTitle: "Language",
+ languageDescription: "Switch between languages.",
+ },
+ tools: {
+ title: "Tools",
+ description: "Manage the configuration and enabled status of MCP tools.",
+ },
+ skills: {
+ title: "Skills",
+ description: "Manage the configuration and enabled status of the skills.",
+ },
+ acknowledge: {
+ emptyTitle: "Acknowledgements",
+ emptyDescription: "Credits and acknowledgements will show here.",
+ },
+ },
};
diff --git a/frontend/src/core/i18n/locales/types.ts b/frontend/src/core/i18n/locales/types.ts
index 1af3e52..5586983 100644
--- a/frontend/src/core/i18n/locales/types.ts
+++ b/frontend/src/core/i18n/locales/types.ts
@@ -1,4 +1,9 @@
export interface Translations {
+ // Locale meta
+ locale: {
+ localName: string;
+ };
+
// Common
common: {
home: string;
@@ -80,4 +85,40 @@ export interface Translations {
readFile: string;
writeFile: string;
};
+
+ // Settings
+ settings: {
+ title: string;
+ description: string;
+ sections: {
+ appearance: string;
+ tools: string;
+ skills: string;
+ acknowledge: string;
+ };
+ appearance: {
+ themeTitle: string;
+ themeDescription: string;
+ system: string;
+ light: string;
+ dark: string;
+ systemDescription: string;
+ lightDescription: string;
+ darkDescription: string;
+ languageTitle: string;
+ languageDescription: string;
+ };
+ tools: {
+ title: string;
+ description: string;
+ };
+ skills: {
+ title: string;
+ description: string;
+ };
+ acknowledge: {
+ emptyTitle: string;
+ emptyDescription: string;
+ };
+ };
}
diff --git a/frontend/src/core/i18n/locales/zh-CN.ts b/frontend/src/core/i18n/locales/zh-CN.ts
index 1ec1281..334039c 100644
--- a/frontend/src/core/i18n/locales/zh-CN.ts
+++ b/frontend/src/core/i18n/locales/zh-CN.ts
@@ -1,6 +1,11 @@
import type { Translations } from "./types";
export const zhCN: Translations = {
+ // Locale meta
+ locale: {
+ localName: "中文",
+ },
+
// Common
common: {
home: "首页",
@@ -83,4 +88,40 @@ export const zhCN: Translations = {
readFile: "读取文件",
writeFile: "写入文件",
},
+
+ // Settings
+ settings: {
+ title: "设置",
+ description: "根据你的偏好调整 DeerFlow 的界面和行为。",
+ sections: {
+ appearance: "外观",
+ tools: "工具",
+ skills: "技能",
+ acknowledge: "致谢",
+ },
+ appearance: {
+ themeTitle: "主题",
+ themeDescription: "跟随系统或选择固定的界面模式。",
+ system: "系统",
+ light: "浅色",
+ dark: "深色",
+ systemDescription: "自动匹配操作系统偏好。",
+ lightDescription: "更明亮的配色，适合日间使用。",
+ darkDescription: "更暗的配色，减少眩光方便专注。",
+ languageTitle: "语言",
+ languageDescription: "在不同语言之间切换。",
+ },
+ tools: {
+ title: "工具",
+ description: "管理 MCP 工具的配置和启用状态。",
+ },
+ skills: {
+ title: "技能",
+ description: "管理智能体的技能配置和启用状态。",
+ },
+ acknowledge: {
+ emptyTitle: "致谢",
+ emptyDescription: "相关的致谢信息会展示在这里。",
+ },
+ },
};
diff --git a/frontend/src/core/mcp/api.ts b/frontend/src/core/mcp/api.ts
new file mode 100644
index 0000000..edc4561
--- /dev/null
+++ b/frontend/src/core/mcp/api.ts
@@ -0,0 +1,24 @@
+import { env } from "@/env";
+
+import type { MCPConfig } from "./types";
+
+export async function loadMCPConfig() {
+ const response = await fetch(
+ `${env.NEXT_PUBLIC_BACKEND_BASE_URL}/api/mcp/config`,
+ );
+ return response.json() as Promise;
+}
+
+export async function updateMCPConfig(config: MCPConfig) {
+ const response = await fetch(
+ `${env.NEXT_PUBLIC_BACKEND_BASE_URL}/api/mcp/config`,
+ {
+ method: "PUT",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify(config),
+ },
+ );
+ return response.json();
+}
diff --git a/frontend/src/core/mcp/hooks.ts b/frontend/src/core/mcp/hooks.ts
new file mode 100644
index 0000000..dc17ed8
--- /dev/null
+++ b/frontend/src/core/mcp/hooks.ts
@@ -0,0 +1,44 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+
+import { loadMCPConfig, updateMCPConfig } from "./api";
+
+export function useMCPConfig() {
+ const { data, isLoading, error } = useQuery({
+ queryKey: ["mcpConfig"],
+ queryFn: () => loadMCPConfig(),
+ });
+ return { config: data, isLoading, error };
+}
+
+export function useEnableMCPServer() {
+ const queryClient = useQueryClient();
+ const { config } = useMCPConfig();
+ return useMutation({
+ mutationFn: async ({
+ serverName,
+ enabled,
+ }: {
+ serverName: string;
+ enabled: boolean;
+ }) => {
+ if (!config) {
+ throw new Error("MCP config not found");
+ }
+ if (!config.mcp_servers[serverName]) {
+ throw new Error(`MCP server ${serverName} not found`);
+ }
+ await updateMCPConfig({
+ mcp_servers: {
+ ...config.mcp_servers,
+ [serverName]: {
+ ...config.mcp_servers[serverName],
+ enabled,
+ },
+ },
+ });
+ },
+ onSuccess: () => {
+ void queryClient.invalidateQueries({ queryKey: ["mcpConfig"] });
+ },
+ });
+}
diff --git a/frontend/src/core/mcp/index.ts b/frontend/src/core/mcp/index.ts
new file mode 100644
index 0000000..1d58e1a
--- /dev/null
+++ b/frontend/src/core/mcp/index.ts
@@ -0,0 +1,2 @@
+export * from "./api";
+export * from "./types";
diff --git a/frontend/src/core/mcp/types.ts b/frontend/src/core/mcp/types.ts
new file mode 100644
index 0000000..5d4f571
--- /dev/null
+++ b/frontend/src/core/mcp/types.ts
@@ -0,0 +1,8 @@
+export interface MCPServerConfig extends Record {
+ enabled: boolean;
+ description: string;
+}
+
+export interface MCPConfig {
+ mcp_servers: Record;
+}
diff --git a/frontend/src/core/skills/api.ts b/frontend/src/core/skills/api.ts
new file mode 100644
index 0000000..242d932
--- /dev/null
+++ b/frontend/src/core/skills/api.ts
@@ -0,0 +1,25 @@
+import { env } from "@/env";
+
+import type { Skill } from "./type";
+
+export async function loadSkills() {
+ const skills = await fetch(`${env.NEXT_PUBLIC_BACKEND_BASE_URL}/api/skills`);
+ const json = await skills.json();
+ return json.skills as Skill[];
+}
+
+export async function enableSkill(skillName: string, enabled: boolean) {
+ const response = await fetch(
+ `${env.NEXT_PUBLIC_BACKEND_BASE_URL}/api/skills/${skillName}`,
+ {
+ method: "PUT",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify({
+ enabled,
+ }),
+ },
+ );
+ return response.json();
+}
diff --git a/frontend/src/core/skills/hooks.ts b/frontend/src/core/skills/hooks.ts
new file mode 100644
index 0000000..9135223
--- /dev/null
+++ b/frontend/src/core/skills/hooks.ts
@@ -0,0 +1,31 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+
+import { enableSkill } from "./api";
+
+import { loadSkills } from ".";
+
+export function useSkills() {
+ const { data, isLoading, error } = useQuery({
+ queryKey: ["skills"],
+ queryFn: () => loadSkills(),
+ });
+ return { skills: data ?? [], isLoading, error };
+}
+
+export function useEnableSkill() {
+ const queryClient = useQueryClient();
+ return useMutation({
+ mutationFn: async ({
+ skillName,
+ enabled,
+ }: {
+ skillName: string;
+ enabled: boolean;
+ }) => {
+ await enableSkill(skillName, enabled);
+ },
+ onSuccess: () => {
+ void queryClient.invalidateQueries({ queryKey: ["skills"] });
+ },
+ });
+}
diff --git a/frontend/src/core/skills/index.ts b/frontend/src/core/skills/index.ts
new file mode 100644
index 0000000..7ac274e
--- /dev/null
+++ b/frontend/src/core/skills/index.ts
@@ -0,0 +1,2 @@
+export * from "./api";
+export * from "./type";
diff --git a/frontend/src/core/skills/type.ts b/frontend/src/core/skills/type.ts
new file mode 100644
index 0000000..7bb76a2
--- /dev/null
+++ b/frontend/src/core/skills/type.ts
@@ -0,0 +1,7 @@
+export interface Skill {
+ name: string;
+ description: string;
+ category: string;
+ license: string;
+ enabled: boolean;
+}
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index 09861ce..f760fdb 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -22,7 +22,7 @@
"noEmit": true,
"module": "ESNext",
"moduleResolution": "Bundler",
- "jsx": "preserve",
+ "jsx": "react-jsx",
"plugins": [
{
"name": "next"