87 | >(({ className, ...props }, ref) => (
88 | | [role=checkbox]]:translate-y-[2px]",
92 | className
93 | )}
94 | {...props}
95 | />
96 | ))
97 | TableCell.displayName = "TableCell"
98 |
99 | const TableCaption = React.forwardRef<
100 | HTMLTableCaptionElement,
101 | React.HTMLAttributes
102 | >(({ className, ...props }, ref) => (
103 |
108 | ))
109 | TableCaption.displayName = "TableCaption"
110 |
111 | export {
112 | Table,
113 | TableHeader,
114 | TableBody,
115 | TableFooter,
116 | TableHead,
117 | TableRow,
118 | TableCell,
119 | TableCaption,
120 | }
121 |
--------------------------------------------------------------------------------
/src/components/ui/tabs.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as TabsPrimitive from "@radix-ui/react-tabs"
5 |
6 | import { cn } from "@/lib/utils"
7 |
8 | const Tabs = TabsPrimitive.Root
9 |
10 | const TabsList = React.forwardRef<
11 | React.ElementRef,
12 | React.ComponentPropsWithoutRef
13 | >(({ className, ...props }, ref) => (
14 |
22 | ))
23 | TabsList.displayName = TabsPrimitive.List.displayName
24 |
25 | const TabsTrigger = React.forwardRef<
26 | React.ElementRef,
27 | React.ComponentPropsWithoutRef
28 | >(({ className, ...props }, ref) => (
29 |
37 | ))
38 | TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
39 |
40 | const TabsContent = React.forwardRef<
41 | React.ElementRef,
42 | React.ComponentPropsWithoutRef
43 | >(({ className, ...props }, ref) => (
44 |
52 | ))
53 | TabsContent.displayName = TabsPrimitive.Content.displayName
54 |
55 | export { Tabs, TabsList, TabsTrigger, TabsContent }
56 |
--------------------------------------------------------------------------------
/src/components/ui/tooltip.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as TooltipPrimitive from "@radix-ui/react-tooltip"
5 |
6 | import { cn } from "@/lib/utils"
7 |
8 | const TooltipProvider = TooltipPrimitive.Provider
9 |
10 | const Tooltip = TooltipPrimitive.Root
11 |
12 | const TooltipTrigger = TooltipPrimitive.Trigger
13 |
14 | const TooltipContent = React.forwardRef<
15 | React.ElementRef,
16 | React.ComponentPropsWithoutRef
17 | >(({ className, sideOffset = 4, ...props }, ref) => (
18 |
19 |
28 |
29 | ))
30 | TooltipContent.displayName = TooltipPrimitive.Content.displayName
31 |
32 | export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
33 |
--------------------------------------------------------------------------------
/src/hooks/use-mobile.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 |
3 | const MOBILE_BREAKPOINT = 768
4 |
5 | export function useIsMobile() {
6 | const [isMobile, setIsMobile] = React.useState(undefined)
7 |
8 | React.useEffect(() => {
9 | const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
10 | const onChange = () => {
11 | setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
12 | }
13 | mql.addEventListener("change", onChange)
14 | setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
15 | return () => mql.removeEventListener("change", onChange)
16 | }, [])
17 |
18 | return !!isMobile
19 | }
20 |
--------------------------------------------------------------------------------
/src/lib/api/n8n-provider.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { createContext, useContext, useEffect, useState } from "react";
4 | import { createN8nClient } from "./n8n";
5 |
6 | interface N8nContextType {
7 | client: ReturnType | null;
8 | isConfigured: boolean;
9 | configure: (apiKey: string, baseUrl: string, anthropicKey: string) => void;
10 | clear: () => void;
11 | anthropicKey: string | null;
12 | }
13 |
14 | const N8nContext = createContext({
15 | client: null,
16 | isConfigured: false,
17 | configure: () => {},
18 | clear: () => {},
19 | anthropicKey: null,
20 | });
21 |
22 | const STORAGE_KEY = "n8n_config";
23 |
24 | interface N8nProviderProps {
25 | children: React.ReactNode;
26 | }
27 |
28 | export function N8nProvider({ children }: N8nProviderProps) {
29 | const [client, setClient] = useState | null>(null);
30 | const [anthropicKey, setAnthropicKey] = useState(null);
31 |
32 | useEffect(() => {
33 | // Try to load config from localStorage on mount
34 | const storedConfig = localStorage.getItem(STORAGE_KEY);
35 | if (storedConfig) {
36 | try {
37 | const { apiKey, baseUrl, anthropicKey } = JSON.parse(storedConfig);
38 | if (apiKey && baseUrl) {
39 | setClient(createN8nClient({ apiKey, baseUrl }));
40 | setAnthropicKey(anthropicKey);
41 | }
42 | } catch (error) {
43 | console.error("Failed to load n8n config:", error);
44 | localStorage.removeItem(STORAGE_KEY);
45 | }
46 | }
47 | }, []);
48 |
49 | const configure = (apiKey: string, baseUrl: string, anthropicKey: string) => {
50 | localStorage.setItem(
51 | STORAGE_KEY,
52 | JSON.stringify({ apiKey, baseUrl, anthropicKey })
53 | );
54 | setClient(createN8nClient({ apiKey, baseUrl }));
55 | setAnthropicKey(anthropicKey);
56 | };
57 |
58 | const clear = () => {
59 | localStorage.removeItem(STORAGE_KEY);
60 | setClient(null);
61 | setAnthropicKey(null);
62 | };
63 |
64 | return (
65 |
74 | {children}
75 |
76 | );
77 | }
78 |
79 | export function useN8n() {
80 | const context = useContext(N8nContext);
81 | if (context === undefined) {
82 | throw new Error("useN8n must be used within a N8nProvider");
83 | }
84 | return context;
85 | }
--------------------------------------------------------------------------------
/src/lib/api/n8n.ts:
--------------------------------------------------------------------------------
1 | interface N8nConfig {
2 | apiKey: string;
3 | baseUrl: string;
4 | }
5 |
6 | interface ApiError {
7 | error: string;
8 | status?: number;
9 | statusText?: string;
10 | details?: string;
11 | }
12 |
13 | interface N8nResponse {
14 | data: T;
15 | }
16 |
17 | class N8nApiClient {
18 | private config: N8nConfig;
19 |
20 | constructor(config: N8nConfig) {
21 | this.config = config;
22 | }
23 |
24 | get baseUrl(): string {
25 | return this.config.baseUrl;
26 | }
27 |
28 | private async fetch(endpoint: string, options: RequestInit = {}): Promise> {
29 | const url = new URL(`/api/n8n/${endpoint}`, window.location.origin);
30 | url.searchParams.set("apiKey", this.config.apiKey);
31 | url.searchParams.set("baseUrl", this.config.baseUrl);
32 |
33 | const response = await fetch(url, {
34 | ...options,
35 | headers: {
36 | "Content-Type": "application/json",
37 | ...options.headers,
38 | },
39 | });
40 |
41 | const data = await response.json();
42 |
43 | if (!response.ok) {
44 | const error = data as ApiError;
45 | throw new Error(
46 | `API request failed: ${error.statusText || response.statusText}\n${
47 | error.details || error.error || "Unknown error"
48 | }`
49 | );
50 | }
51 |
52 | return data as N8nResponse;
53 | }
54 |
55 | async getWorkflows() {
56 | return this.fetch("workflows");
57 | }
58 |
59 | async getWorkflow(id: string) {
60 | return this.fetch(`workflows/${id}`);
61 | }
62 |
63 | async updateWorkflow(id: string, data: any) {
64 | return this.fetch(`workflows/${id}`, {
65 | method: "PUT",
66 | body: JSON.stringify(data),
67 | });
68 | }
69 |
70 | async activateWorkflow(id: string) {
71 | return this.fetch(`workflows/${id}/activate`, {
72 | method: "POST",
73 | });
74 | }
75 |
76 | async deactivateWorkflow(id: string) {
77 | return this.fetch(`workflows/${id}/deactivate`, {
78 | method: "POST",
79 | });
80 | }
81 |
82 | async getExecutions(workflowId?: string) {
83 | const endpoint = workflowId
84 | ? `executions?workflowId=${workflowId}`
85 | : "executions";
86 | return this.fetch(endpoint);
87 | }
88 |
89 | async getExecution(id: string) {
90 | return this.fetch(`executions/${id}`);
91 | }
92 |
93 | async createWorkflow(workflowData: any) {
94 | return this.fetch("workflows", {
95 | method: "POST",
96 | body: JSON.stringify(workflowData),
97 | });
98 | }
99 | }
100 |
101 | export function createN8nClient(config: N8nConfig) {
102 | return new N8nApiClient(config);
103 | }
--------------------------------------------------------------------------------
/src/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import { clsx, type ClassValue } from "clsx"
2 | import { twMerge } from "tailwind-merge"
3 |
4 | export function cn(...inputs: ClassValue[]) {
5 | return twMerge(clsx(inputs))
6 | }
7 |
--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
1 | import type { Config } from "tailwindcss";
2 |
3 | export default {
4 | darkMode: ["class"],
5 | content: [
6 | "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
7 | "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
8 | "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
9 | ],
10 | theme: {
11 | extend: {
12 | colors: {
13 | background: 'hsl(var(--background))',
14 | foreground: 'hsl(var(--foreground))',
15 | card: {
16 | DEFAULT: 'hsl(var(--card))',
17 | foreground: 'hsl(var(--card-foreground))'
18 | },
19 | popover: {
20 | DEFAULT: 'hsl(var(--popover))',
21 | foreground: 'hsl(var(--popover-foreground))'
22 | },
23 | primary: {
24 | DEFAULT: 'hsl(var(--primary))',
25 | foreground: 'hsl(var(--primary-foreground))'
26 | },
27 | secondary: {
28 | DEFAULT: 'hsl(var(--secondary))',
29 | foreground: 'hsl(var(--secondary-foreground))'
30 | },
31 | muted: {
32 | DEFAULT: 'hsl(var(--muted))',
33 | foreground: 'hsl(var(--muted-foreground))'
34 | },
35 | accent: {
36 | DEFAULT: 'hsl(var(--accent))',
37 | foreground: 'hsl(var(--accent-foreground))'
38 | },
39 | destructive: {
40 | DEFAULT: 'hsl(var(--destructive))',
41 | foreground: 'hsl(var(--destructive-foreground))'
42 | },
43 | border: 'hsl(var(--border))',
44 | input: 'hsl(var(--input))',
45 | ring: 'hsl(var(--ring))',
46 | chart: {
47 | '1': 'hsl(var(--chart-1))',
48 | '2': 'hsl(var(--chart-2))',
49 | '3': 'hsl(var(--chart-3))',
50 | '4': 'hsl(var(--chart-4))',
51 | '5': 'hsl(var(--chart-5))'
52 | },
53 | sidebar: {
54 | DEFAULT: 'hsl(var(--sidebar-background))',
55 | foreground: 'hsl(var(--sidebar-foreground))',
56 | primary: 'hsl(var(--sidebar-primary))',
57 | 'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
58 | accent: 'hsl(var(--sidebar-accent))',
59 | 'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
60 | border: 'hsl(var(--sidebar-border))',
61 | ring: 'hsl(var(--sidebar-ring))'
62 | }
63 | },
64 | borderRadius: {
65 | lg: 'var(--radius)',
66 | md: 'calc(var(--radius) - 2px)',
67 | sm: 'calc(var(--radius) - 4px)'
68 | }
69 | }
70 | },
71 | plugins: [require("tailwindcss-animate")],
72 | } satisfies Config;
73 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "ES2017",
4 | "lib": ["dom", "dom.iterable", "esnext"],
5 | "allowJs": true,
6 | "skipLibCheck": true,
7 | "strict": true,
8 | "noEmit": true,
9 | "esModuleInterop": true,
10 | "module": "esnext",
11 | "moduleResolution": "bundler",
12 | "resolveJsonModule": true,
13 | "isolatedModules": true,
14 | "jsx": "preserve",
15 | "incremental": true,
16 | "plugins": [
17 | {
18 | "name": "next"
19 | }
20 | ],
21 | "paths": {
22 | "@/*": ["./src/*"]
23 | }
24 | },
25 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
26 | "exclude": ["node_modules"]
27 | }
28 |
--------------------------------------------------------------------------------
| 
7 | 
11 | 
15 |