Versent AI Templates

Internal component library for AI artefacts. Browse, search, and install AI agents, commands, prompts, hooks, MCPs, settings, and skills.

Quick Start

Prerequisites

• Node.js 18+ and npm

Local Development

# 1. Install dependencies
npm install

# 2. Build the static site
npm run build

# 3. Serve locally
npm start
# Open http://localhost:3000

The site runs with mock authentication by default in development -- you'll be automatically signed in as "Test User".

Running Tests

# Build first (tests run against the static output)
npm run build

# Run all E2E tests
npm test

# Run tests with browser UI (for debugging)
npm run test:ui

# Run a specific test file
npx playwright test e2e/catalog.spec.ts

Expected result: 67 passed, 3 skipped (webkit clipboard + keyboard tests).

Development with Hot Reload

npm run dev
# Open http://localhost:3000

Use npm run dev for rapid UI iteration. Note: the dev server doesn't serve the static search-data.json the same way -- for full testing, use npm run build && npm start.

Project Structure

content/           Component library (markdown + JSON files)
src/app/           Next.js pages
src/components/    React UI components
src/lib/           Auth, content loading, search
src/styles/        Tailwind CSS with Versent brand tokens
e2e/               Playwright E2E tests
scripts/           Build-time data generation

Creating Content

The fastest way to add a new component is with slash commands in Claude Code. Each command scaffolds a properly formatted file with the correct frontmatter, boilerplate, and install instructions.

Slash Commands

Command	Creates	Location
/project:create-agent <name> <category>	Agent .md	content/agents/{category}/{name}.md
/project:create-command <name> <category>	Command .md	content/commands/{category}/{name}.md
/project:create-prompt <name> <category>	Prompt .md	content/prompts/{category}/{name}.md
/project:create-hook <name> <category>	Hook .json	content/hooks/{category}/{name}.json
/project:create-mcp <name> <category>	MCP .json	content/mcps/{category}/{name}.json
/project:create-setting <name> <category>	Setting .json	content/settings/{category}/{name}.json
/project:create-skill <name> <category>	Skill SKILL.md	content/skills/{category}/{name}/SKILL.md

Examples:

/project:create-agent terraform-specialist devops-infrastructure
/project:create-command optimize-images performance
/project:create-hook format-python-files post-tool
/project:create-mcp stripe-api payments

Format Reference

Agents, Commands, Prompts, Skills use markdown with YAML frontmatter:

---
name: my-component
description: What it does
tags: [tag1, tag2]
---

Hooks, MCPs, Settings use JSON:

{
  "description": "What it does",
  ...
}

Manual Creation

You can also create files manually:

1. Create a file in content/{type}/{category}/{name}.md (or .json)
2. Follow the format for that type (see existing files for examples)
3. Run npm run build && npm test to verify
4. Open a PR to main

Environment Variables

For local development, no env vars are needed -- mock auth is the default.

For production (GitHub Pages with Entra ID):

Variable	Purpose
NEXT_PUBLIC_AUTH_MODE	Omit or unset for real auth
NEXT_PUBLIC_AZURE_CLIENT_ID	Azure app registration client ID
NEXT_PUBLIC_AZURE_TENANT_ID	Azure AD tenant ID
NEXT_PUBLIC_BASE_PATH	URL prefix (e.g., /ai-templates)

Deployment

The site is a static export. On merge to main:

1. GitHub Actions runs npm run build
2. The out/ directory is deployed to GitHub Pages

Tech Stack

• Next.js 14 -- Static site generation
• Tailwind CSS -- Styling with Versent brand tokens
• Fuse.js -- Client-side fuzzy search
• MSAL.js -- Azure Entra ID authentication
• Playwright -- E2E testing
• axe-core -- WCAG AA accessibility testing