Nik Richers d46cc88f09 docs: add agent prompts to all 18 framework quickstarts (#47543) ...

## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.

YES

## What kind of change does this PR introduce?

Docs enhancement: Agent-ready prompt blocks on all 18 framework
quickstart pages.

## What is the current behavior?

Framework quickstarts do not surface a copyable AI prompt. Readers have
to assemble context themselves when asking an AI coding assistant to
follow the guide.

## What is the new behavior?

- Partials at
`apps/docs/content/_partials/ai/quickstart_prompt_{framework}.mdx`
contain `<AiPrompt prompt={...} />` (Prettier multiline single-quoted JS
string with `\n` escapes).
- Each quickstart includes `<$Partial
path="ai/quickstart_prompt_{framework}.mdx" />`.
- Runtime: `AiPrompt` → `PromptPanel` (Copy AI Prompt, expandable).
- Markdown export: `apps/docs/internals/markdown-schema/AiPrompt.ts`
decodes Prettier single-quoted prompt expressions so exported markdown
includes an **AI Prompt** section without quote leak.
- Shared `$Partial` helpers live in `lib/partials.utils.ts`.
- Closes DOCS-1144.

### Example before/after

| | Production | Preview |
| --- | --- | --- |
| Next.js quickstart |
[production](https://supabase.com/docs/guides/getting-started/quickstarts/nextjs)
|
[preview](https://docs-git-nikrichers-docs-1144-add-ai-prompt-blo-5af4d8-supabase.vercel.app/docs/guides/getting-started/quickstarts/nextjs)
|

**Light**

| Before | After |
| --- | --- |
| ![before
light](https://moijyfpvgnmgoxvwcikq.supabase.co/storage/v1/object/public/pr-proof/supabase/supabase/pr47543/quickstart-nextjs-before-light-d1076045.png)
| ![after
light](https://moijyfpvgnmgoxvwcikq.supabase.co/storage/v1/object/public/pr-proof/supabase/supabase/pr47543/quickstart-nextjs-after-light-74996d6c.png)
|

**Dark**

| Before | After |
| --- | --- |
| ![before
dark](https://moijyfpvgnmgoxvwcikq.supabase.co/storage/v1/object/public/pr-proof/supabase/supabase/pr47543/quickstart-nextjs-before-dark-faa391c3.png)
| ![after
dark](https://moijyfpvgnmgoxvwcikq.supabase.co/storage/v1/object/public/pr-proof/supabase/supabase/pr47543/quickstart-nextjs-after-dark-56d1578a.png)
|

### Test plan

- [x] Preview renders AI Prompt panel with copy
- [x] Spot-check Next.js, Flutter, Expo, Vue
- [x] `test-quickstart-prompts` structural
- [x] Markdown export includes **AI Prompt** without quote leak
- [x] Format CI green after prettier/single-quote decode fix

## Additional context

- Worktree:
`~/GitHub/supabase/supabase-worktrees/nikrichers/docs-1144-add-ai-prompt-blocks-to-all-18-framework-quickstarts`
- Skills: `generate-quickstart-prompts` / `test-quickstart-prompts`;
librarian update https://github.com/supabase/docs-agent-skills/pull/21
- `PromptPanel` replaced the older GlassPanel experiment for the
expandable copy UI

---------

Co-authored-by: Nik Richers <nik@validmind.ai>
Co-authored-by: jeremenichelli <jeremenichelli@users.noreply.github.com>

2026-07-24 22:19:04 +00:00

2.3 KiB

Raw Permalink Blame History

View Raw