Frontier — AI Agent Studio

The platform powering enterprise AI agents. Build, deploy, and manage AI coworkers on a single platform.

Frontier is a Next.js web application that provides a visual interface for managing, creating, and orchestrating AI agents. It connects to Azure AI Foundry Agent Service with Microsoft Entra ID authentication, and includes early support for AWS Bedrock models.

Architecture

Features

• Agent Management — Create, configure, and manage AI agents with tool assignments (code interpreter, file search, Azure AI Search, Bing, custom functions)
• Streaming Chat Playground — Real-time SSE-based conversations with agents, message history, and multi-turn context
• Flow Builder — ReactFlow-based visual canvas for designing multi-agent orchestration workflows, architecture diagrams, and execution traces
• Tools Dashboard — Browse tool catalogs, manage connections, and configure tool presets
• Knowledge Sources — Vector store management, file uploads (multipart), and document indexing for agent retrieval
• Settings — Multi-project switching, theme modes (dark/light), and user preferences
• SAML Authentication — Optional enterprise SSO via SAML 2.0 with iron-session
• AWS Bedrock — Early multi-provider support for Bedrock-hosted models (Claude, Titan, etc.)

Additional Modules

Observability, Governance, Business Context, Integrations, Marketplace, and Annotations pages are available as scaffolded modules.

Tech Stack

Layer	Technology	Version
Framework	Next.js (App Router)	16.1.6
Language	TypeScript (strict)	^5
React	React	19.2.3
Styling	Tailwind CSS v4	^4
Diagrams	ReactFlow	^11.11.4
UI Primitives	Radix UI	latest
Auth	SAML 2.0 + iron-session	^5.1.0 / ^8.0.4
Cloud	Azure AI Foundry, AWS Bedrock	—
Icons	lucide-react	^0.576.0

Prerequisites

• Node.js 18+
• npm 9+
• An Azure AI Foundry project with:
  • An App Registration (Entra ID) with a client secret
  • At least one model deployment (e.g., gpt-4o)
• (Optional) AWS credentials with Bedrock access for multi-provider support
• (Optional) SAML IdP configuration for enterprise SSO

Getting Started

1. Clone the repository

git clone <repo-url>
cd agent-platform-ui

2. Install dependencies

npm install

3. Configure environment variables

cp .env.local.example .env.local

Edit .env.local with your Azure AI Foundry credentials:

Variable	Description
NEXT_PUBLIC_AZURE_TENANT_ID	Azure AD tenant ID
NEXT_PUBLIC_AZURE_CLIENT_ID	App registration client ID
AZURE_CLIENT_SECRET	App registration client secret
AZURE_FOUNDRY_ENDPOINT	Foundry project endpoint (https://<name>.services.ai.azure.com/api/projects/<project>)
NEXT_PUBLIC_AZURE_FOUNDRY_ENDPOINT	Client-side API proxy path (default: /api)
NEXT_PUBLIC_DEFAULT_MODEL	Default model deployment name (default: gpt-4o)

See .env.local.example for optional SAML and AWS Bedrock configuration.

4. Start the development server

npm run dev

Open http://localhost:3000 in your browser.

Scripts

npm run dev      # Start development server
npm run build    # Production build
npm run start    # Start production server
npm run lint     # Run ESLint

Project Structure

src/
├── app/                        # Next.js App Router
│   ├── layout.tsx              # Root layout (providers, fonts, metadata)
│   ├── page.tsx                # Home (redirects to /agents)
│   ├── globals.css             # Design system (CSS variables, theme, animations)
│   ├── agents/                 # Agent dashboard, detail, create, chat pages
│   ├── flows/                  # Flow builder and overview pages
│   ├── tools/                  # Tools dashboard
│   ├── knowledge/              # Knowledge sources management
│   ├── settings/               # Settings and preferences
│   ├── login/                  # Authentication page
│   ├── observability/          # Monitoring and traces
│   ├── governance/             # Policy and compliance
│   ├── business-context/       # Business context configuration
│   ├── integrations/           # External integrations
│   ├── marketplace/            # Agent marketplace
│   ├── annotations/            # Annotation tools
│   └── api/                    # Route Handlers (proxy to Azure Foundry)
├── components/
│   ├── layout/                 # App shell — providers, sidebar, topbar
│   ├── ui/                     # Reusable primitives — Button, Card, Badge, Modal, etc.
│   ├── agents/                 # Agent cards, forms, chat, architecture diagrams
│   ├── flows/                  # Flow canvas, nodes, builder, visualizations
│   ├── tools/                  # Tool catalog and connection components
│   ├── knowledge/              # Knowledge source and vector store components
│   └── ...                     # Additional module-specific components
├── lib/
│   ├── foundry-client.ts       # Azure Foundry REST client
│   ├── bedrock-client.ts       # AWS Bedrock client
│   ├── chat-provider.ts        # Chat provider abstraction
│   ├── sse-parser.ts           # SSE stream parser (async generator)
│   ├── saml-config.ts          # SAML configuration
│   ├── server-auth.ts          # Server-side auth utilities
│   ├── session.ts              # iron-session configuration
│   ├── settings-store.ts       # Settings persistence
│   └── ...                     # Additional utilities
└── types/
    └── agent.ts                # All TypeScript types and interfaces

Architecture

Browser (SPA)
  ├── SAML Auth (optional SSO) or direct access
  ├── React pages (App Router)
  ├── ReactFlow diagrams
  └── FoundryClient / BedrockClient (via React Context)
         │
         ▼ HTTPS + Bearer Token
  Next.js API Route Handlers (/api/*)
         │
         ├──▶ Azure AI Foundry Agent Service
         └──▶ AWS Bedrock (optional)

• Client components use provider clients from React Context for API calls
• API Route Handlers proxy operations with server-side credentials
• SSE streaming for real-time chat via the API proxy
• Provider chain: SettingsProvider > FoundryProvider > SidebarProvider > LayoutShell

License

Private. All rights reserved.