Canonical partner docs (CrewAI Flows) #2761
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
1 Skipped Deployment
|
WalkthroughReplaces many inline video embeds with an IframeSwitcher across multiple crewi-flows docs, adds a reusable RunAndConnect MDX snippet, renames/restructures frontend docs (Frontend Actions → Frontend Tools), updates meta/navigation and some example API references (useCopilotAction → useRenderToolCall) and adds DefaultToolRendering usage in backend docs. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes
Possibly related PRs
Suggested labels
Suggested reviewers
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
docs/content/docs/crewai-flows/frontend-actions.mdx (1)
38-38: Update internal link on line 38 to match path consistency pattern.Line 38 references
/frontend-actionswhich points to the root-level overview, while other cross-references in this file (lines 23, 47) use the full/crewai-flows/...path pattern. Update to/crewai-flows/frontend-actionsto maintain consistency with the framework-specific documentation structure, or clarify if the root-level reference is intentional.
🧹 Nitpick comments (2)
docs/content/docs/crewai-flows/generative-ui/index.mdx (1)
32-32: Minor style improvement: use "will" instead of "going to".Line 32: Consider changing "what is going to be backing" to "what will be backing" for more direct phrasing.
docs/content/docs/crewai-flows/shared-state/in-app-agent-read.mdx (1)
103-110: Consider removing redundant visual demonstration.The file now contains two visual demonstrations of the same feature: the IframeSwitcher at the top (lines 9–16) and the Frame/ImageZoom screenshot within the "Give it a try!" step (lines 103–110). This duplication may confuse users about which resource to reference. Consider keeping either the interactive IframeSwitcher (for engagement) or the step-by-step screenshot (for walkthrough), but not both.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (14)
docs/content/docs/crewai-flows/agentic-chat-ui.mdx(1 hunks)docs/content/docs/crewai-flows/custom-look-and-feel/markdown-rendering-crewai-flows_custom-look-and-feel.mdx(0 hunks)docs/content/docs/crewai-flows/custom-look-and-feel/meta.json(1 hunks)docs/content/docs/crewai-flows/frontend-actions.mdx(2 hunks)docs/content/docs/crewai-flows/generative-ui/agentic.mdx(2 hunks)docs/content/docs/crewai-flows/generative-ui/backend-tools.mdx(3 hunks)docs/content/docs/crewai-flows/generative-ui/frontend-tools.mdx(1 hunks)docs/content/docs/crewai-flows/generative-ui/index.mdx(3 hunks)docs/content/docs/crewai-flows/generative-ui/meta.json(1 hunks)docs/content/docs/crewai-flows/human-in-the-loop/flow.mdx(2 hunks)docs/content/docs/crewai-flows/meta.json(1 hunks)docs/content/docs/crewai-flows/shared-state/in-app-agent-read.mdx(2 hunks)docs/content/docs/crewai-flows/shared-state/in-app-agent-write.mdx(2 hunks)docs/content/docs/crewai-flows/shared-state/predictive-state-updates.mdx(2 hunks)
💤 Files with no reviewable changes (1)
- docs/content/docs/crewai-flows/custom-look-and-feel/markdown-rendering-crewai-flows_custom-look-and-feel.mdx
🧰 Additional context used
🪛 LanguageTool
docs/content/docs/crewai-flows/generative-ui/index.mdx
[style] ~32-~32: Use ‘will’ instead of ‘going to’ if the following action is certain.
Context: ... started, you first need to decide what is going to be backing your generative UI. There ar...
(GOING_TO_WILL)
🔇 Additional comments (25)
docs/content/docs/crewai-flows/frontend-actions.mdx (2)
10-17: Verify IframeSwitcher component import and usage.The new IframeSwitcher component is imported on line 8 and used on lines 10–17. Ensure the component is correctly exported from
@/components/contentand that the external URLs (feature-viewer.copilotkit.ai) are stable and appropriate for production documentation.
1-5: Approve title and description rename from "Frontend Actions" to "Frontend Tools".The semantic rename is clearly applied and aligns with the updated guidance sections below. The description also correctly reflects the new terminology.
docs/content/docs/crewai-flows/meta.json (1)
11-12: Navigation reordering looks intentional and well-placed.The repositioning of "custom-look-and-feel" (line 11) and "frontend-actions" (line 12) within the Guides section improves content discovery by placing these topics earlier in the flow. This aligns with the PR's emphasis on frontend tooling.
docs/content/docs/crewai-flows/agentic-chat-ui.mdx (1)
12-21: Clean migration to IframeSwitcher component.The replacement of inline video with an interactive IframeSwitcher (demo + code views) is well-executed. The component configuration includes appropriate labels, height, and external URLs pointing to the feature viewer.
docs/content/docs/crewai-flows/shared-state/predictive-state-updates.mdx (2)
14-27: Dual-stage demo pattern (interactive iframe + supportive callout) is well-structured.The addition of IframeSwitcher at the top with an informational Callout provides immediate interactive access to the feature. This complements the video demo added later in the implementation steps.
247-250: Video asset verified and accessible.The video URL returns HTTP 200 with correct content-type (video/mp4). The callout messaging appropriately provides context referencing the implementation section. No issues found.
docs/content/docs/crewai-flows/shared-state/in-app-agent-write.mdx (2)
6-19: Approve IframeSwitcher migration and semantic callout styling.The replacement of inline video with interactive iframe at the top (lines 8–15) and the semantic callout styling (type="info", lines 17–19) are well-executed. This aligns with the broader PR migration pattern.
107-110: Video URL and callout context verified—no issues found.The video asset at the specified URL is accessible (HTTP 200) and serves the correct content type (video/mp4). The callout text clearly explains that the video demonstrates the result of running
npx copilotkit@latest initwith the implementation section applied, providing appropriate context for users.docs/content/docs/crewai-flows/generative-ui/agentic.mdx (2)
2-3: Approve title rename from "Agentic Generative UI" to "Agent State".The title clarifies that this page focuses specifically on rendering agent state, which is more precise and user-friendly than the broader "Agentic Generative UI" terminology.
10-17: Approve dual-demo approach with iframe and video.The interactive IframeSwitcher at the top (lines 10–17) combined with a video walkthrough at the end of the implementation (lines 204–212) provides comprehensive demonstration options for users.
Also applies to: 204-212
docs/content/docs/crewai-flows/generative-ui/meta.json (1)
1-4: All three referenced pages exist in the generative-ui directory. Now verifying the icon validity:No issues found—meta.json references are valid.
LayoutDashboard is a valid lucide icon, and all three pages referenced in the meta.json (
backend-tools.mdx,frontend-tools.mdx,agentic.mdx) exist in the generative-ui directory. The structure and content are complete.docs/content/docs/crewai-flows/custom-look-and-feel/meta.json (1)
3-3: Confirm navigation link consistency after page removal from sidebar.The lucide icon
LayoutDashboardis valid and the format matches the documentation system's pattern. However, the removal of"built-in-ui-components"from the pages array (which controls sidebar navigation) creates an inconsistency: the page file still exists and is still linked inindex.mdxat line 16 (href="./custom-look-and-feel/built-in-ui-components").Verify this is intentional—either the navigation link should also be removed, or the page should remain in the pages array if it should be accessible.
docs/content/docs/crewai-flows/generative-ui/frontend-tools.mdx (3)
6-8: Approve component imports and structure.The imports and IframeSwitcher setup are correct and consistent with other docs in this PR.
23-23: Verify the referenced path and improve phrasing.Line 23 references "/crewai-flows/frontend-actions" — confirm this path is correct and still in use. Additionally, consider rephrasing "let your agent control the UI" for better clarity (currently reads as "your agent control the UI").
37-37: Verify Steps component availability.The
<Steps>and<Step>components are used throughout the file but are not explicitly imported. Confirm that these components are globally available in the documentation context (e.g., via a layout provider or barrel export).docs/content/docs/crewai-flows/generative-ui/index.mdx (2)
6-6: Approve icon imports and link update.The lucide-react icon imports are correct, and the link update from
/crewai-flows/videos/research-canvasto/coagents/videos/research-canvasaligns with the documentation reorganization.
34-54: Approve Cards layout and structure.The new three-card layout (Backend Tools, Frontend Tools, Agent State) is well-structured with correct props, icons, and links. The grid layout with
col-span-2for Agent State is a good visual balance.docs/content/docs/crewai-flows/shared-state/in-app-agent-read.mdx (1)
7-20: Approve IframeSwitcher implementation and Callout update.The IframeSwitcher component is correctly configured, and the Callout properly references the CopilotKit Feature Viewer with the correct demo link.
docs/content/docs/crewai-flows/human-in-the-loop/flow.mdx (2)
8-21: Approve IframeSwitcher implementation and updated Callout.The IframeSwitcher component is correctly configured for the human-in-the-loop feature demo, and the Callout properly references the CopilotKit Feature Viewer.
199-207: Approve video placement as complementary walkthrough.The video embed at the end of the "Give it a try!" section is well-placed as a recorded walkthrough, complementing the interactive IframeSwitcher demo at the top. This dual-format approach (interactive + recorded) enhances the user experience.
docs/content/docs/crewai-flows/generative-ui/backend-tools.mdx (5)
7-9: Approve updated imports for IframeSwitcher and new rendering pattern.The new imports correctly support the IframeSwitcher component and the DefaultToolRendering pattern. The useRenderToolCall hook enables rendering of backend tool calls in the frontend, which is the appropriate replacement for the rendering use case.
102-128: Approve hook rename and render signature update.The useRenderToolCall hook enables rendering of backend tool calls in the frontend. The render callback signature with
statusandargsparameters is correct and properly used at line 122 to accessargs.location.
11-22: Approve IframeSwitcher component and Callout update.The IframeSwitcher is correctly configured with the backend tool rendering demo, and the Callout properly links to the feature viewer.
138-158: Approve new Default Tool Rendering section and video placement.The addition of a "Default Tool Rendering" section with video demonstration is valuable for users who want to understand default rendering behavior before customizing. The video placement at the end of the implementation steps is appropriate.
9-9: Verification complete: Import is valid and file exists.The snippet file
docs/snippets/shared/guides/default-tool-rendering.mdxexists and is correctly imported via the path alias. In Next.js MDX workflows (used here with fumadocs-ui),.mdxfiles are implicitly importable as React components, and the usage pattern on line 158 (<DefaultToolRendering components={props.components} />) is valid.
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (1)
docs/content/docs/crewai-flows/generative-ui/agentic.mdx (1)
6-6: Remove unused Accordion import.The
AccordionsandAccordioncomponents imported from "fumadocs-ui/components/accordion" at line 6 are not used anywhere in the file. This was flagged in a previous review but remains in the code.- import { Accordions, Accordion } from "fumadocs-ui/components/accordion"; import { IframeSwitcher } from "@/components/content"
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (9)
docs/content/docs/crewai-flows/advanced/emit-messages.mdx(2 hunks)docs/content/docs/crewai-flows/frontend-actions.mdx(3 hunks)docs/content/docs/crewai-flows/generative-ui/agentic.mdx(3 hunks)docs/content/docs/crewai-flows/generative-ui/backend-tools.mdx(4 hunks)docs/content/docs/crewai-flows/generative-ui/frontend-tools.mdx(1 hunks)docs/content/docs/crewai-flows/human-in-the-loop/flow.mdx(3 hunks)docs/content/docs/crewai-flows/shared-state/in-app-agent-read.mdx(3 hunks)docs/content/docs/crewai-flows/shared-state/in-app-agent-write.mdx(3 hunks)docs/snippets/integrations/crewai-flows/run-and-connect.mdx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (3)
- docs/content/docs/crewai-flows/frontend-actions.mdx
- docs/content/docs/crewai-flows/human-in-the-loop/flow.mdx
- docs/content/docs/crewai-flows/shared-state/in-app-agent-read.mdx
🔇 Additional comments (15)
docs/content/docs/crewai-flows/generative-ui/backend-tools.mdx (6)
21-23: The CopilotKit feature viewer URL is accessible and functional.The endpoint at
https://feature-viewer.copilotkit.ai/langgraph/feature/agentic_chatreturns HTTP 200, confirming the link is valid and will display the intended demo for the agentic_chat feature.
7-10: I'll help you verify the imported components referenced in this MDX file. Let me search for these files to confirm they exist and are properly accessible.
<function_calls>
CrewAI Flows backend-tools documentation PR #2761
</function_calls>Let me generate verification scripts to check if all the imported components exist in the codebase:
<function_calls>
#!/bin/bashVerify all imported components exist
echo "=== Searching for IframeSwitcher component ==="
fd "IframeSwitcher" -E node_modules -E .next -E dist 2>/dev/null | head -20echo ""
echo "=== Searching for DefaultToolRendering snippet ==="
fd "default-tool-rendering.mdx" 2>/dev/null | head -20echo ""
echo "=== Searching for RunAndConnect snippet ==="
fd "run-and-connect.mdx" 2>/dev/null | head -20echo ""
echo "=== Listing @/components/content structure (looking for index/exports) ==="
fd . docs -type f -name ".mdx" -o -name ".tsx" -o -name "*.ts" | grep -i "component" | grep -i "content" | head -20echo ""
echo "=== Searching in docs/content/components directory ==="
find docs -path "components/content" -type f 2>/dev/null | head -20
</function_calls>
12-19: Feature-viewer URLs are accessible and functional.Both IframeSwitcher endpoints have been verified as operational. The example and code view URLs return HTTP 200 responses, confirming the feature paths exist and are properly configured.
133-146: Both video CDN and GitHub starter project resources are accessible and current.Verification confirms:
- Video CDN (https://cdn.copilotkit.ai/docs/copilotkit/images/coagents/tool-based-gen-ui.mp4): Returns HTTP 200 with valid
video/mp4content type and file size of ~1.01 MB. Last modified July 15, 2025, indicating active maintenance.- GitHub starter project (https://github.com/CopilotKit/CopilotKit/tree/main/examples/coagents-starter-crewai-flows): Returns HTTP 200 and resolves correctly to an active repository page.
Both resources are operational and suitable for documentation reference.
151-153: Perfect! I've verified the DefaultToolRendering component. Here's my analysis:Verification Results:
- ✓ DefaultToolRendering is properly imported at line 9:
import DefaultToolRendering from "@/snippets/shared/guides/default-tool-rendering.mdx"- ✓ File exists at
docs/snippets/shared/guides/default-tool-rendering.mdx- ✓ Component is correctly used at line 153 with
props.componentsparameter- ✓ Pattern is consistent with RunAndConnect (also an imported MDX snippet)
- ✓ File contains valid MDX documentation with code examples that render properly
No issues found. The DefaultToolRendering component is properly exported and functional.
The original review comment's concern about verifying the component's existence and proper handling of
props.componentsis unfounded. The component works as expected, following the same pattern as RunAndConnect.
38-41: RunAndConnect snippet does not use the passedprops.componentspropThe RunAndConnect component at line 40 is passed
props.components, but the snippet file (docs/snippets/integrations/crewai-flows/run-and-connect.mdx) does not accept or use this prop. The snippet contains only static MDX content (Accordions/Accordion components and informational text) and does not reference or renderprops.components.This appears to be part of a systematic pattern where snippets are consistently passed
props.componentsacross multiple files (frontend-tools.mdx, backend-tools.mdx, agentic.mdx) even when the snippets don't use the prop. Either the prop should be removed from the usage, or the snippet should be updated to accept and use it if the pattern requires it.docs/content/docs/crewai-flows/generative-ui/frontend-tools.mdx (3)
41-41: Good component integration.The use of
<RunAndConnect components={props.components} />and<InstallSDKSnippet components={props.components}/>follows the established pattern for reusable MDX snippets. The IframeSwitcher component at the top provides a clean interactive demo experience consistent with the broader PR refactor.Also applies to: 93-93
20-26: The "frontend-actions" link is valid and the target page exists.Verification confirms that
/crewai-flows/frontend-actionscorrectly points todocs/content/docs/crewai-flows/frontend-actions.mdx, which is a real documentation page. The link in line 24 is properly functioning and does not reference a stale or reorganized path.
6-9: Perfect! I've now verified all the necessary components. Let me compile the findings:Verification Results:
Hook Existence: ✅
useFrontendToolis properly exported from@copilotkit/react-coreatCopilotKit/packages/react-core/src/hooks/use-frontend-tool.tsHook Signature: ✅ The hook is correctly typed as:
export function useFrontendTool<const T extends Parameter[] | [] = []>( tool: UseToolCallArgs<T>, dependencies?: any[], )Handler Signature: ✅ The
handlerfunction signature matches the documentation:
- For parameters:
(args: MappedParameterTypes<T>) => any | Promise<any>- The example showing
handler({ name })correctly destructures the args objectRender Function Signature: ✅ The
renderfunction receivesActionRenderProps<T>which contains{ status, args, result }. The documentation shows the simplified usage of({ args }), which accurately represents the key property being used.
Verify the
useFrontendToolhook exists in the documented API.The hook is properly exported and documented. The handler and render function signatures match the usage pattern shown in the code example at lines 50-85. The
handlerreceives the mapped parameter object (destructured as{ name }in the example), andrenderreceives the full action render props including theargsproperty shown in the documentation.docs/content/docs/crewai-flows/advanced/emit-messages.mdx (1)
6-6: Clean refactor to reusable component.The replacement of static "Run and Connect Your Agent to CopilotKit" narrative with the
<RunAndConnect />component streamlines the documentation and enables consistent UX across multiple CrewAI Flow guides. The import and usage pattern are correct.Also applies to: 40-41
docs/snippets/integrations/crewai-flows/run-and-connect.mdx (1)
1-20: Well-structured reusable component.The RunAndConnect snippet provides a clean, reusable way to guide users through agent setup with two clear paths: using an existing agent or starting from scratch. The accordion structure and linked resources are appropriate.
docs/content/docs/crewai-flows/generative-ui/agentic.mdx (2)
2-2: Solid refactor to IframeSwitcher and RunAndConnect components.The page structure has been improved with the IframeSwitcher providing an interactive demo/code viewer, and RunAndConnect replacing the static setup narrative. The title change to "Agent State" is clearer. These changes align well with the broader PR objectives.
Also applies to: 7-9, 11-18, 34-35
202-210: Good addition of video demo at end of Steps.The video embed with proper accessibility attributes (loop, playsInline, controls, autoPlay, muted) at the end of the implementation steps provides a tangible example. This complements the earlier IframeSwitcher demo.
docs/content/docs/crewai-flows/shared-state/in-app-agent-write.mdx (2)
6-7: Excellent use of IframeSwitcher for interactive demo.The IframeSwitcher component is well-integrated with links to both the demo and code views on the Feature Viewer. The accompanying info Callout at lines 18-20 provides clear context about the source of the example. This makes the documentation more interactive and immediately useful.
Also applies to: 9-16
35-36: Consistent pattern with RunAndConnect and video demo.The RunAndConnect component guides users through setup, and the video embed at the end with its Callout provides a concrete example of the feature in action. This structure mirrors the broader refactor across the CrewAI Flows docs and maintains consistency.
Also applies to: 102-105
| ```tsx title="app/page.tsx" | ||
| import { useCopilotAction } from "@copilotkit/react-core"; // [!code highlight] | ||
| import { useRenderToolCall } from "@copilotkit/react-core"; // [!code highlight] | ||
| // ... | ||
|
|
||
| const YourMainContent = () => { | ||
| // ... | ||
| // [!code highlight:13] | ||
| useCopilotAction({ | ||
| // [!code highlight:12] | ||
| useRenderToolCall({ | ||
| name: "get_weather", | ||
| available: "disabled", // Don't allow the agent or UI to call this tool as its only for rendering | ||
| render: ({ status, args }) => { | ||
| render: ({status, args}) => { | ||
| return ( | ||
| <p className="text-gray-500 mt-2"> | ||
| {status !== "complete" && "Calling weather API..."} | ||
| {status === "complete" && | ||
| `Called the weather API for ${args.location}.`} | ||
| {status === "complete" && `Called the weather API for ${args.location}.`} | ||
| </p> | ||
| ); | ||
| }, | ||
| }); | ||
| // ... | ||
| }; | ||
| } | ||
| ``` |
There was a problem hiding this comment.
🧩 Analysis chain
Script executed:
#!/bin/bash
# Search for useRenderToolCall definition/exports in the codebase
echo "=== Searching for useRenderToolCall definition ==="
find . -type f \( -name "*.ts" -o -name "*.tsx" -o -name "*.js" -o -name "*.jsx" \) -not -path "*/node_modules/*" -not -path "*/.next/*" -not -path "*/dist/*" | head -100 | xargs grep -l "useRenderToolCall" 2>/dev/null | head -10
echo ""
echo "=== Searching for useRenderToolCall export ==="
rg -A 10 "export.*useRenderToolCall|function useRenderToolCall|const useRenderToolCall" --type ts --type tsx 2>/dev/null | head -50
echo ""
echo "=== Looking for @copilotkit/react-core package ==="
find . -name "package.json" -not -path "*/node_modules/*" | xargs grep -l "@copilotkit/react-core" 2>/dev/null | head -5Repository: CopilotKit/CopilotKit
<shell_result>
Repository: CopilotKit/CopilotKit
Exit code: 0
stdout:
=== Searching for useRenderToolCall definition ===
./CopilotKit/packages/react-core/src/hooks/index.ts
=== Searching for useRenderToolCall export ===
=== Looking for @copilotkit/react-core package ===
./CopilotKit/examples/next-openai/package.json
./CopilotKit/examples/next-pages-router/package.json
./CopilotKit/packages/react-core/package.json
./CopilotKit/packages/react-textarea/package.json
./CopilotKit/packages/react-ui/package.json
</shell_result>
Script executed:
#!/bin/bash
# Read the hooks index file to find useRenderToolCall
echo "=== Content of hooks index.ts ==="
cat ./CopilotKit/packages/react-core/src/hooks/index.tsRepository: CopilotKit/CopilotKit
<shell_result>
Repository: CopilotKit/CopilotKit
Exit code: 0
stdout:
=== Content of hooks index.ts ===
export { useCopilotChat } from "./use-copilot-chat";
export type { UseCopilotChatReturn } from "./use-copilot-chat";
export type { UseCopilotChatOptions } from "./use-copilot-chat_internal";
export {
type UseCopilotChatReturn_c,
type UseCopilotChatOptions_c,
useCopilotChatHeadless_c,
} from "./use-copilot-chat-headless_c";
export { useCopilotChat as useCopilotChatInternal } from "./use-copilot-chat_internal";
export { useCopilotAction } from "./use-copilot-action";
export { useCoAgentStateRender } from "./use-coagent-state-render";
export { useMakeCopilotDocumentReadable } from "./use-make-copilot-document-readable";
export { type UseChatHelpers } from "./use-chat";
export { useCopilotReadable } from "./use-copilot-readable";
export { useCoAgent, type HintFunction, runAgent, startAgent, stopAgent } from "./use-coagent";
export { useCopilotRuntimeClient } from "./use-copilot-runtime-client";
export { useCopilotAuthenticatedAction_c } from "./use-copilot-authenticated-action";
export { useLangGraphInterrupt } from "./use-langgraph-interrupt";
export { useLangGraphInterruptRender } from "./use-langgraph-interrupt-render";
export { useCopilotAdditionalInstructions } from "./use-copilot-additional-instructions";
export type { Tree, TreeNode } from "./use-tree";
export { useFrontendTool } from "./use-frontend-tool";
export { useHumanInTheLoop } from "./use-human-in-the-loop";
export { useRenderToolCall } from "./use-render-tool-call";
export { useDefaultTool } from "./use-default-tool";
</shell_result>
Script executed:
#!/bin/bash
# Read the useRenderToolCall hook implementation
echo "=== Content of use-render-tool-call.ts ==="
cat ./CopilotKit/packages/react-core/src/hooks/use-render-tool-call.tsRepository: CopilotKit/CopilotKit
<shell_result>
Repository: CopilotKit/CopilotKit
Exit code: 0
stdout:
=== Content of use-render-tool-call.ts ===
import { useCopilotAction } from "./use-copilot-action";
import { FrontendAction, FrontendActionAvailability } from "../types";
import { Parameter } from "@copilotkit/shared";
type UseToolCallArgs<T extends Parameter[] | [] = []> = {
available?: "disabled" | "enabled";
} & Pick<FrontendAction<T>, "name" | "description" | "parameters" | "render">;
export function useRenderToolCall<const T extends Parameter[] | [] = []>(
tool: UseToolCallArgs<T>,
dependencies?: any[],
) {
useCopilotAction<T>(
{
...tool,
available: tool.available === "disabled" ? tool.available : "frontend",
},
dependencies,
);
}
</shell_result>
Script executed:
#!/bin/bash
# Find FrontendAction type definition
echo "=== Searching for FrontendAction type ==="
rg -B 5 -A 20 "type FrontendAction|interface FrontendAction" ./CopilotKit/packages/react-core/src/types --type ts --type tsx
echo ""
echo "=== Checking types directory ==="
find ./CopilotKit/packages/react-core/src/types -type f -name "*.ts" -o -name "*.tsx" | head -10Repository: CopilotKit/CopilotKit
<shell_result>
Repository: CopilotKit/CopilotKit
Exit code: 0
stdout:
=== Searching for FrontendAction type ===
=== Checking types directory ===
./CopilotKit/packages/react-core/src/types/chat-suggestion-configuration.ts
./CopilotKit/packages/react-core/src/types/coagent-action.ts
./CopilotKit/packages/react-core/src/types/coagent-state.ts
./CopilotKit/packages/react-core/src/types/crew.ts
./CopilotKit/packages/react-core/src/types/document-pointer.ts
./CopilotKit/packages/react-core/src/types/frontend-action.ts
./CopilotKit/packages/react-core/src/types/index.ts
./CopilotKit/packages/react-core/src/types/interrupt-action.ts
./CopilotKit/packages/react-core/src/types/system-message.ts
stderr:
unrecognized file type: tsx
</shell_result>
Script executed:
#!/bin/bash
# Read the FrontendAction type definition
echo "=== Content of frontend-action.ts ==="
cat ./CopilotKit/packages/react-core/src/types/frontend-action.tsRepository: CopilotKit/CopilotKit
<shell_result>
Repository: CopilotKit/CopilotKit
Exit code: 0
stdout:
=== Content of frontend-action.ts ===
import { ActionInputAvailability } from "@copilotkit/runtime-client-gql";
import {
Action,
Parameter,
MappedParameterTypes,
actionParametersToJsonSchema,
} from "@copilotkit/shared";
import React from "react";
interface InProgressState<T extends Parameter[] | [] = []> {
status: "inProgress";
args: Partial<MappedParameterTypes<T>>;
result: undefined;
}
interface ExecutingState<T extends Parameter[] | [] = []> {
status: "executing";
args: MappedParameterTypes<T>;
result: undefined;
}
interface CompleteState<T extends Parameter[] | [] = []> {
status: "complete";
args: MappedParameterTypes<T>;
result: any;
}
interface InProgressStateNoArgs<T extends Parameter[] | [] = []> {
status: "inProgress";
args: Partial<MappedParameterTypes<T>>;
result: undefined;
}
interface ExecutingStateNoArgs<T extends Parameter[] | [] = []> {
status: "executing";
args: MappedParameterTypes<T>;
result: undefined;
}
interface CompleteStateNoArgs<T extends Parameter[] | [] = []> {
status: "complete";
args: MappedParameterTypes<T>;
result: any;
}
interface InProgressStateWait<T extends Parameter[] | [] = []> {
status: "inProgress";
args: Partial<MappedParameterTypes<T>>;
/** @deprecated use respond instead */
handler: undefined;
respond: undefined;
result: undefined;
}
interface ExecutingStateWait<T extends Parameter[] | [] = []> {
status: "executing";
args: MappedParameterTypes<T>;
/** @deprecated use respond instead */
handler: (result: any) => void;
respond: (result: any) => void;
result: undefined;
}
interface CompleteStateWait<T extends Parameter[] | [] = []> {
status: "complete";
args: MappedParameterTypes<T>;
/** @deprecated use respond instead */
handler: undefined;
respond: undefined;
result: any;
}
interface InProgressStateNoArgsWait<T extends Parameter[] | [] = []> {
status: "inProgress";
args: Partial<MappedParameterTypes<T>>;
/** @deprecated use respond instead */
handler: undefined;
respond: undefined;
result: undefined;
}
interface ExecutingStateNoArgsWait<T extends Parameter[] | [] = []> {
status: "executing";
args: MappedParameterTypes<T>;
/** @deprecated use respond instead */
handler: (result: any) => void;
respond: (result: any) => void;
result: undefined;
}
interface CompleteStateNoArgsWait<T extends Parameter[] | [] = []> {
status: "complete";
args: MappedParameterTypes<T>;
/** @deprecated use respond instead */
handler: undefined;
respond: undefined;
}
export type ActionRenderProps<T extends Parameter[] | [] = []> =
| CompleteState<T>
| ExecutingState<T>
| InProgressState<T>;
export type ActionRenderPropsNoArgs<T extends Parameter[] | [] = []> =
| CompleteStateNoArgs<T>
| ExecutingStateNoArgs<T>
| InProgressStateNoArgs<T>;
export type ActionRenderPropsWait<T extends Parameter[] | [] = []> =
| CompleteStateWait<T>
| ExecutingStateWait<T>
| InProgressStateWait<T>;
export type ActionRenderPropsNoArgsWait<T extends Parameter[] | [] = []> =
| CompleteStateNoArgsWait<T>
| ExecutingStateNoArgsWait<T>
| InProgressStateNoArgsWait<T>;
export type CatchAllActionRenderProps<T extends Parameter[] | [] = []> =
| (CompleteState<T> & {
name: string;
})
| (ExecutingState<T> & {
name: string;
})
| (InProgressState<T> & {
name: string;
});
export type FrontendActionAvailability = "disabled" | "enabled" | "remote" | "frontend";
export type FrontendAction<
T extends Parameter[] | [] = [],
N extends string = string,
> = Action<T> & {
name: Exclude<N, "*">;
/**
* @deprecated Use `available` instead.
*/
disabled?: boolean;
available?: FrontendActionAvailability;
pairedAction?: string;
followUp?: boolean;
} & (
| {
render?:
| string
| (T extends []
? (props: ActionRenderPropsNoArgs<T>) => string | React.ReactElement
: (props: ActionRenderProps<T>) => string | React.ReactElement);
/** @deprecated use renderAndWaitForResponse instead */
renderAndWait?: never;
renderAndWaitForResponse?: never;
}
| {
render?: never;
/** @deprecated use renderAndWaitForResponse instead */
renderAndWait?: T extends []
? (props: ActionRenderPropsNoArgsWait<T>) => React.ReactElement
: (props: ActionRenderPropsWait<T>) => React.ReactElement;
renderAndWaitForResponse?: T extends []
? (props: ActionRenderPropsNoArgsWait<T>) => React.ReactElement
: (props: ActionRenderPropsWait<T>) => React.ReactElement;
handler?: never;
}
);
export type CatchAllFrontendAction = {
name: "*";
render: (props: CatchAllActionRenderProps<any>) => React.ReactElement;
};
export type RenderFunctionStatus = ActionRenderProps<any>["status"];
export function processActionsForRuntimeRequest(actions: FrontendAction<any>[]) {
const filteredActions = actions
.filter(
(action) =>
action.available !== ActionInputAvailability.Disabled &&
action.disabled !== true &&
action.name !== "*" &&
action.available != "frontend" &&
!action.pairedAction,
)
.map((action) => {
let available: ActionInputAvailability | undefined = ActionInputAvailability.Enabled;
if (action.disabled) {
available = ActionInputAvailability.Disabled;
} else if (action.available === "disabled") {
available = ActionInputAvailability.Disabled;
} else if (action.available === "remote") {
available = ActionInputAvailability.Remote;
}
return {
name: action.name,
description: action.description || "",
jsonSchema: JSON.stringify(actionParametersToJsonSchema(action.parameters || [])),
available,
};
});
return filteredActions;
}
</shell_result>
The useRenderToolCall hook API signature in documentation is incomplete—missing the "executing" status state.
The hook exists and is properly exported from @copilotkit/react-core. The render function correctly receives {status, args} as documented. However, the example code only handles "complete" status but the actual API defines three possible states: "inProgress", "executing", and "complete".
Lines 116–118 handle only two cases, leaving "executing" state unhandled:
{status !== "complete" && "Calling weather API..."} // Conflates inProgress + executing
{status === "complete" && `Called the weather API for ${args.location}.`}This should distinguish all three states for proper UX:
"inProgress": Partial args, request starting"executing": Full args available, awaiting result"complete": Full args and result available
🤖 Prompt for AI Agents
In docs/content/docs/crewai-flows/generative-ui/backend-tools.mdx around lines
104 to 124, update the example in app/page.tsx to handle all three
useRenderToolCall statuses instead of conflating them; replace the current
conditional block at lines ~116–118 with distinct handling for "inProgress"
(show starting message and partial args if present), "executing" (show that full
args are available and waiting for result), and "complete" (show final result
message using args), ensuring the render function checks status explicitly and
uses args safely when present.
⏭️ Changeset Not RequiredLatest commit: 19ea710 No changes in this PR affected the Changeset is not required for this PR. |
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
docs/content/docs/crewai-flows/frontend-actions.mdx (1)
51-80: Update example to useuseFrontendTool(the modern replacement for deprecateduseCopilotAction).The reference documentation confirms that
useCopilotActionis being deprecated in favor ofuseFrontendToolfor frontend tools with handlers. The documentation at/reference/hooks/useCopilotAction.mdxexplicitly states this and includes a migration guide. Update the import and hook name:import { useFrontendTool } from "@copilotkit/react-core" // [!code highlight] export function Page() { // ... // [!code highlight:16] useFrontendTool({ name: "sayHello", description: "Say hello to the user", parameters: [ { name: "name", type: "string", description: "The name of the user to say hello to", required: true, }, ], handler: async ({ name }) => { alert(`Hello, ${name}!`); }, }); // ... }(Note: The
available: "remote"property is no longer shown in the reference example—verify if this property is still supported inuseFrontendToolor should be removed.)
♻️ Duplicate comments (1)
docs/content/docs/crewai-flows/generative-ui/backend-tools.mdx (1)
113-120: TheuseRenderToolCallrender function does not handle all three status states.The render function conflates
"inProgress"and"executing"states. Per theFrontendActiontype definition in@copilotkit/react-core, therendercallback receives one of three possible statuses, each with semantic meaning:
"inProgress": Arguments are being collected (partial args available)"executing": Full arguments collected, awaiting result"complete": Execution finished with result availableThe current conditional at lines 116–117 only distinguishes
"complete", leaving both"inProgress"and"executing"to show the same message. This should be fixed to provide proper UX feedback for each state:useRenderToolCall({ name: "get_weather", render: ({status, args}) => { return ( <p className="text-gray-500 mt-2"> - {status !== "complete" && "Calling weather API..."} - {status === "complete" && `Called the weather API for ${args.location}.`} + {status === "inProgress" && "Collecting arguments..."} + {status === "executing" && `Calling weather API for ${args.location}...`} + {status === "complete" && `Called the weather API for ${args.location}.`} </p> ); }, });
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
docs/content/docs/crewai-flows/frontend-actions.mdx(3 hunks)docs/content/docs/crewai-flows/generative-ui/agentic.mdx(3 hunks)docs/content/docs/crewai-flows/generative-ui/backend-tools.mdx(4 hunks)docs/content/docs/crewai-flows/human-in-the-loop/flow.mdx(3 hunks)docs/content/docs/crewai-flows/shared-state/in-app-agent-read.mdx(3 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- docs/content/docs/crewai-flows/generative-ui/agentic.mdx
- docs/content/docs/crewai-flows/shared-state/in-app-agent-read.mdx
🧰 Additional context used
🧠 Learnings (15)
📚 Learning: 2025-11-26T15:01:08.236Z
Learnt from: CR
Repo: CopilotKit/CopilotKit PR: 0
File: .cursor/rules/quick-reference.mdc:0-0
Timestamp: 2025-11-26T15:01:08.236Z
Learning: For integrating with CrewAI, use coagents-starter-crewai-crews for crews and coagents-starter-crewai-flows for flows
Applied to files:
docs/content/docs/crewai-flows/human-in-the-loop/flow.mdxdocs/content/docs/crewai-flows/generative-ui/backend-tools.mdxdocs/content/docs/crewai-flows/frontend-actions.mdx
📚 Learning: 2025-11-26T15:01:08.236Z
Learnt from: CR
Repo: CopilotKit/CopilotKit PR: 0
File: .cursor/rules/quick-reference.mdc:0-0
Timestamp: 2025-11-26T15:01:08.236Z
Learning: For building a simple Copilot, start with the copilot-chat-with-your-data example, use react-core for basic integration, and add react-ui for pre-built components
Applied to files:
docs/content/docs/crewai-flows/human-in-the-loop/flow.mdxdocs/content/docs/crewai-flows/generative-ui/backend-tools.mdxdocs/content/docs/crewai-flows/frontend-actions.mdx
📚 Learning: 2025-11-26T15:01:08.236Z
Learnt from: CR
Repo: CopilotKit/CopilotKit PR: 0
File: .cursor/rules/quick-reference.mdc:0-0
Timestamp: 2025-11-26T15:01:08.236Z
Learning: Frontend applications should follow the pattern: Next.js app with CopilotProvider and CopilotChat component
Applied to files:
docs/content/docs/crewai-flows/human-in-the-loop/flow.mdxdocs/content/docs/crewai-flows/generative-ui/backend-tools.mdxdocs/content/docs/crewai-flows/frontend-actions.mdx
📚 Learning: 2025-11-26T15:01:08.236Z
Learnt from: CR
Repo: CopilotKit/CopilotKit PR: 0
File: .cursor/rules/quick-reference.mdc:0-0
Timestamp: 2025-11-26T15:01:08.236Z
Learning: For developing JavaScript agents, use the sdk-js package from CopilotKit/packages/sdk-js and reference coagents-starter/agent-js for examples
Applied to files:
docs/content/docs/crewai-flows/human-in-the-loop/flow.mdxdocs/content/docs/crewai-flows/generative-ui/backend-tools.mdxdocs/content/docs/crewai-flows/frontend-actions.mdx
📚 Learning: 2025-11-26T15:00:13.211Z
Learnt from: CR
Repo: CopilotKit/CopilotKit PR: 0
File: .cursor/rules/agent-development.mdc:0-0
Timestamp: 2025-11-26T15:00:13.211Z
Learning: Applies to **/agent-py/**/*.py : Import agent components from the copilotkit package in Python agents
Applied to files:
docs/content/docs/crewai-flows/human-in-the-loop/flow.mdxdocs/content/docs/crewai-flows/generative-ui/backend-tools.mdx
📚 Learning: 2025-11-26T15:00:13.211Z
Learnt from: CR
Repo: CopilotKit/CopilotKit PR: 0
File: .cursor/rules/agent-development.mdc:0-0
Timestamp: 2025-11-26T15:00:13.211Z
Learning: Applies to **/agent-py/**/*.py : Use CrewAI integration from copilotkit.crewai for CrewAI-based agents
Applied to files:
docs/content/docs/crewai-flows/human-in-the-loop/flow.mdxdocs/content/docs/crewai-flows/generative-ui/backend-tools.mdxdocs/content/docs/crewai-flows/frontend-actions.mdx
📚 Learning: 2025-11-26T15:00:13.211Z
Learnt from: CR
Repo: CopilotKit/CopilotKit PR: 0
File: .cursor/rules/agent-development.mdc:0-0
Timestamp: 2025-11-26T15:00:13.211Z
Learning: Applies to **/agent-js/**/package.json : Install copilotkit/sdk-js package for JavaScript agents
Applied to files:
docs/content/docs/crewai-flows/human-in-the-loop/flow.mdxdocs/content/docs/crewai-flows/generative-ui/backend-tools.mdxdocs/content/docs/crewai-flows/frontend-actions.mdx
📚 Learning: 2025-11-26T15:01:32.085Z
Learnt from: CR
Repo: CopilotKit/CopilotKit PR: 0
File: .cursor/rules/suggestions-development.mdc:0-0
Timestamp: 2025-11-26T15:01:32.085Z
Learning: Applies to **/*use-copilot-chat*.{ts,tsx} : Use effect dependencies properly to handle timing between configuration registration and suggestion generation without requiring timeouts
Applied to files:
docs/content/docs/crewai-flows/generative-ui/backend-tools.mdx
📚 Learning: 2025-11-26T15:00:22.337Z
Learnt from: CR
Repo: CopilotKit/CopilotKit PR: 0
File: .cursor/rules/copilotkit-architecture.mdc:0-0
Timestamp: 2025-11-26T15:00:22.337Z
Learning: Example projects should follow the pattern of having agent/ or agent-py/ for backend implementation, ui/ for Next.js frontend, and README.md for documentation
Applied to files:
docs/content/docs/crewai-flows/generative-ui/backend-tools.mdx
📚 Learning: 2025-11-26T15:00:13.211Z
Learnt from: CR
Repo: CopilotKit/CopilotKit PR: 0
File: .cursor/rules/agent-development.mdc:0-0
Timestamp: 2025-11-26T15:00:13.211Z
Learning: Start with a simple agent template when developing new agents
Applied to files:
docs/content/docs/crewai-flows/generative-ui/backend-tools.mdx
📚 Learning: 2025-11-26T15:01:08.236Z
Learnt from: CR
Repo: CopilotKit/CopilotKit PR: 0
File: .cursor/rules/quick-reference.mdc:0-0
Timestamp: 2025-11-26T15:01:08.236Z
Learning: For developing Python agents, use the sdk-python package and reference copilotkit/agent.py for the main agent class
Applied to files:
docs/content/docs/crewai-flows/generative-ui/backend-tools.mdx
📚 Learning: 2025-11-26T15:00:44.788Z
Learnt from: CR
Repo: CopilotKit/CopilotKit PR: 0
File: .cursor/rules/examples-and-demos.mdc:0-0
Timestamp: 2025-11-26T15:00:44.788Z
Learning: Run examples by navigating to the example directory, installing dependencies with `npm install` or `pip install -r requirements.txt`, and executing `npm run dev` for the frontend and `npm run agent` or `python agent.py` for the agent
Applied to files:
docs/content/docs/crewai-flows/generative-ui/backend-tools.mdxdocs/content/docs/crewai-flows/frontend-actions.mdx
📚 Learning: 2025-11-26T15:00:55.744Z
Learnt from: CR
Repo: CopilotKit/CopilotKit PR: 0
File: .cursor/rules/frontend-development.mdc:0-0
Timestamp: 2025-11-26T15:00:55.744Z
Learning: Applies to **/*.{ts,tsx} : Use CopilotKit provided hooks (useCopilotChat, useCopilotAction, useCopilotReadable) and utilities in React components
Applied to files:
docs/content/docs/crewai-flows/generative-ui/backend-tools.mdxdocs/content/docs/crewai-flows/frontend-actions.mdx
📚 Learning: 2025-11-26T15:01:08.236Z
Learnt from: CR
Repo: CopilotKit/CopilotKit PR: 0
File: .cursor/rules/quick-reference.mdc:0-0
Timestamp: 2025-11-26T15:01:08.236Z
Learning: For setting up the development environment, review CopilotKit/package.json for workspace setup, use scripts in CopilotKit/scripts, and check utilities for shared configurations
Applied to files:
docs/content/docs/crewai-flows/frontend-actions.mdx
📚 Learning: 2025-11-26T15:00:55.744Z
Learnt from: CR
Repo: CopilotKit/CopilotKit PR: 0
File: .cursor/rules/frontend-development.mdc:0-0
Timestamp: 2025-11-26T15:00:55.744Z
Learning: Applies to **/*.{ts,tsx} : Use CopilotProvider at the root of the application to wrap all app components
Applied to files:
docs/content/docs/crewai-flows/frontend-actions.mdx
🔇 Additional comments (10)
docs/content/docs/crewai-flows/generative-ui/backend-tools.mdx (6)
12-19: LGTM — IframeSwitcher implementation is well-structured with proper URLs and attributes.
105-105: API replacement is correct. The migration fromuseCopilotActiontouseRenderToolCallis accurate and properly imported from@copilotkit/react-core.
133-146: LGTM — Video element and Callout are well-structured with proper attributes and context link.
151-153: LGTM — The new "Default Tool Rendering" section is concise and follows the established component pattern.
40-40: LGTM — RunAndConnect component usage is correct and follows the established pattern.
9-10: Both imported snippets exist and import paths are correctly specified.The verification confirms that both MDX snippet files referenced in the imports are present in the repository:
- ✓
@/snippets/shared/guides/default-tool-rendering.mdxexists atdocs/snippets/shared/guides/default-tool-rendering.mdx- ✓
@/snippets/integrations/crewai-flows/run-and-connect.mdxexists atdocs/snippets/integrations/crewai-flows/run-and-connect.mdxNo issues found with these imports.
docs/content/docs/crewai-flows/frontend-actions.mdx (1)
1-5: Verify navigation paths and link consistency after file rename.The file is being renamed to "frontend-tools.mdx" (line 2), but the content contains references to "frontend-actions" in navigation links (lines 24, 39). Additionally, the terminology switches between "frontend actions" and "frontend tools" throughout the implementation section.
Please verify:
- The correct link paths in lines 24 and 39 after this file rename.
- Whether all instances of "frontend actions" in the implementation (lines 92, 105, 108, 110) should be updated to "frontend tools" for consistency.
- Whether the Callout on line 39 should link to a separate "Frontend Actions" document or if it should reference "Frontend Tools."
docs/content/docs/crewai-flows/human-in-the-loop/flow.mdx (3)
10-17: Clarify intentional use of dual video + iframe components.The file now includes both:
- IframeSwitcher at the top (lines 10-17) for interactive demo/code views
- Video embed at bottom (lines 194-202) for demonstration video
Per the summary, this dual approach is intentional. However, confirm this is the desired information architecture and not accidental duplication. Both serve different purposes (interactive viewer vs. playable video demonstration), but document the reasoning if this pattern is repeated across docs.
Also applies to: 194-202
10-17: The feature-viewer URLs are accessible and stable.Both URLs return HTTP 200 responses with valid HTML content, confirming they are currently operational and serve the expected demo and code views with the correct feature path
/langgraph/feature/human_in_the_loop.
7-8: All component imports resolve correctly.Both the
IframeSwitchercomponent andRunAndConnectsnippet exist at their referenced paths and are properly configured:
IframeSwitcheris exported fromdocs/components/content/index.tsand the component exists indocs/components/content/iframe-switcher.tsxRunAndConnectsnippet exists atdocs/snippets/integrations/crewai-flows/run-and-connect.mdx- The
@/alias indocs/tsconfig.jsoncorrectly resolves to thedocs/directory root
| import InstallSDKSnippet from "@/snippets/install-python-sdk-crew.mdx"; | ||
|
|
||
| import { Tabs, Tab } from "fumadocs-ui/components/tabs"; | ||
| import { IframeSwitcher } from "@/components/content" |
There was a problem hiding this comment.
Fix missing semicolon in import statement.
Import statements should end with a semicolon for consistency and proper syntax.
-import { IframeSwitcher } from "@/components/content"
+import { IframeSwitcher } from "@/components/content";📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| import { IframeSwitcher } from "@/components/content" | |
| import { IframeSwitcher } from "@/components/content"; |
🤖 Prompt for AI Agents
In docs/content/docs/crewai-flows/frontend-actions.mdx around line 8, the import
statement "import { IframeSwitcher } from "@/components/content"" is missing a
trailing semicolon; update the line to end with a semicolon so the import reads
correctly and follows project style (add ";" at the end of the import
statement).
|
|
||
| If you don't already have an agent, you can use the [coagent starter](https://github.com/CopilotKit/CopilotKit/tree/main/examples/coagents-starter-crewai-flows) as a starting point | ||
| as this guide uses it as a starting point. | ||
| <RunAndConnect components={props.components} /> |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# First, let's examine the flow.mdx file to see the imports and context around line 43
cat -n docs/content/docs/crewai-flows/human-in-the-loop/flow.mdx | head -60Repository: CopilotKit/CopilotKit
Length of output: 186
🌐 Web query:
CopilotKit RunAndConnect component crewai-flows documentation
💡 Result:
I couldn't find a public CopilotKit component named "RunAndConnect." Do you mean the CopilotKit starter that integrates with CrewAI Flows (examples and components for connecting/running flows)? If so, here are relevant docs/starters — tell me whether you want (a) the example repo code, (b) CopilotKit React API docs, or (c) CrewAI Flows docs and I’ll pull the exact files/snippets:
- CopilotKit starter for CrewAI Flows (repo). [1]
- CopilotKit main repo / docs (React components & runtime). [2]
- CrewAI Flows documentation (Flows concepts and running flows). [3]
Which of the three (or something else) would you like me to fetch or inspect for the RunAndConnect behavior?
🌐 Web query:
site:github.com CopilotKit RunAndConnect component
💡 Result:
I searched GitHub and could not find any file or component named "RunAndConnect" in the CopilotKit organization or repositories. The main CopilotKit repo and related repos are present, but no RunAndConnect component appears in search results. (github.com)
Would you like me to:
- search the entire web (not just GitHub) for RunAndConnect, or
- search for similarly named components (e.g., runAndConnect, RunAndConnect.tsx) within CopilotKit?
Citations:
🌐 Web query:
site:github.com/CopilotKit "RunAndConnect" OR "runAndConnect" OR "run-and-connect"
💡 Result:
I searched the CopilotKit GitHub organization and found no occurrences of "RunAndConnect", "runAndConnect", or "run-and-connect" in their repositories. [1]
Would you like me to search all of GitHub (not limited to CopilotKit) or search the web more widely for those terms? [1] https://github.com/CopilotKit
RunAndConnect component cannot be found in the CopilotKit codebase.
Exhaustive searches across the entire CopilotKit GitHub organization (including all name variations: RunAndConnect, runAndConnect, run-and-connect) returned no results. The component referenced at line 43 in docs/content/docs/crewai-flows/human-in-the-loop/flow.mdx does not exist in public repositories. Either the component is missing from the codebase, the name is incorrect, or this file references a component that has not yet been implemented or committed.
🤖 Prompt for AI Agents
In docs/content/docs/crewai-flows/human-in-the-loop/flow.mdx around line 43, the
MDX references a React component RunAndConnect that does not exist in the
CopilotKit codebase; either the component name is wrong, missing, or not
committed. Fix by one of: (a) correct the reference to the actual exported
component name (search codebase for the intended component and update the JSX to
that name and ensure the import/props match), (b) if the component is missing,
implement and export a RunAndConnect component in the appropriate package/path
and add the import where this MDX expects it, or (c) remove/replace the JSX with
an existing documented component and update the docs accordingly; also ensure
any necessary import statement is added at the top of the MDX and commit the
component file if newly created.
What does this PR do?
Canonicalizes partner docs for CrewAI Flows
Related PRs and Issues
Checklist
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.