tuskira/ai-agent-gatewayОткрытый шлюз, который обеспечивает безопасность, управление и мониторинг вызовов инструментов MCP и трафика LLM AI-агентов, с аутентификацией по 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
Dev-сервер проксирует /api на http://localhost:8081 (см. vite.config.ts), поэтому
запускайте gateway на :8081 вместе с UI. Войдите на /login с API-ключом
(gk_…), выданным gateway.
Из корня репозитория вместо этого можно выполнить:
make ui-install
make ui-dev
npm run build
Создаёт production-бандл в dist/. В production сам gateway раздаёт этот
бандл по пути / на :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 custom properties (: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