Start with an AI assistant

This page has not been reviewed by a human.

Use this page if you ask an AI coding assistant to build your page instead of writing every line yourself. You give the assistant a prompt and our llms.txt, a short machine-readable guide to this site for AI assistants. Then you check what it produced.

Without guidance, an assistant may call Sefaria's API and clean the text by hand. The prompt steers it to the toolkit's components. They do that work for you.

A community-driven project with Sefaria backing and support. The toolkit is experimental; names and APIs may change. License

Which install route it should use

The prompt lists both routes. Decide which one fits, then say so under "My page" in the prompt, or let the assistant choose from your description.

• Script tag: for a page with no build step, or a field in a content management system. The assistant adds one <script> line and then uses <sefaria-...> tags.
• Package: for an app with a build step. The assistant installs @sefaria/web-components and imports the package root.

Learn more: Install and status

Give the assistant this prompt

You need an AI assistant and a place to paste or host HTML.

Read https://sefaria.github.io/sefaria-frontend-toolkit/llms.txt first. It describes the Sefaria Frontend Toolkit, a set of web components that show Sefaria texts.

Build me a page that uses the Sefaria Frontend Toolkit's components to show the passage I describe below. For example, to show Micah 6:8: <sefaria-source-card sref="Micah 6:8"></sefaria-source-card>

Install route:

- If the page has no build step, add this version-pinned script tag: <script type="module" src="https://cdn.jsdelivr.net/npm/@sefaria/web-components@0.1.0-alpha.0/dist/browser/sefaria-elements.js"></script>
- If the app has a build step, install with npm install @sefaria/web-components@0.1.0-alpha.0 and import the package root exactly as: import "@sefaria/web-components"; No registry token is needed. Element subpaths don't register their element; they export types and a few helpers.

Rules:

- If the page uses Source Card or Reader, keep its attribution visible. Don't hide it with the `hide-attributions` attribute or with CSS.
- Write no code that downloads text from Sefaria's website itself, and no code that strips or rewrites its HTML. The toolkit does that work.
- Don't copy Sefaria text into the page.
- Let the component handle loading and errors.
- Don't choose a translation language unless I ask. For a language preference, use `translation-language` with a full family name such as `french`; an unavailable language can fall back to Sefaria's default. For an exact Source Card edition, use `translation-version-title`, with the language family when appropriate.

My page: [describe your page here, and say whether it has a build step]

Copy the prompt, replace the last line with a description of your page and your install route, and paste it into your assistant.

Check the result

Open the page and check each item.

• The page uses <sefaria-...> tags, such as <sefaria-source-card>.
• It loads the toolkit one way. A page with no build step uses the script tag. An app with a build step uses import "@sefaria/web-components";.
• If the page uses Source Card or Reader, its attribution is visible.
• The text comes from the component, not pasted into the page.
• No custom code downloads text from Sefaria's website or strips or rewrites its HTML. The component's own requests are expected.
• A deliberately delayed request shows a loading message. A deliberately failed request shows an error message. On success, the text replaces the loading message.
• When you open the page, it shows your passage (for example, Micah 6:8).

What to ask it to fix

Paste the sentence that matches the failed check.

• No toolkit tags: "Rewrite the page to use <sefaria-source-card sref="[your passage]"> from the Sefaria Frontend Toolkit."
• Toolkit not loaded, page with no build step: "Add the toolkit's script tag from llms.txt."
• Toolkit not loaded, app with a build step: "Import the package root with import "@sefaria/web-components";."
• Attribution missing: "Keep the attribution visible in Source Card and Reader. Remove any hide-attributions attribute, and don't hide it with CSS."
• Copied text: "Remove the Sefaria text you pasted into the page. Let the component show it."
• Custom download or cleanup code: "Replace that code with <sefaria-source-card>. Don't download text from Sefaria's website or strip or rewrite its HTML yourself."
• Loading or error message missing: "Let the component show its own loading and error messages. Don't replace them."
• Wrong passage: "Set the component's sref to [your passage]." If it still fails, see Troubleshoot a page.

Next steps

• Start here: the same first page, written by hand.
• Show one passage
• Show Hebrew and translation together
• Show an attributed passage
• Sefaria's own texts and tools: for when Sefaria's own tools, such as its Educator Playbook, fit better.