Files
Ben Taylor f2c9a2ecfe docs(react-core): clarify system_prompt requirements for useFrontendTool (#5469)
## What does this PR do?
Adds documentation explaining that `useFrontendTool` may require
explicit `system_prompt` guidance in LangGraph agents to be reliably
called. Includes a working code example showing both a well-described
`useFrontendTool` registration and the matching system prompt
instruction. Addresses the confusion reported in #4950 where users
implement tools with only a `description` and find the agent doesn't
call them.

Changes:
- `docs/integrations/langgraph/frontend-tools.mdx` — new section
"Ensuring your agent reliably calls frontend tools" with a `Callout`,
Python+TypeScript code examples, and a decision table (description vs.
system_prompt)
- `reference/hooks/useFrontendTool.mdx` — added "LangGraph agents:
description vs. system_prompt" subsection linking to the full example
- `docs/troubleshooting/common-issues.mdx` — expanded the "tool listed
but agent never calls it" bullet to cross-link the new guide

## Related PRs and Issues
- Closes #4950

## Checklist
- [x] I have read the Contribution Guide
- [x] If the PR changes or adds functionality, I have updated the
relevant documentation
- [x] "Allow edits by maintainers" is checked
2026-08-20 14:39:34 -05:00
..

Shell Docs

showcase/shell-docs is the Next.js app that builds and serves docs.copilotkit.ai. Author CopilotKit product documentation here, not in the retired top-level docs/ app.

Run Locally

Shell-docs is a standalone npm-based app. You do not need a root install just to run the docs app locally.

cd showcase/scripts
npm install

cd ../shell-docs
npm install
npm run dev

The local dev server runs on port 3003.

http://localhost:3003

The shell-docs npm lifecycle generates registry, demo-content, setup-content, and search data before dev, build, and typecheck.

Validate Changes

Run these from showcase/shell-docs:

npm run build
npm run typecheck
npm run test

For repo-level CI parity, prefer Nx when a shell-docs target is available in the current checkout and root dependencies are installed. For normal shell-docs local development, the npm commands above are the canonical path.

Authoring Recipes

Showcase-Driven Framework Docs

Showcase-driven frameworks use docs_mode: generated. The docs are assembled from showcase registry/generated data, demos, source regions, shared/root MDX, snippets, and sparse framework overrides.

To update showcase-driven docs:

  1. Edit the showcase source of truth: manifests, demos, feature coverage, source regions, or registry inputs.
  2. Edit shared/root MDX only when the change applies across generated frameworks.
  3. Add sparse framework overrides only for real framework-specific differences.
  4. Do not hand-edit generated files under src/data/frameworks/.
  5. Validate routes, sidebar state, search results, snippets, and framework switching.

Authored Framework Docs

Authored frameworks use docs_mode: authored. The framework owns an MDX tree under src/content/docs/integrations/<docsFolder>/ with a meta.json sidebar.

To update authored docs:

  1. Check getDocsFolder() in src/lib/registry.ts; the URL slug and folder name may differ.
  2. Edit the MDX page under src/content/docs/integrations/<docsFolder>/.
  3. Update that folder's meta.json when adding, removing, or moving pages.
  4. Reuse shared snippets from src/content/snippets/ when content should stay consistent across frameworks.
  5. Validate the framework route, sidebar, search result, and any shared snippet render.

Reference Docs

Edit API reference pages under src/content/reference/.

The v2 reference does not use meta.json; navigation is generated by walking the tree and reading each page's title and description frontmatter. Only the legacy reference/v1/ tree uses meta.json.

Snippets

Reusable snippets live under src/content/snippets/. Snippets may be rendered by root docs, authored framework pages, and showcase-driven framework pages, so keep them general unless the path is intentionally framework-specific.

Frontend Applicability

Frontend routes use page-level applicability metadata, independent from where the content is authored. A page can be authored MDX, showcase-generated content, mirrored protocol docs, or reference content and still be universal across frontends.

Use the frontend field in page frontmatter or meta.json when a root doc should appear in non-React frontend docs:

  • universal — render the same page under /<frontend>/....
  • frontend-variant — render only when a matching page exists under src/content/docs/frontends/<frontend>/....
  • hide — omit the page from frontend-scoped docs.

Do not use "showcase-driven" as a proxy for frontend availability. Showcase derivation is an authoring/source detail; frontend applicability controls routing and sidebar inclusion.

AG-UI Mirrored Docs

AG-UI protocol docs are authored upstream in ag-ui-protocol/ag-ui. The src/content/ag-ui/ tree is a downstream mirror rendered on the CopilotKit docs host. Change AG-UI docs upstream first, then sync the mirror back into shell-docs.

The repository's top-level docs/ path is a symlink to showcase/shell-docs/ for contributor muscle memory. It is not a separate docs app. Do not recreate the old docs/content/docs/ tree; author CopilotKit docs in showcase/shell-docs/src/content/.