alchemy 0.2.4 → 0.3.0

package/lib/web/vitepress/home-page.js

@@ -0,0 +1,134 @@
+import alchemy from "alchemy";
+import yaml from "yaml";
+import { Document } from "../../ai/document";
+/**
+ * Parse YAML frontmatter to home page config
+ */
+export function parseHomePage(content) {
+    const match = content.match(/^---\n([\s\S]*?)\n---/);
+    if (!match) {
+        throw new Error("Invalid frontmatter format");
+    }
+    return yaml.parse(match[1]);
+}
+/**
+ * Resource for generating a VitePress homepage using AI.
+ * Creates an index.md file with the appropriate frontmatter and content
+ * based on the provided prompt and configuration.
+ *
+ * @example
+ * // Create a basic home page with just a prompt
+ * const homePage = await HomePage("docs-home", {
+ *   outDir: "./docs",
+ *   title: "My Project Documentation",
+ *   prompt: "Create a welcoming homepage for a JavaScript utility library with modern design"
+ * });
+ *
+ * @example
+ * // Create a home page with hero and features configuration
+ * const detailedHome = await HomePage("product-home", {
+ *   outDir: "./website",
+ *   title: "Product Landing Page",
+ *   prompt: "Create an engaging product page for our cloud database service",
+ *   hero: {
+ *     name: "CloudDB",
+ *     text: "The database built for the cloud era",
+ *     tagline: "Scalable, reliable, and developer-friendly",
+ *     image: "/images/cloud-db-logo.png",
+ *     actions: [
+ *       { text: "Get Started", link: "/guide/", theme: "brand" },
+ *       { text: "View on GitHub", link: "https://github.com/org/cloud-db" }
+ *     ]
+ *   },
+ *   features: [
+ *     {
+ *       icon: "🚀",
+ *       title: "Lightning Fast",
+ *       details: "Optimized for performance at any scale"
+ *     },
+ *     {
+ *       icon: "🔒",
+ *       title: "Secure by Default",
+ *       details: "Enterprise-grade security built in"
+ *     }
+ *   ]
+ * });
+ *
+ * @example
+ * // Create a home page with custom model settings
+ * const customHome = await HomePage("docs-home", {
+ *   outDir: "./docs",
+ *   title: "API Documentation",
+ *   prompt: "Create a technical homepage for our REST API documentation",
+ *   model: {
+ *     id: "gpt-4o",
+ *     provider: "openai"
+ *   },
+ *   temperature: 0.3,
+ *   systemPromptExtension: "Make sure to use technical terminology appropriate for developers."
+ * });
+ */
+export async function HomePage(id, props) {
+    // Build the system prompt with optional extension
+    const systemPrompt = `
+You are creating a VitePress homepage (index.md file).
+
+VitePress uses YAML frontmatter to configure the homepage.
+The homepage must have "layout: home" in its frontmatter.
+
+The homepage can include:
+- A hero section with name, text, tagline, image, and action buttons
+- A features section with multiple feature items (title, icon, details)
+- Additional markdown content below the frontmatter
+
+Follow these guidelines:
+1. Start with YAML frontmatter (--- at beginning and end)
+2. Include "layout: home" in the frontmatter
+3. Use the provided hero and features configuration if supplied
+4. Add any additional sections or content based on the user's prompt
+5. Create visually appealing, well-structured content
+6. Ensure all links are properly formatted
+7. Use appropriate markdown formatting for headings, lists, etc.
+
+${props.systemPromptExtension || ""}
+`;
+    // Convert hero and features to YAML strings if provided
+    const heroYaml = props.hero ? JSON.stringify(props.hero, null, 2) : "";
+    const featuresYaml = props.features
+        ? JSON.stringify(props.features, null, 2)
+        : "";
+    // Create the document using the AI Document resource
+    return Document(`${id}`, {
+        title: props.title,
+        path: props.outFile,
+        baseURL: props.baseURL,
+        apiKey: props.apiKey,
+        model: props.model ?? {
+            id: "claude-3-7-sonnet-latest",
+            provider: "anthropic",
+        },
+        temperature: props.temperature ?? 0.7,
+        prompt: await alchemy `
+${systemPrompt}
+
+Create a VitePress homepage based on the following description:
+${props.prompt}
+
+${props.hero
+            ? `Use this hero section configuration:
+\`\`\`json
+${heroYaml}
+\`\`\``
+            : ""}
+
+${props.features
+            ? `Use these features:
+\`\`\`json
+${featuresYaml}
+\`\`\``
+            : ""}
+    
+    The output should be a complete index.md file with proper YAML frontmatter and markdown content.
+    `,
+    });
+}

package/lib/{vitepress → web/vitepress}/index.d.ts

@@ -1,2 +1,3 @@
+export * from "./custom-theme";
 export * from "./home-page";
 export * from "./vitepress";

package/lib/{vitepress → web/vitepress}/index.js

@@ -1,2 +1,3 @@
+export * from "./custom-theme";
 export * from "./home-page";
 export * from "./vitepress";

package/lib/{vitepress → web/vitepress}/vitepress.d.ts

@@ -1,7 +1,6 @@
 import type { DefaultTheme, ThemeOptions } from "vitepress";
-import type { Context } from "../context";
-import { Resource } from "../resource";
-import type { HomePage } from "./home-page";
+import type { Context } from "../../context";
+import { Resource } from "../../resource";
 export interface VitePressProjectProps {
     /**
      * The name/path of the project
@@ -20,6 +19,13 @@ export interface VitePressProjectProps {
      * @default true
      */
     typescript?: boolean;
+    /**
+     * The scripts to add to the project
+     */
+    scripts?: Record<string, string>;
+    /**
+     * The tsconfig to use
+     */
     tsconfig?: {
         extends?: string;
         references?: string[];
@@ -46,17 +52,13 @@ export interface VitePressProjectProps {
      * The theme config to use
      */
     themeConfig: DefaultTheme.Config;
-    /**
-     * The home page configuration
-     */
-    home: HomePage;
     /**
      * Whether to delete the project folder during the delete phase
      * @default true
      */
     delete?: boolean;
     /**
-     * The directory to generate the docs in
+     * The directory to initialize the project in.
      *
      * @default {@link name}
      */

package/lib/{vitepress → web/vitepress}/vitepress.js

@@ -2,9 +2,8 @@ import { exec } from "child_process";
 import fs from "fs/promises";
 import path from "path";
 import { promisify } from "util";
-import yaml from "yaml";
-import { Folder, JsonFile, TextFile, TypeScriptFile } from "../fs";
-import { Resource } from "../resource";
+import { Folder, StaticJsonFile, StaticTextFile, StaticTypeScriptFile, } from "../../fs";
+import { Resource } from "../../resource";
 import { InstallDependencies, fixedDependencies } from "./dependencies";
 const execAsync = promisify(exec);
 export const VitePressProject = Resource("project::VitePressProject", {
@@ -25,18 +24,19 @@ export const VitePressProject = Resource("project::VitePressProject", {
         }
         return this.destroy();
     }
-    const cwd = (await Folder("dir", {
+    const cwd = path.relative(process.cwd(), (await Folder("dir", {
         path: dir,
         delete: props.delete,
-    })).path;
+    })).path);
     // Initialize package.json
-    await JsonFile(path.join(cwd, "package.json"), {
+    await StaticJsonFile(path.join(cwd, "package.json"), {
         name: props.name,
         scripts: {
             "docs:gen": "bun alchemy.run.ts",
             "docs:dev": "vitepress dev",
             "docs:build": "vitepress build",
             "docs:preview": "vitepress preview",
+            ...props.scripts,
         },
         dependencies: fixedDependencies(props.dependencies || {}),
         devDependencies: fixedDependencies(props.devDependencies || {}),
@@ -56,13 +56,12 @@ export const VitePressProject = Resource("project::VitePressProject", {
     await Folder(path.join(cwd, ".vitepress"));
     await Folder(path.join(cwd, ".vitepress", "theme"));
     await Promise.all([
-        TextFile(path.join(cwd, ".gitignore"), `.vitepress/cache\n`),
-        JsonFile(path.join(cwd, "tsconfig.json"), {
+        StaticTextFile(path.join(cwd, ".gitignore"), `.vitepress/cache\n`),
+        StaticJsonFile(path.join(cwd, "tsconfig.json"), {
             extends: props.tsconfig?.extends,
             references: props.tsconfig?.references?.map((path) => ({ path })),
             compilerOptions: props.tsconfig?.compilerOptions,
         }),
-        TextFile(path.join(cwd, "index.md"), `---\n${yaml.stringify(props.home)}---\n`),
         //       TypeScriptFile(
         //         path.join(cwd, "alchemy.run.ts"),
         //         `import alchemy from "alchemy";
@@ -82,7 +81,7 @@ export const VitePressProject = Resource("project::VitePressProject", {
         // });
         // `,
         //       ),
-        TypeScriptFile(path.join(cwd, ".vitepress", "theme", "index.ts"), `import TwoslashFloatingVue from "@shikijs/vitepress-twoslash/client";
+        StaticTypeScriptFile(path.join(cwd, ".vitepress", "theme", "index.ts"), `import TwoslashFloatingVue from "@shikijs/vitepress-twoslash/client";
 import "@shikijs/vitepress-twoslash/style.css";
 import type { Theme as ThemeConfig } from "vitepress";
 import Theme from "vitepress/theme-without-fonts";
@@ -95,7 +94,7 @@ export default {
   },
 } satisfies ThemeConfig;
   `),
-        TextFile(path.join(cwd, ".vitepress", "theme", "style.css"), `/**
+        StaticTextFile(path.join(cwd, ".vitepress", "theme", "style.css"), `/**
 * Customize default theme styling by overriding CSS variables:
 * https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css
 */
@@ -234,7 +233,7 @@ export default {
   --docsearch-primary-color: var(--vp-c-brand-1) !important;
 }
 `),
-        TypeScriptFile(path.join(cwd, ".vitepress", "config.mts"), `import { transformerTwoslash } from "@shikijs/vitepress-twoslash";
+        StaticTypeScriptFile(path.join(cwd, ".vitepress", "config.mts"), `import { transformerTwoslash } from "@shikijs/vitepress-twoslash";
 import footnotePlugin from "markdown-it-footnote";
 import { defineConfig } from "vitepress";
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "alchemy",
-  "version": "0.2.4",
+  "version": "0.3.0",
   "type": "module",
   "module": "./lib/index.js",
   "scripts": {
@@ -14,13 +14,17 @@
     "./aws": "./lib/aws/index.js",
     "./aws/oidc": "./lib/aws/oidc/index.js",
     "./cloudflare": "./lib/cloudflare/index.js",
+    "./dns": "./lib/dns/index.js",
     "./esbuild": "./lib/esbuild/index.js",
     "./fs": "./lib/fs/index.js",
     "./github": "./lib/github/index.js",
     "./shadcn": "./lib/shadcn/index.js",
     "./stripe": "./lib/stripe/index.js",
     "./test/bun": "./lib/test/bun.js",
-    "./vite": "./lib/vite/index.js"
+    "./web/astro": "./lib/web/astro/index.js",
+    "./web/tailwind": "./lib/web/tailwind/index.js",
+    "./web/vite": "./lib/web/vite/index.js",
+    "./web/vitepress": "./lib/web/vitepress/index.js"
   },
   "peerDependencies": {
     "@ai-sdk/openai": "^1.1.9",

package/src/ai/astro-file.ts

@@ -0,0 +1,288 @@
+import { generateText } from "ai";
+import fs from "node:fs/promises";
+import path from "node:path";
+import prettier from "prettier";
+import type { Context } from "../context";
+import { Resource } from "../resource";
+import type { Secret } from "../secret";
+import { ignore } from "../util/ignore";
+import { type ModelConfig, createModel } from "./client";
+
+/**
+ * Properties for creating or updating an AstroFile
+ */
+export interface AstroFileProps {
+  /**
+   * Path to the Astro file
+   */
+  path: string;
+
+  /**
+   * Base URL for the OpenAI API
+   * @default 'https://api.openai.com/v1'
+   */
+  baseURL?: string;
+
+  /**
+   * Prompt for generating content
+   * Use alchemy template literals to include file context:
+   * @example
+   * prompt: await alchemy`
+   *   Generate an Astro component using:
+   *   ${alchemy.file("src/types.ts")}
+   * `
+   */
+  prompt: string;
+
+  /**
+   * System prompt for the model
+   * This is used to provide instructions to the model about how to format the response
+   * The default system prompt instructs the model to return Astro code inside ```astro fences
+   * @default "You are an Astro component generator. Create Astro components based on the user's requirements. Your response MUST include only Astro code inside ```astro fences. Do not include any other text, explanations, or multiple code blocks."
+   */
+  system?: string;
+
+  /**
+   * OpenAI API key to use for generating content
+   * If not provided, will use OPENAI_API_KEY environment variable
+   */
+  apiKey?: Secret;
+
+  /**
+   * Model configuration
+   */
+  model?: ModelConfig;
+
+  /**
+   * Temperature for controlling randomness in generation.
+   * Higher values (e.g., 0.8) make output more random,
+   * lower values (e.g., 0.2) make it more deterministic.
+   * @default 0.7
+   */
+  temperature?: number;
+
+  /**
+   * Prettier configuration to use for formatting the Astro code
+   * If not provided, will use the default Prettier configuration
+   */
+  prettierConfig?: prettier.Options;
+}
+
+/**
+ * An Astro file that can be created, updated, and deleted
+ */
+export interface AstroFile extends AstroFileProps, Resource<"ai::AstroFile"> {
+  /**
+   * Content of the Astro file
+   */
+  content: string;
+
+  /**
+   * Time at which the file was created
+   */
+  createdAt: number;
+
+  /**
+   * Time at which the file was last updated
+   */
+  updatedAt: number;
+}
+
+/**
+ * Default system prompt for Astro file generation
+ */
+const DEFAULT_ASTRO_SYSTEM_PROMPT =
+  "You are an Astro component generator. Create Astro components based on the user's requirements. Your response MUST include only Astro code inside ```astro fences. Do not include any other text, explanations, or multiple code blocks.";
+
+/**
+ * Resource for generating Astro files using AI models.
+ * Extracts Astro code from between ```astro fences, validates the response,
+ * and formats the code with Prettier.
+ *
+ * @example
+ * // Create a simple Astro component
+ * const header = await AstroFile("header", {
+ *   path: "./src/components/Header.astro",
+ *   prompt: await alchemy`
+ *     Generate an Astro header component with:
+ *     - Site logo
+ *     - Navigation menu with Home, About, Services, Contact links
+ *     - Mobile responsive design
+ *     - Dark/light mode toggle
+ *   `,
+ *   model: {
+ *     id: "gpt-4o",
+ *     provider: "openai"
+ *   }
+ * });
+ *
+ * @example
+ * // Generate an Astro page with data fetching
+ * const blogPost = await AstroFile("blog-post", {
+ *   path: "./src/pages/blog/[slug].astro",
+ *   prompt: await alchemy`
+ *     Create an Astro blog post page that:
+ *     - Uses getStaticPaths to generate pages from a CMS
+ *     - Renders markdown content
+ *     - Includes author info, publication date, and related posts
+ *     - Has social sharing buttons
+ *
+ *     Use the following types:
+ *     ${alchemy.file("src/types/Blog.ts")}
+ *   `,
+ *   temperature: 0.2,
+ *   prettierConfig: {
+ *     semi: false,
+ *     singleQuote: true,
+ *     printWidth: 120
+ *   }
+ * });
+ *
+ * @example
+ * // Generate a layout with custom system prompt
+ * const mainLayout = await AstroFile("main-layout", {
+ *   path: "./src/layouts/MainLayout.astro",
+ *   prompt: await alchemy`
+ *     Create the main layout for an Astro site that:
+ *     - Includes common head metadata and SEO optimization
+ *     - Has slots for page content, header, and footer
+ *     - Imports and uses the Header and Footer components
+ *     - Sets up viewport and responsive configurations
+ *   `,
+ *   system: "You are an expert Astro developer. Create a single Astro layout file inside ```astro fences with no additional text. Follow Astro best practices and include proper typing in the frontmatter section.",
+ *   model: {
+ *     id: "claude-3-opus-20240229",
+ *     provider: "anthropic"
+ *   }
+ * });
+ */
+export const AstroFile = Resource(
+  "ai::AstroFile",
+  async function (
+    this: Context<AstroFile>,
+    id: string,
+    props: AstroFileProps,
+  ): Promise<AstroFile> {
+    // Ensure directory exists
+    await fs.mkdir(path.dirname(props.path), { recursive: true });
+
+    if (this.phase === "delete") {
+      try {
+        await fs.unlink(props.path);
+      } catch (error: any) {
+        // Ignore if file doesn't exist
+        if (error.code !== "ENOENT") {
+          throw error;
+        }
+      }
+      return this.destroy();
+    }
+
+    // Use provided system prompt or default
+    const system = props.system || DEFAULT_ASTRO_SYSTEM_PROMPT;
+
+    // Generate initial content
+    const { text } = await generateText({
+      model: createModel(props),
+      prompt: props.prompt,
+      system,
+      providerOptions: props.model?.options,
+      ...(props.temperature === undefined
+        ? {}
+        : { temperature: props.temperature }),
+    });
+
+    // Extract and validate Astro code
+    let { code, error } = await extractAstroCode(text);
+
+    // Re-prompt if there are validation errors
+    if (error) {
+      const errorSystem = `${system}\n\nERROR: ${error}\n\nPlease try again and ensure your response contains exactly one Astro code block inside \`\`\`astro fences.`;
+
+      const { text: retryText } = await generateText({
+        model: createModel(props),
+        prompt: props.prompt,
+        system: errorSystem,
+        providerOptions: props.model?.options,
+        ...(props.temperature === undefined
+          ? {}
+          : { temperature: props.temperature }),
+      });
+
+      const retryResult = await extractAstroCode(retryText);
+
+      if (retryResult.error) {
+        throw new Error(
+          `Failed to generate valid Astro code: ${retryResult.error}`,
+        );
+      }
+
+      code = retryResult.code;
+    }
+
+    // Format the code with Prettier
+    try {
+      // Set default parser to astro
+      const prettierOptions: prettier.Options = {
+        parser: "astro",
+        ...props.prettierConfig,
+      };
+
+      // Format the code
+      code = await prettier.format(code, prettierOptions);
+    } catch (error) {
+      // If Prettier formatting fails, just use the unformatted code
+      console.warn("Failed to format Astro code with Prettier:", error);
+    }
+
+    if (this.phase === "update" && props.path !== this.props.path) {
+      await ignore("ENOENT", () => fs.unlink(this.props.path));
+    }
+
+    // Write content to file
+    await fs.writeFile(props.path, code);
+
+    // Get file stats for timestamps
+    const stats = await fs.stat(props.path);
+
+    // Return the resource
+    return this({
+      ...props,
+      content: code,
+      createdAt: stats.birthtimeMs,
+      updatedAt: stats.mtimeMs,
+    });
+  },
+);
+
+/**
+ * Extracts Astro code from between ```astro fences
+ * Validates that exactly one Astro code block exists
+ *
+ * @param text The text to extract Astro code from
+ * @returns The extracted Astro code or error message
+ */
+async function extractAstroCode(
+  text: string,
+): Promise<{ code: string; error?: string }> {
+  const astroCodeRegex = /```astro\s*([\s\S]*?)```/g;
+  const matches = Array.from(text.matchAll(astroCodeRegex));
+
+  if (matches.length === 0) {
+    return {
+      code: "",
+      error:
+        "No Astro code block found in the response. Please include your code within ```astro fences.",
+    };
+  }
+
+  if (matches.length > 1) {
+    return {
+      code: "",
+      error:
+        "Multiple Astro code blocks found in the response. Please provide exactly one code block within ```astro fences.",
+    };
+  }
+
+  return { code: matches[0][1].trim() };
+}

package/src/ai/client.ts

@@ -1,4 +1,5 @@
-import { createOpenAICompatible } from "@ai-sdk/openai-compatible";
+import { anthropic } from "@ai-sdk/anthropic";
+import { openai } from "@ai-sdk/openai";
 import type { Secret } from "../secret";
 
 /**
@@ -20,7 +21,7 @@ export interface ModelConfig {
   /**
    * Model-specific options
    */
-  options?: Record<string, unknown>;
+  options?: Record<string, any>;
 }
 
 /**
@@ -48,31 +49,10 @@ export interface ClientConfig {
 /**
  * Creates an OpenAI-compatible client with the given configuration
  */
-export function createClient(config: ClientConfig) {
-  // Get API key from props or environment
-  const apiKey = config.apiKey?.unencrypted || process.env.OPENAI_API_KEY;
-  if (!apiKey) {
-    throw new Error("OpenAI API key is required");
+export function createModel(config: ClientConfig) {
+  if (config.model?.provider === "anthropic") {
+    return anthropic(config.model?.id ?? "claude-3-7-sonnet-latest");
+  } else {
+    return openai(config.model?.id ?? "gpt-4o");
   }
-
-  // Initialize OpenAI compatible provider
-  return createOpenAICompatible({
-    name: config.model?.provider || "openai",
-    apiKey,
-    baseURL: config.baseURL || "https://api.openai.com/v1",
-  });
-}
-
-/**
- * Gets the model ID from the configuration or returns the default
- */
-export function getModelId(config: ClientConfig): string {
-  return config.model?.id || "gpt-4o";
-}
-
-/**
- * Gets the model options from the configuration
- */
-export function getModelOptions(config: ClientConfig): Record<string, unknown> {
-  return config.model?.options || {};
 }