import { z } from "zod";
/**
* Code Generators - Tools that generate actual, usable code
*/
// ============================================
// Generate Snippet Tool
// ============================================
export const generateSnippetSchema = {
name: "generate_snippet",
description: "Generates production-ready code snippets for common patterns",
inputSchema: z.object({
pattern: z.enum([
"api-endpoint", "react-component", "react-hook", "express-middleware",
"prisma-model", "zod-schema", "test-suite", "docker-compose",
"github-action", "error-handler", "logger", "auth-middleware",
"next-page", "vue-component", "svelte-component"
]).describe("The code pattern to generate"),
name: z.string().describe("Name for the generated code (e.g., 'User', 'handleAuth')"),
options: z.record(z.string()).optional().describe("Additional options for generation")
})
};
const snippetTemplates: Record<string, (name: string, options?: Record<string, string>) => string> = {
"api-endpoint": (name, opts) => `
// ${name} API Endpoint
import { Request, Response, NextFunction } from 'express';
interface ${name}Request {
// Define request body/params
}
interface ${name}Response {
success: boolean;
data?: unknown;
error?: string;
}
export async function get${name}(req: Request, res: Response<${name}Response>) {
try {
const { id } = req.params;
// TODO: Implement fetch logic
const result = await fetch${name}ById(id);
res.json({ success: true, data: result });
} catch (error) {
res.status(500).json({ success: false, error: (error as Error).message });
}
}
export async function create${name}(req: Request, res: Response<${name}Response>) {
try {
const data: ${name}Request = req.body;
// TODO: Implement create logic
const result = await create${name}InDB(data);
res.status(201).json({ success: true, data: result });
} catch (error) {
res.status(500).json({ success: false, error: (error as Error).message });
}
}
export async function update${name}(req: Request, res: Response<${name}Response>) {
try {
const { id } = req.params;
const data: Partial<${name}Request> = req.body;
const result = await update${name}InDB(id, data);
res.json({ success: true, data: result });
} catch (error) {
res.status(500).json({ success: false, error: (error as Error).message });
}
}
export async function delete${name}(req: Request, res: Response) {
try {
const { id } = req.params;
await delete${name}FromDB(id);
res.status(204).send();
} catch (error) {
res.status(500).json({ success: false, error: (error as Error).message });
}
}
`.trim(),
"react-component": (name, opts) => `
import React, { useState, useEffect } from 'react';
interface ${name}Props {
title?: string;
onAction?: () => void;
children?: React.ReactNode;
}
export function ${name}({ title, onAction, children }: ${name}Props) {
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
useEffect(() => {
// Component mount logic
return () => {
// Cleanup
};
}, []);
const handleClick = async () => {
setLoading(true);
setError(null);
try {
onAction?.();
} catch (e) {
setError((e as Error).message);
} finally {
setLoading(false);
}
};
if (loading) return <div className="${name.toLowerCase()}-loading">Loading...</div>;
if (error) return <div className="${name.toLowerCase()}-error">Error: {error}</div>;
return (
<div className="${name.toLowerCase()}">
{title && <h2>{title}</h2>}
<div className="${name.toLowerCase()}-content">
{children}
</div>
<button onClick={handleClick} disabled={loading}>
Action
</button>
</div>
);
}
export default ${name};
`.trim(),
"react-hook": (name, opts) => `
import { useState, useEffect, useCallback } from 'react';
interface Use${name}Options {
initialValue?: unknown;
onSuccess?: (data: unknown) => void;
onError?: (error: Error) => void;
}
interface Use${name}Return {
data: unknown | null;
loading: boolean;
error: Error | null;
refetch: () => Promise<void>;
reset: () => void;
}
export function use${name}(options: Use${name}Options = {}): Use${name}Return {
const { initialValue = null, onSuccess, onError } = options;
const [data, setData] = useState<unknown | null>(initialValue);
const [loading, setLoading] = useState(false);
const [error, setError] = useState<Error | null>(null);
const fetch${name} = useCallback(async () => {
setLoading(true);
setError(null);
try {
// TODO: Implement fetch logic
const response = await fetch('/api/${name.toLowerCase()}');
const result = await response.json();
setData(result);
onSuccess?.(result);
} catch (e) {
const err = e as Error;
setError(err);
onError?.(err);
} finally {
setLoading(false);
}
}, [onSuccess, onError]);
const reset = useCallback(() => {
setData(initialValue);
setError(null);
setLoading(false);
}, [initialValue]);
useEffect(() => {
fetch${name}();
}, [fetch${name}]);
return { data, loading, error, refetch: fetch${name}, reset };
}
export default use${name};
`.trim(),
"express-middleware": (name, opts) => `
import { Request, Response, NextFunction } from 'express';
interface ${name}Options {
enabled?: boolean;
// Add configuration options
}
timestamp: startTime,
// Add custom data
};
// Call next middleware
next();
// Post-processing (runs after response)
const duration = Date.now() - startTime;
console.log(\`[${name}] Completed in \${duration}ms\`);
} catch (error) {
console.error(\`[${name}] Error:\`, error);
next(error);
}
};
}
// Error handler version
export function ${name.toLowerCase()}ErrorHandler(
error: Error,
req: Request,
res: Response,
next: NextFunction
) {
console.error(\`[${name}] Error caught:\`, error.message);
res.status(500).json({
success: false,
error: process.env.NODE_ENV === 'production'
? 'Internal server error'
: error.message
});
}
`.trim(),
"zod-schema": (name, opts) => `
import { z } from 'zod';
// ${name} Schema
export const ${name}Schema = z.object({
id: z.string().uuid().optional(),
name: z.string().min(1).max(100),
email: z.string().email(),
status: z.enum(['active', 'inactive', 'pending']).default('pending'),
metadata: z.record(z.unknown()).optional(),
createdAt: z.date().optional(),
updatedAt: z.date().optional(),
});
export type ${name} = z.infer<typeof ${name}Schema>;
// Create ${name} Schema (without auto-generated fields)
export const Create${name}Schema = ${name}Schema.omit({
id: true,
createdAt: true,
updatedAt: true,
});
export type Create${name} = z.infer<typeof Create${name}Schema>;
// Update ${name} Schema (all fields optional)
export const Update${name}Schema = ${name}Schema.partial().omit({
id: true,
createdAt: true,
});
export type Update${name} = z.infer<typeof Update${name}Schema>;
// Query ${name} Schema (for filtering)
export const Query${name}Schema = z.object({
status: z.enum(['active', 'inactive', 'pending']).optional(),
search: z.string().optional(),
limit: z.number().int().min(1).max(100).default(20),
offset: z.number().int().min(0).default(0),
sortBy: z.enum(['name', 'createdAt', 'updatedAt']).default('createdAt'),
sortOrder: z.enum(['asc', 'desc']).default('desc'),
});
export type Query${name} = z.infer<typeof Query${name}Schema>;
// Validation helper
export function validate${name}(data: unknown): ${name} {
return ${name}Schema.parse(data);
}
export function safeValidate${name}(data: unknown): { success: true; data: ${name} } | { success: false; error: z.ZodError } {
const result = ${name}Schema.safeParse(data);
if (result.success) {
return { success: true, data: result.data };
}
return { success: false, error: result.error };
}
`.trim(),
"test-suite": (name, opts) => `
import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
describe('${name}', () => {
// Setup and teardown
beforeEach(() => {
vi.clearAllMocks();
});
afterEach(() => {
vi.restoreAllMocks();
});
describe('initialization', () => {
it('should initialize with default values', () => {
const instance = new ${name}();
expect(instance).toBeDefined();
});
it('should accept configuration options', () => {
const options = { enabled: true };
const instance = new ${name}(options);
expect(instance.options).toEqual(options);
});
});
describe('core functionality', () => {
it('should handle valid input', () => {
const input = { data: 'test' };
const result = ${name.toLowerCase()}Process(input);
expect(result.success).toBe(true);
});
it('should handle invalid input', () => {
const input = null;
expect(() => ${name.toLowerCase()}Process(input)).toThrow();
});
it('should handle edge cases', () => {
const edgeCases = ['', undefined, {}, []];
edgeCases.forEach(input => {
const result = ${name.toLowerCase()}Process(input);
expect(result).toBeDefined();
});
});
});
describe('async operations', () => {
it('should resolve successfully', async () => {
const result = await ${name.toLowerCase()}Async();
expect(result).toBeDefined();
});
it('should handle errors gracefully', async () => {
vi.spyOn(global, 'fetch').mockRejectedValue(new Error('Network error'));
await expect(${name.toLowerCase()}Async()).rejects.toThrow('Network error');
});
});
describe('integration', () => {
it('should work with dependencies', async () => {
const mockDep = vi.fn().mockResolvedValue({ data: 'mocked' });
const result = await ${name.toLowerCase()}WithDeps(mockDep);
expect(mockDep).toHaveBeenCalled();
expect(result.data).toBe('mocked');
});
});
});
// Stubs for the test (replace with real implementations)
class ${name} {
options: any;
constructor(options = {}) { this.options = options; }
}
function ${name.toLowerCase()}Process(input: any) { return { success: !!input }; }
async function ${name.toLowerCase()}Async() { return { data: 'async result' }; }
async function ${name.toLowerCase()}WithDeps(dep: any) { return dep(); }
`.trim(),
"error-handler": (name, opts) => `
// ${name} Error Handler
export class ${name}Error extends Error {
public readonly code: string;
public readonly statusCode: number;
public readonly details?: Record<string, unknown>;
constructor(
message: string,
code: string = '${name.toUpperCase()}_ERROR',
statusCode: number = 500,
details?: Record<string, unknown>
) {
super(message);
this.name = '${name}Error';
this.code = code;
this.statusCode = statusCode;
this.details = details;
Error.captureStackTrace(this, this.constructor);
}
toJSON() {
return {
name: this.name,
message: this.message,
code: this.code,
statusCode: this.statusCode,
details: this.details,
};
}
}
// Specific error types
export class ${name}NotFoundError extends ${name}Error {
constructor(resource: string, id: string) {
super(\`\${resource} with id '\${id}' not found\`, '${name.toUpperCase()}_NOT_FOUND', 404);
}
}
export class ${name}ValidationError extends ${name}Error {
constructor(message: string, details?: Record<string, unknown>) {
super(message, '${name.toUpperCase()}_VALIDATION', 400, details);
}
}
export class ${name}AuthError extends ${name}Error {
constructor(message: string = 'Authentication required') {
super(message, '${name.toUpperCase()}_AUTH', 401);
}
}
// Error handler middleware
export function handle${name}Errors(error: Error, req: any, res: any, next: any) {
if (error instanceof ${name}Error) {
return res.status(error.statusCode).json({
success: false,
error: {
code: error.code,
message: error.message,
details: error.details,
}
});
}
// Unknown error
console.error('[${name}] Unhandled error:', error);
res.status(500).json({
success: false,
error: {
code: 'INTERNAL_ERROR',
message: process.env.NODE_ENV === 'production'
? 'An unexpected error occurred'
: error.message,
}
});
}
// Helper to wrap async handlers
export function catch${name}Errors(fn: Function) {
return (req: any, res: any, next: any) => {
Promise.resolve(fn(req, res, next)).catch(next);
};
}
`.trim(),
"logger": (name, opts) => `
// ${name} Logger
type LogLevel = 'debug' | 'info' | 'warn' | 'error';
interface LogEntry {
timestamp: string;
level: LogLevel;
message: string;
context?: Record<string, unknown>;
}
class ${name}Logger {
private name: string;
private minLevel: LogLevel;
private readonly levels: Record<LogLevel, number> = {
debug: 0,
info: 1,
warn: 2,
error: 3,
};
constructor(name: string, minLevel: LogLevel = 'info') {
this.name = name;
this.minLevel = minLevel;
}
private shouldLog(level: LogLevel): boolean {
return this.levels[level] >= this.levels[this.minLevel];
}
private format(level: LogLevel, message: string, context?: Record<string, unknown>): LogEntry {
return {
timestamp: new Date().toISOString(),
level,
message: \`[\${this.name}] \${message}\`,
context,
};
}
private output(entry: LogEntry): void {
const output = JSON.stringify(entry);
switch (entry.level) {
case 'error':
console.error(output);
break;
case 'warn':
console.warn(output);
break;
default:
console.log(output);
}
}
debug(message: string, context?: Record<string, unknown>): void {
if (this.shouldLog('debug')) {
this.output(this.format('debug', message, context));
}
}
info(message: string, context?: Record<string, unknown>): void {
if (this.shouldLog('info')) {
this.output(this.format('info', message, context));
}
}
warn(message: string, context?: Record<string, unknown>): void {
if (this.shouldLog('warn')) {
this.output(this.format('warn', message, context));
}
}
error(message: string, error?: Error, context?: Record<string, unknown>): void {
if (this.shouldLog('error')) {
this.output(this.format('error', message, {
...context,
error: error ? { message: error.message, stack: error.stack } : undefined,
}));
}
}
child(name: string): ${name}Logger {
return new ${name}Logger(\`\${this.name}:\${name}\`, this.minLevel);
}
}
export const logger = new ${name}Logger('${name}',
(process.env.LOG_LEVEL as LogLevel) || 'info'
);
export default ${name}Logger;
`.trim(),
"auth-middleware": (name, opts) => `
import { Request, Response, NextFunction } from 'express';
import jwt from 'jsonwebtoken';
// Types
interface TokenPayload {
userId: string;
email: string;
role: 'user' | 'admin';
iat: number;
exp: number;
}
interface AuthRequest extends Request {
user?: TokenPayload;
}
// Config
const JWT_SECRET = process.env.JWT_SECRET || 'change-this-in-production';
const TOKEN_EXPIRY = '24h';
// Token functions
export function generateToken(payload: Omit<TokenPayload, 'iat' | 'exp'>): string {
return jwt.sign(payload, JWT_SECRET, { expiresIn: TOKEN_EXPIRY });
}
export function verifyToken(token: string): TokenPayload | null {
try {
return jwt.verify(token, JWT_SECRET) as TokenPayload;
} catch {
return null;
}
}
// Middleware
export function ${name.toLowerCase()}Auth(req: AuthRequest, res: Response, next: NextFunction) {
const authHeader = req.headers.authorization;
if (!authHeader?.startsWith('Bearer ')) {
return res.status(401).json({ error: 'No token provided' });
}
const token = authHeader.split(' ')[1];
const payload = verifyToken(token);
if (!payload) {
return res.status(401).json({ error: 'Invalid or expired token' });
}
req.user = payload;
next();
}
// Role-based access
export function requireRole(...roles: string[]) {
return (req: AuthRequest, res: Response, next: NextFunction) => {
if (!req.user) {
return res.status(401).json({ error: 'Authentication required' });
}
if (!roles.includes(req.user.role)) {
return res.status(403).json({ error: 'Insufficient permissions' });
}
next();
};
}
// Optional auth (continues even without token)
export function optionalAuth(req: AuthRequest, res: Response, next: NextFunction) {
const authHeader = req.headers.authorization;
if (authHeader?.startsWith('Bearer ')) {
const token = authHeader.split(' ')[1];
req.user = verifyToken(token) || undefined;
}
next();
}
export { AuthRequest, TokenPayload };
`.trim(),
"prisma-model": (name, opts) => `
// ${name} Prisma Model & Service
// Add to schema.prisma:
/*
model ${name} {
id String @id @default(cuid())
name String
email String @unique
status Status @default(ACTIVE)
metadata Json?
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
@@index([email])
@@index([status])
}
enum Status {
ACTIVE
INACTIVE
PENDING
}
*/
import { PrismaClient, ${name}, Prisma } from '@prisma/client';
const prisma = new PrismaClient();
export class ${name}Service {
async findById(id: string): Promise<${name} | null> {
return prisma.${name.toLowerCase()}.findUnique({ where: { id } });
}
async findByEmail(email: string): Promise<${name} | null> {
return prisma.${name.toLowerCase()}.findUnique({ where: { email } });
}
async findMany(params: {
skip?: number;
take?: number;
where?: Prisma.${name}WhereInput;
orderBy?: Prisma.${name}OrderByWithRelationInput;
}): Promise<${name}[]> {
return prisma.${name.toLowerCase()}.findMany(params);
}
async create(data: Prisma.${name}CreateInput): Promise<${name}> {
return prisma.${name.toLowerCase()}.create({ data });
}
async update(id: string, data: Prisma.${name}UpdateInput): Promise<${name}> {
return prisma.${name.toLowerCase()}.update({
where: { id },
data,
});
}
async delete(id: string): Promise<${name}> {
return prisma.${name.toLowerCase()}.delete({ where: { id } });
}
async count(where?: Prisma.${name}WhereInput): Promise<number> {
return prisma.${name.toLowerCase()}.count({ where });
}
}
export const ${name.toLowerCase()}Service = new ${name}Service();
`.trim(),
"docker-compose": (name, opts) => `
# ${name} Docker Compose Configuration
version: '3.8'
services:
${name.toLowerCase()}:
build:
context: .
dockerfile: Dockerfile
container_name: ${name.toLowerCase()}-app
restart: unless-stopped
ports:
- "\${PORT:-3000}:3000"
environment:
- NODE_ENV=production
- DATABASE_URL=postgresql://postgres:password@db:5432/${name.toLowerCase()}
- REDIS_URL=redis://redis:6379
depends_on:
- db
- redis
networks:
- ${name.toLowerCase()}-network
db:
image: postgres:16-alpine
container_name: ${name.toLowerCase()}-db
restart: unless-stopped
environment:
POSTGRES_USER: postgres
POSTGRES_PASSWORD: password
POSTGRES_DB: ${name.toLowerCase()}
volumes:
- postgres-data:/var/lib/postgresql/data
ports:
- "5432:5432"
networks:
- ${name.toLowerCase()}-network
redis:
image: redis:7-alpine
container_name: ${name.toLowerCase()}-redis
restart: unless-stopped
ports:
- "6379:6379"
volumes:
- redis-data:/data
networks:
- ${name.toLowerCase()}-network
volumes:
postgres-data:
redis-data:
networks:
${name.toLowerCase()}-network:
driver: bridge
`.trim(),
"github-action": (name, opts) => `
# ${name} GitHub Action Workflow
name: ${name} CI/CD
on:
push:
branches: [main]
pull_request:
branches: [main]
env:
NODE_VERSION: '20'
jobs:
test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: \${{ env.NODE_VERSION }}
cache: 'npm'
- name: Install dependencies
run: npm ci
- name: Run linter
run: npm run lint
- name: Run tests
run: npm test -- --coverage
- name: Upload coverage
uses: codecov/codecov-action@v3
with:
token: \${{ secrets.CODECOV_TOKEN }}
build:
needs: test
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: \${{ env.NODE_VERSION }}
cache: 'npm'
- name: Install & Build
run: |
npm ci
npm run build
- name: Upload artifact
uses: actions/upload-artifact@v4
with:
name: dist
path: dist/
deploy:
needs: build
if: github.ref == 'refs/heads/main'
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- name: Download artifact
uses: actions/download-artifact@v4
with:
name: dist
path: dist/
- name: Deploy to production
run: |
echo "Deploying to production..."
# Add deployment commands here
`.trim(),
"next-page": (name, opts) => `
// app/${name.toLowerCase()}/page.tsx
import { Suspense } from 'react';
// Types
interface ${name}PageProps {
params: { id: string };
searchParams: { [key: string]: string | string[] | undefined };
}
// Data Fetching
async function get${name}Data(id?: string) {
// Simulate network delay
await new Promise(resolve => setTimeout(resolve, 1000));
return {
id: id || 'default',
title: \`\${name} Page\`,
timestamp: new Date().toISOString(),
};
}
// Components
async function ${name}Content({ id }: { id?: string }) {
const data = await get${name}Data(id);
return (
<div className="p-6 bg-white dark:bg-gray-800 rounded-lg shadow-md">
<h1 className="text-2xl font-bold mb-4">{data.title}</h1>
<div className="space-y-4">
<p className="text-gray-600 dark:text-gray-300">
Loaded at: {data.timestamp}
</p>
<div className="p-4 bg-gray-50 dark:bg-gray-900 rounded border border-gray-200 dark:border-gray-700">
<pre className="text-sm font-mono overflow-auto">
{JSON.stringify(data, null, 2)}
</pre>
</div>
</div>
</div>
);
}
// Loading State
function ${name}Loading() {
return (
<div className="p-6 animate-pulse">
<div className="h-8 bg-gray-200 dark:bg-gray-700 rounded w-1/3 mb-4"></div>
<div className="space-y-4">
<div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-1/2"></div>
<div className="h-32 bg-gray-200 dark:bg-gray-700 rounded border"></div>
</div>
</div>
);
}
// Main Page Component
export default function ${name}Page({ params, searchParams }: ${name}PageProps) {
return (
<main className="container mx-auto py-8 px-4">
<Suspense fallback={<${name}Loading />}>
<${name}Content id={params.id} />
</Suspense>
</main>
);
}
// Metadata
export const metadata = {
title: '${name}',
description: 'Generated ${name} page',
};
`.trim(),
"vue-component": (name, opts) => `
<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
// Props
interface Props {
title?: string;
initialValue?: number;
}
const props = withDefaults(defineProps<Props>(), {
title: '${name} Component',
initialValue: 0
});
// Emits
const emit = defineEmits<{
(e: 'change', value: number): void;
(e: 'submit', payload: { value: number; timestamp: number }): void;
}>();
// State
const count = ref(props.initialValue);
const loading = ref(false);
// Computed
const doubled = computed(() => count.value * 2);
// Methods
function increment() {
count.value++;
emit('change', count.value);
}
function decrement() {
count.value--;
emit('change', count.value);
}
async function handleSubmit() {
loading.value = true;
try {
// Simulate async work
await new Promise(resolve => setTimeout(resolve, 500));
emit('submit', {
value: count.value,
timestamp: Date.now()
});
} finally {
loading.value = false;
}
}
// Lifecycle
onMounted(() => {
console.log('${name} mounted');
});
</script>
<template>
<div className="${name.toLowerCase()}-container">
<div className="card">
<header>
<h2>{{ title }}</h2>
</header>
<div className="content">
<p>Current count: {{ count }}</p>
<p class="secondary">Doubled: {{ doubled }}</p>
<div className="actions">
<button @click="decrement" :disabled="loading">-</button>
<span className="spacer"></span>
<button @click="increment" :disabled="loading">+</button>
</div>
<button
class="submit-btn"
@click="handleSubmit"
:disabled="loading"
>
<span v-if="loading">Processing...</span>
<span v-else>Submit</span>
</button>
</div>
</div>
</div>
</template>
<style scoped>
.${name.toLowerCase()}-container {
padding: 1rem;
}
.card {
border: 1px solid #e2e8f0;
border-radius: 0.5rem;
padding: 1.5rem;
max-width: 400px;
background: white;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
h2 {
margin-top: 0;
color: #1a202c;
}
.content {
margin-top: 1rem;
}
.secondary {
color: #718096;
font-size: 0.875rem;
}
.actions {
display: flex;
align-items: center;
margin: 1.5rem 0;
}
.spacer {
width: 1rem;
}
button {
padding: 0.5rem 1rem;
border-radius: 0.25rem;
cursor: pointer;
border: 1px solid #cbd5e0;
background: white;
transition: all 0.2s;
}
button:hover:not(:disabled) {
background: #f7fafc;
}
button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.submit-btn {
width: 100%;
background: #3182ce;
color: white;
border: none;
}
.submit-btn:hover:not(:disabled) {
background: #2b6cb0;
}
</style>
`.trim(),
"svelte-component": (name, opts) => `
<script lang="ts">
import { onMount } from 'svelte';
// Props
let { title = '${name}', initialCount = 0 } = $props();
// State (Runes)
let count = $state(initialCount);
let loading = $state(false);
// Derived state
let doubled = $derived(count * 2);
// Effects
$effect(() => {
if (count > 10) {
console.log('Count is getting high!');
}
});
// Methods
function increment() {
count += 1;
}
function decrement() {
count -= 1;
}
async function reset() {
loading = true;
await new Promise(r => setTimeout(r, 500));
count = initialCount;
loading = false;
}
onMount(() => {
console.log('Component mounted');
});
</script>
<div class="${name.toLowerCase()}">
<h2>{title}</h2>
<div class="stats">
<p>Value: <strong>{count}</strong></p>
<p class="muted">2x value: {doubled}</p>
</div>
<div class="controls">
<button onclick={decrement} disabled={loading} aria-label="Decrease">
-
</button>
<button onclick={increment} disabled={loading} aria-label="Increase">
+
</button>
</div>
<button class="reset" onclick={reset} disabled={loading}>
{loading ? 'Resetting...' : 'Reset'}
</button>
</div>
<style>
.${name.toLowerCase()} {
padding: 1.5rem;
border: 1px solid #eee;
border-radius: 8px;
max-width: 300px;
font-family: system-ui, sans-serif;
}
h2 {
margin: 0 0 1rem 0;
}
.stats {
background: #f9f9f9;
padding: 1rem;
border-radius: 4px;
margin-bottom: 1rem;
}
.controls {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.5rem;
margin-bottom: 0.5rem;
}
button {
padding: 0.5rem;
cursor: pointer;
}
.reset {
width: 100%;
background-color: #f0f0f0;
border: 1px solid #ccc;
}
</style>
`.trim(),
};
export function generateSnippetHandler(args: { pattern: string; name: string; options?: Record<string, string> }) {
const { pattern, name, options } = args;
const generator = snippetTemplates[pattern];
if (!generator) {
throw new Error("Unknown pattern: " + pattern);
}
const code = generator(name, options);
return {
content: [{
type: "text",
text: code
}]
};
}
// ============================================
// Regex Builder Tool
// ============================================
export const regexBuilderSchema = {
name: "regex_builder",
description: "Builds and explains regular expressions for common patterns",
inputSchema: z.object({
pattern: z.enum([
"email", "url", "phone", "date", "time", "ip", "uuid", "slug",
"password", "username", "hex-color", "credit-card", "ssn"
]).describe("The pattern type to match"),
options: z.object({
strict: z.boolean().optional(),
global: z.boolean().optional(),
caseInsensitive: z.boolean().optional()
}).optional()
})
};
const regexPatterns: Record<string, { pattern: string; explanation: string; examples: string[] }> = {
email: {
pattern: "^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\\\.[a-zA-Z]{2,}$",
explanation: "Matches standard email addresses",
examples: ["user@example.com", "name.surname@company.co.uk"]
},
url: {
pattern: "^(https?:\\\\/\\\\/)?(www\\\\.)?[-a-zA-Z0-9@:%._\\\\+~#=]{1,256}\\\\.[a-zA-Z0-9()]{1,6}\\\\b([-a-zA-Z0-9()@:%_\\\\+.~#?&//=]*)$",
explanation: "Matches HTTP/HTTPS URLs",
examples: ["https://example.com", "http://sub.domain.org/path?query=1"]
},
phone: {
pattern: "^\\\\+?[1-9]\\\\d{1,14}$",
explanation: "Matches international phone numbers (E.164 format)",
examples: ["+14155552671", "+442071234567"]
},
uuid: {
pattern: "^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$",
explanation: "Matches UUID v1-5",
examples: ["123e4567-e89b-12d3-a456-426614174000"]
},
slug: {
pattern: "^[a-z0-9]+(?:-[a-z0-9]+)*$",
explanation: "Matches URL-friendly slugs",
examples: ["hello-world", "my-blog-post-123"]
},
password: {
pattern: "^(?=.*[a-z])(?=.*[A-Z])(?=.*\\\\d)(?=.*[@$!%*?&])[A-Za-z\\\\d@$!%*?&]{8,}$",
explanation: "Matches strong passwords (8+ chars, upper, lower, number, special)",
examples: ["MyP@ssw0rd!", "Secure#123"]
}
};
export function regexBuilderHandler(args: any) {
const { pattern, options = {} } = args;
const regex = regexPatterns[pattern];
if (!regex) {
throw new Error(`Unknown pattern: ${pattern}`);
}
const flags = (options.global ? 'g' : '') + (options.caseInsensitive ? 'i' : '');
const output = `## Pattern
\`\`\`regex
/${regex.pattern}/${flags}
\`\`\`
## JavaScript Usage
\`\`\`javascript
const regex = new RegExp('${regex.pattern.replace(/\\/g, '\\\\')}', '${flags}');
// Test
regex.test('your-string');
// Match
'your-string'.match(regex);
\`\`\`
## Explanation
${regex.explanation}
## Valid Examples
${regex.examples.map(e => `- \`${e}\``).join('\n')}
## Quick Test
\`\`\`javascript
const regex = /${regex.pattern}/${flags};
${regex.examples.map(e => `console.log(regex.test('${e}')); // true`).join('\n')}
\`\`\`
`;
return { content: [{ type: "text", text: output }] };
}
// Export all
export const generatorTools = {
generateSnippetSchema,
generateSnippetHandler,
regexBuilderSchema,
regexBuilderHandler,
};