@goldencomm/create-baseline 0.0.1

package/README.md

@@ -0,0 +1,88 @@
+# @goldencomm/create-baseline
+
+Scaffolds a **standalone project** from a Baseline template — copies the template,
+then rewires it into its own project (names, README, the design-system deps, and
+platform-specific fixups). Zero dependencies; Node built-ins only.
+
+## Usage
+
+### Standalone (npm)
+
+Because the package is named `@goldencomm/create-baseline`, npm's `create` prefix
+mapping means the exact command is:
+
+```bash
+npm create @goldencomm/baseline <platform> <name>
+# flags need a `--` separator so npm doesn't eat them:
+npm create @goldencomm/baseline <platform> <name> -- --dir ../my-app --ds-version ^0.0.1
+```
+
+(`pnpm create @goldencomm/baseline …` and `npx @goldencomm/create-baseline …` work too.)
+
+### Inside the monorepo
+
+```bash
+pnpm create-baseline <platform> <name> [options]
+# or directly:
+node tools/create-baseline/index.mjs <platform> <name> [options]
+```
+
+| Platform | Produces |
+|---|---|
+| `next` | Next.js App Router app (React + `ds-core`/`ds-react`) |
+| `shopify` | Shopify OS 2.0 theme (vendored `baseline.css`) |
+| `wordpress` | WordPress site scaffold (Composer + DDEV) |
+| `dotnet` | *(no scaffold)* — prints how to consume `ds-html` + `baseline.css` (Q-005) |
+
+**Options**
+
+| Flag | Default | Meaning |
+|---|---|---|
+| `--dir <path>` | `./<name>` | Target directory |
+| `--ds-version <ver>` | `^0.0.1` | Version pinned for the `@goldencomm/ds-*` deps |
+| `--force` | — | Allow scaffolding into a non-empty directory |
+
+```bash
+pnpm create-baseline shopify acme-store
+pnpm create-baseline next acme-proto --dir ../acme-proto --ds-version ^0.1.0
+pnpm create-baseline wordpress acme-site
+```
+
+## What it does
+
+1. **Copies** the template. Two auto-detected source modes:
+   - **monorepo** — inside the design-system repo it copies the committed files of
+     `baselines/<platform>` via `git ls-files` (so `node_modules`, `dist`, `.next`,
+     `.turbo`, `vendor` are excluded automatically);
+   - **bundled** — installed from npm it copies the `templates/` snapshot that the
+     `prepack` script (`scripts/bundle-templates.mjs`) baked into the package at
+     publish time from the same `git ls-files` listing. (npm strips `.gitignore`/
+     `.npmrc`/`.npmignore` from tarballs, so those are stored renamed —
+     `_gitignore` etc. — and restored on scaffold.)
+2. **Rewires** identifiers: `package.json`/`composer.json` name + description, the
+   README title, and the Shopify `theme_name`.
+3. **Rewrites DS deps** — any `workspace:*` (`@goldencomm/ds-core`, `ds-react`) becomes
+   `--ds-version` so the project resolves them from npm.
+4. **Platform fixups:**
+   - **shopify** — repoints the `dev` token-watch at `node_modules/@goldencomm/ds-core`.
+   - **wordpress** — removes the monorepo bind-mount (`.ddev/docker-compose.packages.yaml`),
+     adds Composer `require` + VCS repos for `goldencomm/wp-theme` and
+     `goldencomm/wp-blocks-plugin`, renames the DDEV project, and updates `seed.sh`
+     (theme slug → `wp-theme`, site host → `<name>.ddev.site`).
+
+## Standalone readiness
+
+- **Shopify** — works **now**; `baseline.css` is vendored into `assets/`.
+- **Next** — needs `@goldencomm/ds-core` + `ds-react` on npm before `npm install`
+  resolves (they ship at `0.0.1`).
+- **WordPress** — `goldencomm/wp-theme` + `wp-blocks-plugin` are **not published as
+  Composer packages yet**; `composer install` currently requires monorepo/Bitbucket
+  VCS access and your own gitignored `auth.json` for the ACF/Gravity/Bitbucket
+  credentials (never copied by the scaffolder). The scaffolder prints this caveat.
+
+## Publishing notes
+
+- `templates/` is generated by `prepack` and gitignored — never commit it; it is
+  rebuilt from the committed baselines on every `pnpm pack` / `npm publish`.
+- Packing/publishing must therefore happen from a monorepo checkout (prepack runs
+  `git ls-files`).

package/index.mjs

@@ -0,0 +1,296 @@
+#!/usr/bin/env node
+/**
+ * create-baseline — scaffold a standalone project from a Baseline template.
+ *
+ *   create-baseline <platform> <name> [--dir <path>] [--ds-version <ver>] [--force]
+ *   npm create @goldencomm/baseline <platform> <name>       (outside the monorepo)
+ *
+ * Platforms: next | wordpress | shopify   (dotnet prints guidance — see Q-005).
+ *
+ * Template source (auto-detected):
+ *   - monorepo mode — inside the design-system repo, copies the committed files
+ *     of `baselines/<platform>` (via `git ls-files`, so node_modules/dist/vendor/
+ *     .next/.turbo are excluded for free);
+ *   - bundled mode — standalone (installed from npm), copies the `templates/`
+ *     snapshot bundled into the package at prepack time.
+ *
+ * Either way it then rewires the copy into a standalone project: package/composer
+ * names, README title, the DS `workspace:*` deps (-> --ds-version), and
+ * platform-specific fixups (e.g. the WP monorepo bind-mount -> a Composer require).
+ *
+ * Zero dependencies — Node built-ins only.
+ */
+import { execFileSync } from "node:child_process";
+import {
+  existsSync, mkdirSync, copyFileSync, readFileSync, writeFileSync, readdirSync, rmSync,
+} from "node:fs";
+import { dirname, resolve, join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const HERE = dirname(fileURLToPath(import.meta.url));
+const REPO_ROOT = resolve(HERE, "../..");
+
+const PLATFORMS = {
+  next: { dir: "next", kind: "npm" },
+  shopify: { dir: "shopify-theme", kind: "npm" },
+  wordpress: { dir: "wordpress", kind: "composer" },
+};
+
+// ---- arg parsing -----------------------------------------------------------
+const argv = process.argv.slice(2);
+function takeFlag(name, hasValue = true) {
+  const i = argv.indexOf(name);
+  if (i === -1) return undefined;
+  const val = hasValue ? argv[i + 1] : true;
+  argv.splice(i, hasValue ? 2 : 1);
+  return val;
+}
+const force = takeFlag("--force", false);
+const dirFlag = takeFlag("--dir");
+const dsVersion = takeFlag("--ds-version") || "^0.0.1";
+const [platform, nameArg] = argv;
+
+function die(msg) {
+  console.error(`\n✖ ${msg}\n`);
+  process.exit(1);
+}
+function usage() {
+  console.log(`
+create-baseline — scaffold a standalone project from a Baseline baseline
+
+Usage:
+  create-baseline <platform> <name> [options]
+
+Platforms:
+  next        Next.js App Router app (React + ds-core/ds-react)
+  shopify     Shopify OS 2.0 theme (vendored baseline.css)
+  wordpress   WordPress site scaffold (Composer + DDEV)
+  dotnet      (no scaffold — prints how to consume ds-html + baseline.css)
+
+Options:
+  --dir <path>         target directory (default: ./<name>)
+  --ds-version <ver>   version for @goldencomm/ds-* deps (default: ^0.0.1)
+  --force              allow scaffolding into a non-empty directory
+`);
+}
+
+if (!platform || platform === "--help" || platform === "-h") {
+  usage();
+  process.exit(platform ? 0 : 1);
+}
+
+if (platform === "dotnet") {
+  console.log(`
+.NET has no scaffolded baseline (decision Q-005). Consume the shared contract:
+
+  1. Vendor @goldencomm/ds-core's baseline.css into your app's wwwroot and link it.
+  2. Render components with the gcds-* markup from packages/ds-html
+     (e.g. <button class="gcds-button gcds-button--primary gcds-button--md">),
+     directly or via a Razor partial.
+
+See packages/ds-html/README.md for the full guide.
+`);
+  process.exit(0);
+}
+
+const cfg = PLATFORMS[platform];
+if (!cfg) die(`Unknown platform "${platform}". Use: next | wordpress | shopify | dotnet`);
+if (!nameArg) die(`Missing <name>. Try: create-baseline ${platform} my-project`);
+
+// name derivations
+const name = nameArg.trim();
+const slug = (name.includes("/") ? name.split("/").pop() : name).toLowerCase();
+if (!/^[a-z0-9][a-z0-9._-]*$/.test(slug)) {
+  die(`"${name}" isn't a safe project slug. Use lowercase letters, digits, - . _`);
+}
+const npmName = name.toLowerCase();
+const composerName = name.includes("/") ? name.toLowerCase() : `goldencomm/${slug}`;
+const description = `${slug} — scaffolded from the Baseline ${platform} baseline.`;
+
+// ---- template source: monorepo baselines/ or bundled templates/ -------------
+// prepack stores npm-packlist-hostile basenames renamed; restore them on copy.
+// Keep in sync with PACK_SAFE_NAMES in scripts/bundle-templates.mjs.
+const RESTORE_NAMES = {
+  _gitignore: ".gitignore",
+  _npmrc: ".npmrc",
+  _npmignore: ".npmignore",
+};
+
+/** Monorepo mode: the committed files of baselines/<dir>, or null if unavailable. */
+function monorepoSource() {
+  const root = join(REPO_ROOT, "baselines", cfg.dir);
+  if (!existsSync(root)) return null;
+  try {
+    const tracked = execFileSync("git", ["-C", REPO_ROOT, "ls-files", `baselines/${cfg.dir}`], {
+      encoding: "utf8", stdio: ["ignore", "pipe", "ignore"],
+    }).split("\n").filter(Boolean);
+    if (tracked.length === 0) return null;
+    const prefix = `baselines/${cfg.dir}/`;
+    return {
+      mode: "monorepo", root,
+      files: tracked.map((f) => ({ src: f.slice(prefix.length), dest: f.slice(prefix.length) })),
+    };
+  } catch {
+    return null;
+  }
+}
+
+/** Bundled mode: the templates/<dir> snapshot shipped in the npm package. */
+function bundledSource() {
+  const root = join(HERE, "templates", cfg.dir);
+  if (!existsSync(root)) return null;
+  const files = [];
+  (function walk(sub) {
+    for (const e of readdirSync(join(root, sub), { withFileTypes: true })) {
+      const rel = sub ? `${sub}/${e.name}` : e.name;
+      if (e.isDirectory()) walk(rel);
+      else files.push({ src: rel, dest: RESTORE_NAMES[e.name] ? rel.slice(0, rel.length - e.name.length) + RESTORE_NAMES[e.name] : rel });
+    }
+  })("");
+  return files.length > 0 ? { mode: "bundled", root, files } : null;
+}
+
+const source = monorepoSource() || bundledSource();
+if (!source) {
+  die(`No template found for "${platform}" — neither the monorepo's baselines/${cfg.dir} nor a bundled templates/${cfg.dir}. If running from a git checkout, run \`node scripts/bundle-templates.mjs\` or use the published @goldencomm/create-baseline package.`);
+}
+
+const target = resolve(process.cwd(), dirFlag || slug);
+if (existsSync(target) && readdirSync(target).length > 0 && !force) {
+  die(`Target ${target} exists and is not empty. Pass --force to scaffold anyway.`);
+}
+
+// ---- helpers ---------------------------------------------------------------
+const tFile = (rel) => join(target, rel);
+const has = (rel) => existsSync(tFile(rel));
+function editJson(rel, fn) {
+  const p = tFile(rel);
+  const json = JSON.parse(readFileSync(p, "utf8"));
+  fn(json);
+  writeFileSync(p, JSON.stringify(json, null, 2) + "\n");
+}
+function patch(rel, replacers) {
+  const p = tFile(rel);
+  let s = readFileSync(p, "utf8");
+  for (const [find, repl] of replacers) s = s.replace(find, repl);
+  writeFileSync(p, s);
+}
+function setReadmeTitle(rel, title) {
+  if (has(rel)) patch(rel, [[/^#[^\n]*/, `# ${title}`]]);
+}
+function rewriteWorkspaceDeps(pkg) {
+  for (const field of ["dependencies", "devDependencies", "peerDependencies"]) {
+    const deps = pkg[field];
+    if (!deps) continue;
+    for (const k of Object.keys(deps)) {
+      if (typeof deps[k] === "string" && deps[k].startsWith("workspace:")) deps[k] = dsVersion;
+    }
+  }
+}
+
+// ---- copy ------------------------------------------------------------------
+mkdirSync(target, { recursive: true });
+for (const { src, dest } of source.files) {
+  const out = tFile(dest);
+  mkdirSync(dirname(out), { recursive: true });
+  copyFileSync(join(source.root, src), out);
+}
+
+// ---- rewire ----------------------------------------------------------------
+const nextSteps = [];
+
+if (cfg.kind === "npm") {
+  editJson("package.json", (pkg) => {
+    pkg.name = npmName;
+    pkg.description = description;
+    rewriteWorkspaceDeps(pkg);
+    if (platform === "shopify" && pkg.scripts?.dev) {
+      // monorepo watch path no longer exists standalone
+      pkg.scripts.dev = "node --watch-path=node_modules/@goldencomm/ds-core/dist scripts/sync-tokens.mjs";
+    }
+  });
+  setReadmeTitle("README.md", npmName);
+}
+
+if (platform === "shopify" && has("config/settings_schema.json")) {
+  editJson("config/settings_schema.json", (schema) => {
+    const info = Array.isArray(schema) ? schema.find((s) => s.name === "theme_info") : null;
+    if (info) info.theme_name = slug;
+  });
+  nextSteps.push(
+    "Shopify theme works immediately — baseline.css is vendored.",
+    "  Run:  cd " + target + "  &&  shopify theme dev --store your-store.myshopify.com",
+    `  (Once @goldencomm/ds-core is published, 'npm i' enables re-syncing tokens; until then assets/baseline.css is the pinned copy.)`,
+  );
+}
+
+if (platform === "next") {
+  nextSteps.push(
+    `Next.js app depends on @goldencomm/ds-core@${dsVersion} + ds-react@${dsVersion} (npm).`,
+    "  cd " + target + "  &&  npm install  &&  npm run dev",
+  );
+}
+
+if (cfg.kind === "composer") {
+  // 1) drop the monorepo-only bind-mount
+  const bindMount = ".ddev/docker-compose.packages.yaml";
+  if (has(bindMount)) rmSync(tFile(bindMount));
+
+  // 2) composer.json — name/description + require the theme & blocks plugin from VCS
+  editJson("composer.json", (c) => {
+    c.name = composerName;
+    c.description = description;
+    c.repositories = c.repositories || [];
+    c.repositories.push(
+      {
+        type: "package",
+        package: {
+          name: "goldencomm/wp-theme", type: "wordpress-theme", version: "dev-master",
+          source: { url: "https://bitbucket.org/goldencomm/wp-theme.git", type: "git", reference: "master" },
+        },
+      },
+      {
+        type: "package",
+        package: {
+          name: "goldencomm/wp-blocks-plugin", type: "wordpress-plugin", version: "dev-master",
+          source: { url: "https://bitbucket.org/goldencomm/wp-blocks-plugin.git", type: "git", reference: "master" },
+        },
+      },
+    );
+    c.require = c.require || {};
+    c.require["goldencomm/wp-theme"] = "dev-master";
+    c.require["goldencomm/wp-blocks-plugin"] = "dev-master";
+  });
+
+  // 3) .ddev project name
+  if (has(".ddev/config.yaml")) patch(".ddev/config.yaml", [[/^name:\s*.*$/m, `name: ${slug}`]]);
+
+  // 4) seed.sh — Composer installs the theme as "wp-theme"; site host follows the ddev name
+  if (has("scripts/seed.sh")) {
+    patch("scripts/seed.sh", [
+      [/baseline-wordpress\.ddev\.site/g, `${slug}.ddev.site`],
+      [/wp theme activate baseline\b/, "wp theme activate wp-theme"],
+    ]);
+  }
+
+  setReadmeTitle("README.md", slug);
+
+  nextSteps.push(
+    "WordPress scaffold rewired to install the theme + blocks plugin via Composer.",
+    "",
+    "  IMPORTANT: goldencomm/wp-theme and goldencomm/wp-blocks-plugin are NOT published",
+    "  as Composer packages yet — `composer install` currently requires monorepo/Bitbucket",
+    "  VCS access (the Phase 6 repo split is still pending). Until then this scaffold only",
+    "  resolves for GoldenComm developers with Bitbucket access + their own auth.json with",
+    "  Composer creds (never copied by the scaffolder — add your own).",
+    "",
+    "  Then:  cd " + target + "  &&  ddev start  &&  ddev composer install  &&  ddev exec bash scripts/seed.sh",
+  );
+}
+
+// ---- report ----------------------------------------------------------------
+console.log(`\n✓ Scaffolded ${platform} baseline → ${target}`);
+console.log(`  name: ${cfg.kind === "composer" ? composerName : npmName}   ds-version: ${dsVersion}   files: ${source.files.length}   (templates: ${source.mode})\n`);
+console.log("Next steps:");
+for (const line of nextSteps) console.log("  " + line);
+console.log("");

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@goldencomm/create-baseline",
+  "version": "0.0.1",
+  "type": "module",
+  "description": "Scaffold a standalone GoldenComm Baseline project — Next.js app, Shopify OS 2.0 theme, or WordPress site — wired to the @goldencomm/ds-* design-system packages. Run as `npm create @goldencomm/baseline`.",
+  "bin": {
+    "create-baseline": "./index.mjs"
+  },
+  "files": [
+    "index.mjs",
+    "templates"
+  ],
+  "keywords": [
+    "create",
+    "scaffold",
+    "starter",
+    "design-system",
+    "baseline",
+    "nextjs",
+    "shopify",
+    "wordpress",
+    "goldencomm"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=20.0.0"
+  },
+  "author": "GoldenComm",
+  "license": "UNLICENSED",
+  "repository": {
+    "type": "git",
+    "url": "git@bitbucket.org:goldencomm/design-system.git",
+    "directory": "tools/create-baseline"
+  },
+  "scripts": {
+    "build": "echo \"(no build — single zero-dep mjs entry)\"",
+    "clean": "node -e \"require('fs').rmSync('templates',{recursive:true,force:true})\"",
+    "lint": "echo \"(no lint yet)\"",
+    "typecheck": "echo \"(no TS in this package)\"",
+    "test": "echo \"(no tests yet)\""
+  }
+}

package/templates/next/.claude/skills/ai-elements/SKILL.md

@@ -0,0 +1,160 @@
+---
+name: ai-elements
+description: Build AI chat interfaces using ai-elements components — conversations, messages, tool displays, prompt inputs, and more. Use when the user wants to build a chatbot, AI assistant UI, or any AI-powered chat interface.
+---
+
+# AI Elements
+
+[AI Elements](https://www.npmjs.com/package/ai-elements) is a component library and custom registry built on top of [shadcn/ui](https://ui.shadcn.com/) to help you build AI-native applications faster. It provides pre-built components like conversations, messages and more.
+
+Installing AI Elements is straightforward and can be done in a couple of ways. You can use the dedicated CLI command for the fastest setup, or integrate via the standard shadcn/ui CLI if you've already adopted shadcn's workflow.
+
+> **IMPORTANT:** Run all CLI commands using the project's package runner: `npx ai-elements@latest`, `pnpm dlx ai-elements@latest`, or `bunx --bun ai-elements@latest` — based on the project's `packageManager`. Examples below use `npx ai-elements@latest` but substitute the correct runner for the project.
+
+## Prerequisites
+
+Before installing AI Elements, make sure your environment meets the following requirements:
+
+- [Node.js](https://nodejs.org/en/download/), version 18 or later
+- A [Next.js](https://nextjs.org/) project with the [AI SDK](https://ai-sdk.dev/) installed.
+- [shadcn/ui](https://ui.shadcn.com/) installed in your project. If you don't have it installed, running any install command will automatically install it for you.
+- We also highly recommend using the [AI Gateway](https://vercel.com/docs/ai-gateway) and adding `AI_GATEWAY_API_KEY` to your `env.local` so you don't have to use an API key from every provider. AI Gateway also gives $5 in usage per month so you can experiment with models. You can obtain an API key [here](https://vercel.com/d?to=%2F%5Bteam%5D%2F%7E%2Fai%2Fapi-keys&title=Get%20your%20AI%20Gateway%20key).
+
+## Installing Components
+
+You can install AI Elements components using either the AI Elements CLI or the shadcn/ui CLI. Both achieve the same result: adding the selected component’s code and any needed dependencies to your project.
+
+The CLI will download the component’s code and integrate it into your project’s directory (usually under your components folder). By default, AI Elements components are added to the `@/components/ai-elements/` directory (or whatever folder you’ve configured in your shadcn components settings).
+
+After running the command, you should see a confirmation in your terminal that the files were added. You can then proceed to use the component in your code.
+
+## Usage
+
+Once an AI Elements component is installed, you can import it and use it in your application like any other React component. The components are added as part of your codebase (not hidden in a library), so the usage feels very natural.
+
+## Example
+
+After installing AI Elements components, you can use them in your application like any other React component. For example:
+
+```tsx title="conversation.tsx"
+"use client";
+
+import {
+  Message,
+  MessageContent,
+  MessageResponse,
+} from "@/components/ai-elements/message";
+import { useChat } from "@ai-sdk/react";
+
+const Example = () => {
+  const { messages } = useChat();
+
+  return (
+    <>
+      {messages.map(({ role, parts }, index) => (
+        <Message from={role} key={index}>
+          <MessageContent>
+            {parts.map((part, i) => {
+              switch (part.type) {
+                case "text":
+                  return (
+                    <MessageResponse key={`${role}-${i}`}>
+                      {part.text}
+                    </MessageResponse>
+                  );
+              }
+            })}
+          </MessageContent>
+        </Message>
+      ))}
+    </>
+  );
+};
+
+export default Example;
+```
+
+In the example above, we import the `Message` component from our AI Elements directory and include it in our JSX. Then, we compose the component with the `MessageContent` and `MessageResponse` subcomponents. You can style or configure the component just as you would if you wrote it yourself – since the code lives in your project, you can even open the component file to see how it works or make custom modifications.
+
+## Extensibility
+
+All AI Elements components take as many primitive attributes as possible. For example, the `Message` component extends `HTMLAttributes<HTMLDivElement>`, so you can pass any props that a `div` supports. This makes it easy to extend the component with your own styles or functionality.
+
+## Customization
+
+After installation, no additional setup is needed. The component’s styles (Tailwind CSS classes) and scripts are already integrated. You can start interacting with the component in your app immediately.
+
+For example, if you'd like to remove the rounding on `Message`, you can go to `components/ai-elements/message.tsx` and remove `rounded-lg` as follows:
+
+```tsx title="components/ai-elements/message.tsx" highlight="8"
+export const MessageContent = ({
+  children,
+  className,
+  ...props
+}: MessageContentProps) => (
+  <div
+    className={cn(
+      "flex flex-col gap-2 text-sm text-foreground",
+      "group-[.is-user]:bg-primary group-[.is-user]:text-primary-foreground group-[.is-user]:px-4 group-[.is-user]:py-3",
+      className
+    )}
+    {...props}
+  >
+    <div className="is-user:dark">{children}</div>
+  </div>
+);
+```
+
+## Troubleshooting
+
+### Why are my components not styled?
+
+Make sure your project is configured correctly for shadcn/ui in Tailwind 4 - this means having a `globals.css` file that imports Tailwind and includes the shadcn/ui base styles.
+
+### I ran the AI Elements CLI but nothing was added to my project
+
+Double-check that:
+
+- Your current working directory is the root of your project (where `package.json` lives).
+- Your components.json file (if using shadcn-style config) is set up correctly.
+- You’re using the latest version of the AI Elements CLI:
+
+```bash title="Terminal"
+npx ai-elements@latest
+```
+
+If all else fails, feel free to open an [issue on GitHub](https://github.com/vercel/ai-elements/issues).
+
+### Theme switching doesn’t work — my app stays in light mode
+
+Ensure your app is using the same data-theme system that shadcn/ui and AI Elements expect. The default implementation toggles a data-theme attribute on the `<html>` element. Make sure your tailwind.config.js is using class or data- selectors accordingly.
+
+### The component imports fail with “module not found”
+
+Check the file exists. If it does, make sure your `tsconfig.json` has a proper paths alias for `@/` i.e.
+
+```json title="tsconfig.json"
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./*"]
+    }
+  }
+}
+```
+
+### My AI coding assistant can't access AI Elements components
+
+1. Verify your config file syntax is valid JSON.
+2. Check that the file path is correct for your AI tool.
+3. Restart your coding assistant after making changes.
+4. Ensure you have a stable internet connection.
+
+### Still stuck?
+
+If none of these answers help, open an [issue on GitHub](https://github.com/vercel/ai-elements/issues) and someone will be happy to assist.
+
+## Available Components
+
+See the `references/` folder for detailed documentation on each component.