Web Dashboard
Relevant source files
The following files were used as context for generating this wiki page:
The Web Dashboard is a modern, React-based interface for the SecretForge AI platform, built using Next.js 14. It serves as the primary graphical user interface for developers to visualize, manage, and secure API keys. The dashboard integrates with Cloudflare Agents and the Model Context Protocol (MCP) to provide an AI-driven experience for secret management, compliance tracking, and automated key rotation.
Sources: packages/web/README.md:1-8, README.md:16-25, BUILT.md:27-38
Architecture and Tech Stack
The dashboard follows an edge-native architecture, leveraging Next.js App Router for the frontend and connecting to Cloudflare Workers for backend logic.
Core Technologies
| Component | Technology |
|---|---|
| Framework | Next.js 14 (App Router) |
| Language | TypeScript |
| UI Rendering | React 18, Tailwind CSS |
| Components | shadcn/ui, Lucide React (Icons) |
| AI Integration | Cloudflare Agents React hooks |
| Deployment | Vercel or Cloudflare Pages |
Sources: packages/web/README.md:33-41, packages/web/app/page.tsx:4-24, README.md:195-205
Application Flow
The following diagram illustrates the interaction between the Web Dashboard, the AI Agent layer, and the underlying storage services.
The dashboard communicates directly with Cloudflare Agents for stateful AI interactions and uses standard API calls for secret lifecycle management.
Sources: README.md:52-77, packages/web/README.md:11-18
Key Features
AI Chat Interface
The dashboard includes a real-time streaming conversation interface. This allows users to interact with SecretForge AI using natural language to perform tasks such as requesting rotation advice or analyzing project security scores.
Sources: packages/web/README.md:12-13, README.md:43-46
Secret Management & Visibility
The interface provides high-level visualizations of the secret ecosystem, including:
- Total Secrets Count: Monitoring the volume of managed keys.
- Pending Rotations: Identifying keys that require updates based on AI-powered schedules.
- Security Score: A visual metric representing the overall compliance and safety of the project's secrets.
Sources: packages/web/README.md:11-14, packages/web/app/page.tsx:115-130
Compliance Tracking
The dashboard monitors and displays security compliance across various frameworks. It supports checking against standards such as SOC2, GDPR, HIPAA, and PCI-DSS.
Sources: packages/web/README.md:14-15, packages/web/app/page.tsx:210-220
User Interface Layout
The landing and main dashboard pages utilize a dark-themed, high-contrast design (Slate-950 to Purple-950 gradients) to align with modern developer tool aesthetics.
Page Sections
- Navigation: Contains links to documentation, pricing, and the main application entry point.
- Hero Section: Features a terminal demo component showing a simulated
npx @secretforge/cli initcommand. - The Problem/Fear Hook: Visual cards detailing the risks of exposed keys, such as "Instant Exploitation" and "Massive Bills."
- Feature Grid: Highlights AI capabilities like Smart Rotation, MCP Integration, and GitHub Shield.
Sources: packages/web/app/page.tsx:32-260, BUILT.md:27-38
UI Components and Icons
The dashboard uses specialized icons to denote various security states:
Shield: Brand identity and general security.Zap: Auto-detection and performance.AlertTriangle: High-risk warnings for exposed keys.Lock: Compliance and encryption status.
Sources: packages/web/app/page.tsx:10-24, packages/web/app/page.tsx:162-180
Environment Configuration
The web application requires specific environment variables to communicate with the backend services.
| Variable | Description |
|---|---|
NEXT_PUBLIC_API_URL | Base URL for the Cloudflare Workers API. |
NEXT_PUBLIC_AGENT_URL | Endpoint for the stateful AI Agents. |
Sources: packages/web/README.md:27-31
Deployment and Build Commands
The dashboard can be built and deployed via the following commands defined in the project configuration:
# Local development
pnpm dev --filter packages/web
# Production Build
pnpm build --filter packages/web
# Vercel Deployment
vercel --prod
Sources: WARP.md:46, LAUNCH_PLAN.md:17-21, packages/web/README.md:20-25
Summary
The Web Dashboard serves as the centralized management hub for SecretForge AI. By combining a Next.js 14 frontend with Cloudflare's edge AI capabilities, it provides developers with a visual interface for complex security tasks, from automated secret provisioning to compliance auditing. Its integration with MCP ensures that the web-based experience remains consistent with AI-assisted CLI workflows.
Sources: README.md:16-30, BUILT.md:27-40