Опишете задачата
Към всички skills

add-example-tutorial

TanStack · Разработка

Use when adding a public teaching example or a docs tutorial. Don't use for an internal Nx playground (that is new-react-playground), for a package API change with no walkthrough, or for a docs-only copy edit.

Оригинален текст · няма потвърден превод на български
Платформи: Не са посочениНиво: Не е посоченоВ индекса: 22.09.2026 г.Обновен в GitHub: 21.09.2026 г.

Теми: ai · ai-agents · ai-sdk · anthropic · chatbot · function-calling · gemini · generative-ai · llm · multimodal · openai · react · solidjs · streaming · svelte

Първо прочетете инструкцията.

Файлът се зарежда от посочения източник само по ваше действие. Можете да го прочетете тук, да го копирате или да го запазите като .md.

Оригинален SKILL.md
GitHub хранилище
Звезди на репото
3128
Лиценз
MIT
Последна проверка на записа
22.09.2026 г.

Добавете в своя инструмент.

Командата отваря избора на skills от репозитория. Прочетете файла и условията на автора преди изпълнение.

npx skills add TanStack/ai

Страницата копира текст. Не инсталира и не изпълнява нищо на устройството ви.

Откъс от SKILL.md

Началото на файла на автора, без превод.

Add Example Tutorial

Start from the Nx React app generator. Land at examples/react/<slug>/. Then slim the generated lab to the one scenario this tutorial teaches. examples/react/basic-chat and docs/tutorials/basic-chat.md show a finished public example. Do not copy that app. Use the generator as the starting tree.

Load docs, simple-english, and i-have-adhd before writing tutorial pages. Load pr-description before gh pr create and after an agent push on an open PR.

End state

  • App at examples/react/<slug>/ (not examples/<slug>/, not examples/ts-*).
  • pnpm-workspace.yaml includes examples/react/*.
  • Tutorial at docs/tutorials/<slug>.md on "tab": "tutorial".
  • Examples tab child framework/react/examples/<slug> in docs/config.json.
  • Overview / Quick Start (and any recipe) point at the tutorial.
  • GitHub link at the bottom: https://github.com/TanStack/ai/tree/main/examples/react/<slug>.
  • Live sandbox comment on the tutorial page.
  • One PR on this repo.

1. Shape the app

  1. Pick a kebab-case slug.
  2. From the repo root: pnpm nx g @tanstack/workspace-plugin:react-app <slug>. The files land at examples/react/<slug>/.
  3. Slim the generated lab to this tutorial. One adapter. Keep workspace:* for @tanstack/ai* deps. Do not add @tanstack/ai-client (framework packages re-export the client and /byok).
  4. Inline the model id. Read the adapter's current chat model list and pass the latest flagship id as a string literal into the adapter factory. Do not add a model const, a chat-model.ts, a handle-chat-post.ts, or any other one-off helper for the model or the POST body. The route file owns chat().

Do not commit the unused generator extras (every adapter, PKCE, model picker, thinking UI) unless this tutorial teaches them.

2. File layout

Match Basic Chat only for the Start routes folder:

  • src/routes/index.tsx is the page.
  • src/routes/api.chat.ts is the server route (next to index.tsx). Start maps api.chat.ts to /api/chat.
  • tsconfig.json is self-contained (Start-style). Do not extend the repo root.

Add other files only when this tutorial needs them (a key form, a tool, a store). Many examples will not use BYOK. Do not add BYOK files by default.

3. Tutorial page

Load docs. Run its persona and tone gates unless this conversation already chose them.

Целият SKILL.md в GitHub