tuskira/ai-agent-gatewayओपन-सोर्स गेटवे जो AI एजेंट्स के MCP टूल कॉल्स और LLM ट्रैफ़िक को सुरक्षित, नियंत्रित और मॉनिटर करता है, API-की प्रमाणीकरण और निगरानी के लिए एक एडमिन कंसोल के साथ।
Tuskira AI Agent Gateway के लिए एडमिन कंसोल। React 19 + Vite + TypeScript (strict) + Tailwind CSS 4 + shadcn/ui।
Node 26+ और npm 11+ आवश्यक है (pnpm नहीं)।
npm install
npm run dev
डेव सर्वर /api को http://localhost:8081 पर प्रॉक्सी करता है (vite.config.ts देखें), इसलिए
UI के साथ-साथ गेटवे को :8081 पर चलाएँ। /login पर गेटवे द्वारा जारी API key
(gk_…) से साइन इन करें।
रेपो रूट से आप इसके बजाय यह चला सकते हैं:
make ui-install
make ui-dev
npm run build
dist/ में एक प्रोडक्शन बंडल उत्पन्न करता है। प्रोडक्शन में गेटवे स्वयं इस
बंडल को :8081 पर / पर सर्व करता है, इसलिए ऐप API से same-origin पर बात करता है — किसी प्रॉक्सी की आवश्यकता नहीं।
make ui-build # रेपो रूट से
npm run lint # eslint
npm run typecheck # tsc --noEmit (project references)
npm run test # vitest
npm run format:check # prettier --check
npx shadcn@latest add <component>
इस प्रोजेक्ट का components.json Vite टेम्पलेट, radix बेस, neutral बेस
रंग, और थीमिंग के लिए CSS वेरिएबल्स को लक्षित करता है, जिसमें @/* इम्पोर्ट एलियास
src/* पर रिज़ॉल्व होता है। नए कंपोनेंट src/components/ui/ में लिखे जाते हैं।
tokens.json (रेपो रूट) डिज़ाइन सिस्टम के लिए एकमात्र स्रोत है —
रंग, स्पेसिंग, रेडी, शैडो, फ़ॉन्ट। इसे संपादित करने के बाद पुनः उत्पन्न करने के लिए
npm run gen:tokens चलाएँ:
src/styles/tokens.css — कच्चे टोकन CSS कस्टम प्रॉपर्टीज़ के रूप में (:root लाइट
मानों के लिए, .dark डार्क ओवरराइड के लिए), डिज़ाइनर के स्वयं के टोकन
नाम बनाए रखते हुए (--indigo-9, --sev-high, --r-4, --shadow-1, ...)।src/styles/tokens.ts — वही श्रेणीबद्ध रंग स्केल (colors.indigo,
colors.slate, colors.sev, colors.status, colors.brand) साथ ही fonts,
radii, shadows, गैर-CSS उपभोक्ताओं के लिए (जैसे recharts सीरीज़ रंग)।src/index.css shadcn के सेमांटिक वेरिएबल्स (--background, --primary,
--sidebar, ...) को इन टोकन पर मैप करता है, और Tailwind v4 @theme प्रविष्टियाँ रजिस्टर करता है ताकि
bg-indigo-9, text-text-muted, border-border-strong, shadow-1,
rounded-r-4, और font-mono जैसी यूटिलिटीज़ ऐप में कहीं भी उपलब्ध हों। src/styles/tokens.css / src/styles/tokens.ts को हाथ से संपादित न करें — ये
जेनरेटर द्वारा अधिलेखित कर दिए जाते हैं। src/test/tokens.test.ts यह सुनिश्चित करता है कि tokens.ts की प्रत्येक प्रविष्टि का
tokens.css में मेल खाता डिक्लेरेशन हो।
web/
├── index.html
├── vite.config.ts # React + Tailwind plugins, /api dev proxy, vitest config
├── components.json # shadcn/ui config
├── tokens.json # design-token source of truth (see Design tokens)
├── scripts/
│ └── gen-tokens.mjs # tokens.json -> src/styles/tokens.{css,ts}
├── src/
│ ├── main.tsx # ReactDOM root
│ ├── App.tsx # QueryClientProvider, AuthProvider, RouterProvider
│ ├── index.css # Tailwind entrypoint + semantic token mapping
│ ├── styles/
│ │ ├── tokens.css # generated — raw design tokens as CSS vars
│ │ └── tokens.ts # generated — same tokens for non-CSS use
│ ├── auth/
│ │ ├── AuthContext.tsx # AuthProvider / useAuth — principal, signIn, signOut
│ │ └── RequireAuth.tsx # route guard for the authenticated shell
│ ├── components/
│ │ ├── ui/ # shadcn/ui primitives (generated, don't hand-edit)
│ │ ├── layout/ # AppShell, Sidebar, TopBar
│ │ └── app/ # ComingSoon, StatCard
│ ├── hooks/
│ │ └── use-theme.ts # light/dark toggle, class strategy, localStorage
│ ├── lib/
│ │ ├── api.ts # fetch wrapper: bearer auth, 401 handling, ApiError
│ │ ├── nav.ts # single source of truth for sidebar nav + routes
│ │ ├── queries.ts # react-query hooks (useHealth)
│ │ ├── query-client.ts # QueryClient instance
│ │ ├── types.ts # Principal, HealthResponse, ApiErrorBody
│ │ └── utils.ts # cn() (shadcn)
│ ├── routes/
│ │ ├── router.tsx # createBrowserRouter (data router)
│ │ ├── LoginPage.tsx
│ │ ├── OverviewPage.tsx
│ │ └── DocsPage.tsx
│ └── test/
│ ├── setup.ts
│ ├── LoginPage.test.tsx
│ ├── Sidebar.test.tsx
│ ├── SignOut.test.tsx
│ └── tokens.test.ts