wehub/copilotkit--copilotkit
1
0
Fork 0
Code Issues Pull Requests Actions Deployments Models Agent Notes Packages Projects Releases Wiki Activity

chore: import upstream snapshot with attribution

Browse Source
This commit is contained in:
wehub-resource-sync
2026-07-13 12:58:18 +08:00
commit 6d5d58c1a9
18293 changed files with 3502153 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.cursor/rules/agent-development.mdc
+103
View File
@@ -0,0 +1,103 @@
---
description:
globs:
alwaysApply: false
---
# CopilotKit Agent Development Guide
## Agent Types
### Python Agents
Python agents are typically in folders named `agent-py/` or `agent/` and use the [sdk-python/](mdc:sdk-python/) package.
#### Core Python SDK Components
- **[copilotkit/agent.py](mdc:sdk-python/copilotkit/agent.py)** - Main agent class
- **[copilotkit/action.py](mdc:sdk-python/copilotkit/action.py)** - Action definitions
- **[copilotkit/crewai/](mdc:sdk-python/copilotkit/crewai/)** - CrewAI integration
- **[copilotkit/integrations/](mdc:sdk-python/copilotkit/integrations/)** - Third-party integrations
#### Python Agent Examples
- **[coagents-starter/agent-py/](mdc:examples/coagents-starter/agent-py/)** - Basic Python agent setup
- **[coagents-ai-researcher/agent/](mdc:examples/coagents-ai-researcher/agent/)** - Research agent with web scraping
- **[coagents-travel/agent/](mdc:examples/coagents-travel/agent/)** - Travel planning agent
- **[langgraph-tutorial-quickstart/agent-py/](mdc:examples/langgraph-tutorial-quickstart/agent-py/)** - LangGraph integration
### JavaScript Agents
JavaScript agents are in folders named `agent-js/` and use the [sdk-js/](mdc:packages/sdk-js/) package.
#### JavaScript Agent Examples
- **[coagents-starter/agent-js/](mdc:examples/coagents-starter/agent-js/)** - Basic JavaScript agent setup
- **[coagents-qa-native/agent-js/](mdc:examples/coagents-qa-native/agent-js/)** - Native JavaScript QA agent
- **[coagents-routing/agent-js/](mdc:examples/coagents-routing/agent-js/)** - Routing agent
## Agent Patterns
### Single Agent Pattern
Simple agents that handle specific tasks:
- File structure: `agent/main.py` or `agent/index.js`
- Direct communication with frontend
- Good for focused use cases
### Multi-Agent (Coagents) Pattern
Complex systems with multiple cooperating agents:
- Multiple agent files or classes
- Shared state management
- Agent routing and coordination
- Examples: [coagents-routing/](mdc:examples/coagents-routing/), [coagents-shared-state/](mdc:examples/coagents-shared-state/)
### CrewAI Integration Pattern
Using CrewAI for agent orchestration:
- **Flows**: [coagents-starter-crewai-flows/](mdc:examples/coagents-starter-crewai-flows/)
### LangGraph Integration Pattern
Using LangGraph for agent state management:
- **[langgraph-tutorial-quickstart/](mdc:examples/langgraph-tutorial-quickstart/)** - Basic LangGraph setup
- **[langgraph-tutorial-customer-support/](mdc:examples/langgraph-tutorial-customer-support/)** - Customer support bot
- Uses [langgraph.json](mdc:sdk-python/langgraph.json) for configuration
## Agent Setup
### Python Agent Setup
1. Use [requirements-template.txt](mdc:examples/shared/requirements-template.txt) as a starting point
2. Configure [pyproject-template.toml](mdc:examples/shared/pyproject-template.toml)
3. Import from `copilotkit` package
4. Define actions and agent logic
### JavaScript Agent Setup
1. Install `@copilotkit/sdk-js` package
2. Configure TypeScript with proper types
3. Define actions and agent endpoints
4. Set up Express.js server or similar
## Common Agent Features
### Actions
- Define functions that agents can call
- Handle user interactions
- Modify application state
- Examples in action.py files across examples
### State Management
- Shared state between agents
- Persistent state across conversations
- Example: [coagents-shared-state/](mdc:examples/coagents-shared-state/)
### User Input Handling
- Wait for user input during agent execution
- Interactive workflows
- Example: [coagents-wait-user-input/](mdc:examples/coagents-wait-user-input/)
### Integration Patterns
- Vector databases (Pinecone, MongoDB Atlas)
- LLM providers (OpenAI, Anthropic)
- External APIs and services
## Development Best Practices
1. Start with a simple agent template
2. Define clear actions and interfaces
3. Handle errors gracefully
4. Test with the corresponding UI example
5. Use shared utilities from [examples/shared/](mdc:examples/shared/)
6. Follow the established patterns in existing examples
.cursor/rules/copilotkit-architecture.mdc
+45
View File
@@ -0,0 +1,45 @@
---
description:
globs:
alwaysApply: false
---
# CopilotKit Architecture Overview
## Core Library Structure
The main CopilotKit library is located in [CopilotKit/](mdc:./) with the following key packages:
### React Packages
- **[react-core/](mdc:packages/react-core/)** - Core React components and hooks for CopilotKit
- **[react-textarea/](mdc:packages/react-textarea/)** - Textarea component with AI integration
- **[react-ui/](mdc:packages/react-ui/)** - UI components for copilot interfaces
### Runtime & SDK
- **[runtime/](mdc:packages/runtime/)** - Core runtime for executing copilot actions
- **[runtime-client-gql/](mdc:packages/runtime-client-gql/)** - GraphQL client for runtime communication
- **[sdk-js/](mdc:packages/sdk-js/)** - JavaScript SDK for backend integration
- **[shared/](mdc:packages/shared/)** - Shared utilities and types
### Python SDK
- **[sdk-python/](mdc:sdk-python/)** - Python SDK with integrations for:
- CrewAI agents in [crewai/](mdc:sdk-python/copilotkit/crewai/)
- LangGraph integrations
- OpenAI integrations in [openai/](mdc:sdk-python/copilotkit/openai/)
## Key Concepts
- **Copilots**: AI assistants that can read and write application state
- **Actions**: Functions that copilots can call to interact with your application
- **Agents**: Backend AI agents that process complex tasks
- **Coagents**: Multi-agent systems for complex workflows
## Examples Structure
All examples are in [examples/](mdc:examples/) and typically follow this pattern:
- `agent/` or `agent-py/` - Backend agent implementation
- `ui/` - Frontend Next.js application
- `README.md` - Setup and usage instructions
## Development Workflow
- Examples use the local packages via workspace references
- [package.json](mdc:package.json) contains workspace configuration
- Scripts in [scripts/](mdc:scripts/) for development, testing, and releases
.cursor/rules/development-workflow.mdc
+65
View File
@@ -0,0 +1,65 @@
---
description:
globs:
alwaysApply: false
---
# CopilotKit Development Workflow
## Workspace Setup
CopilotKit uses a monorepo structure with:
- **[package.json](mdc:package.json)** - Main workspace configuration
- **[packages/](mdc:packages)** - Core library packages
- **[examples/](mdc:examples)** - Example applications
## Development Scripts
Located in [scripts/](mdc:scripts):
### Development Scripts
- **[develop/](mdc:scripts/develop)** - Development environment setup
- **[qa/](mdc:scripts/qa)** - Quality assurance and testing scripts
- **[release/](mdc:scripts/release)** - Release automation scripts
### Documentation Scripts
- **[docs/](mdc:scripts/docs)** - Documentation generation and management
## Package Management
- Uses pnpm workspaces for package management
- Local packages are linked automatically within the workspace
- Examples reference local packages via workspace protocol
## Testing
- **[e2e/](mdc:examples/e2e)** - End-to-end testing setup with Playwright
- **[playwright.config.ts](mdc:examples/e2e/playwright.config.ts)** - Playwright configuration
- Test results in [test-results/](mdc:examples/e2e/test-results)
## Documentation Site
- **[docs/](mdc:docs)** - Documentation website built with Next.js
- **[content/docs/](mdc:docs/content/docs)** - Markdown documentation files
- **[components/react/](mdc:docs/components/react)** - React component examples
- **[snippets/](mdc:docs/snippets)** - Code snippets for documentation
## Configuration Files
- **[CopilotKit.code-workspace](mdc:CopilotKit.code-workspace)** - VS Code workspace settings
- **[utilities/](mdc:utilities)** - Shared utilities:
- [tailwind-config/](mdc:utilities/tailwind-config) - Tailwind CSS configuration
- [tsconfig/](mdc:utilities/tsconfig) - TypeScript configurations
## Infrastructure
- **[infra/](mdc:infra)** - AWS CDK infrastructure code
- **[helmfile/](mdc:examples/helmfile)** - Kubernetes deployment configuration
- **[Dockerfile.*](mdc:examples/Dockerfile.agent-js)** - Docker configurations for different components
## Component Registry
- **[registry/](mdc:registry)** - Component registry for reusable components
- **[registry/registry/](mdc:registry/registry)** - Registry content:
- [chat/](mdc:registry/registry/chat) - Chat components
- [quickstarts/](mdc:registry/registry/quickstarts) - Quick start templates
## Development Best Practices
1. Work within the monorepo structure
2. Use the provided scripts for common tasks
3. Test changes with relevant examples
4. Follow the established patterns in existing code
5. Update documentation when adding new features
.cursor/rules/examples-and-demos.mdc
+58
View File
@@ -0,0 +1,58 @@
---
description:
globs:
alwaysApply: false
---
# CopilotKit Examples and Demos Guide
## Example Categories
### Coagents Examples
Multi-agent systems with complex workflows:
- **[coagents-starter/](mdc:examples/coagents-starter)** - Basic coagents setup with both JS and Python agents
- **[coagents-ai-researcher/](mdc:examples/coagents-ai-researcher)** - AI research assistant with web scraping
- **[coagents-travel/](mdc:examples/coagents-travel)** - Travel planning assistant
- **[coagents-qa/](mdc:examples/coagents-qa)** - Question-answering system
- **[coagents-research-canvas/](mdc:examples/coagents-research-canvas)** - Research canvas with collaborative editing
### CrewAI Integration Examples
- **[coagents-starter-crewai-flows/](mdc:examples/coagents-starter-crewai-flows)** - CrewAI flows integration
### Frontend-Focused Examples
- **[copilot-chat-with-your-data/](mdc:examples/copilot-chat-with-your-data)** - Chat interface with custom data
- **[copilot-form-filling/](mdc:examples/copilot-form-filling)** - AI-powered form filling
- **[copilot-fully-custom/](mdc:examples/copilot-fully-custom)** - Fully customized copilot implementation
- **[copilot-state-machine/](mdc:examples/copilot-state-machine)** - State machine integration
### Integration Examples
- **[copilot-openai-mongodb-atlas-vector-search/](mdc:examples/copilot-openai-mongodb-atlas-vector-search)** - OpenAI + MongoDB Atlas vector search
- **[copilot-anthropic-pinecone/](mdc:examples/copilot-anthropic-pinecone)** - Anthropic + Pinecone integration
### Framework Examples
- **[ag2/](mdc:examples/ag2)** - AG2 framework integration
- **[mastra/](mdc:examples/mastra)** - Mastra framework integration
- **[llamaindex/](mdc:examples/llamaindex)** - LlamaIndex integration
## Common Example Structure
Most examples follow this pattern:
```
example-name/
├── agent/ (or agent-py/) # Backend agent implementation
├── ui/ # Frontend Next.js application
├── README.md # Setup instructions
└── package.json # Dependencies
```
## Running Examples
1. Navigate to the example directory
2. Install dependencies: `npm install` or `pip install -r requirements.txt`
3. Follow the README.md instructions for setup
4. Run the frontend: `npm run dev`
5. Run the agent: `npm run agent` or `python agent.py`
## Demo Projects
Community demos are stored in:
- **[demos_2024/](mdc:community/demos_2024)** - 2024 community demos
- **[demos_2025/](mdc:community/demos_2025)** - 2025 community demos
.cursor/rules/frontend-development.mdc
+152
View File
@@ -0,0 +1,152 @@
---
description:
globs:
alwaysApply: false
---
# CopilotKit Frontend Development Guide
## Core React Packages
### React Components
- **[react-core/](mdc:packages/react-core/)** - Core React components and hooks
- `CopilotProvider` - Main provider component
- `useCopilotChat` - Chat functionality hook
- `useCopilotAction` - Action definition hook
- `useCopilotReadable` - State reading hook
### UI Components
- **[react-ui/](mdc:packages/react-ui/)** - Pre-built UI components
- `CopilotChat` - Chat interface component
- `CopilotPopup` - Popup chat component
- `CopilotSidebar` - Sidebar chat component
### Specialized Components
- **[react-textarea/](mdc:packages/react-textarea/)** - AI-enhanced textarea
- `CopilotTextarea` - Smart textarea with AI suggestions
- Auto-completion and suggestions
## Frontend Example Categories
### Basic Integration Examples
- **[copilot-chat-with-your-data/](mdc:examples/copilot-chat-with-your-data/)** - Chat with custom data
- **[copilot-form-filling/](mdc:examples/copilot-form-filling/)** - AI-powered form filling
- **[copilot-fully-custom/](mdc:examples/copilot-fully-custom/)** - Custom copilot implementation
### Advanced UI Examples
- **[copilot-state-machine/](mdc:examples/copilot-state-machine/)** - State machine integration
- **[demo-viewer/](mdc:examples/demo-viewer/)** - Demo viewer application
- **[saas-dynamic-dashboards/frontend/](mdc:examples/saas-dynamic-dashboards/frontend/)** - Dynamic dashboard UI
### Coagents UI Examples
Most coagents examples have a `ui/` folder with Next.js applications:
- **[coagents-starter/ui/](mdc:examples/coagents-starter/ui/)** - Basic coagents UI
- **[coagents-travel/ui/](mdc:examples/coagents-travel/ui/)** - Travel planning UI
- **[coagents-research-canvas/ui/](mdc:examples/coagents-research-canvas/ui/)** - Research canvas UI
## Component Registry
- **[registry/](mdc:registry/)** - Reusable component registry
- **[registry/registry/chat/](mdc:registry/registry/chat/)** - Chat components
- **[registry/registry/layout/](mdc:registry/registry/layout/)** - Layout components
- **[registry/registry/quickstarts/](mdc:registry/registry/quickstarts/)** - Quick start templates
## Common Frontend Patterns
### Provider Setup
```typescript
import { CopilotProvider } from '@copilotkit/react-core'
function App() {
return (
<CopilotProvider runtimeUrl="/api/copilotkit">
{/* Your app components */}
</CopilotProvider>
)
}
```
### Chat Integration
```typescript
import { CopilotChat } from '@copilotkit/react-ui'
function ChatInterface() {
return (
<CopilotChat
labels={{
title: "Your AI Assistant",
initial: "Hello! How can I help you today?"
}}
/>
)
}
```
### Actions and State
```typescript
import { useCopilotAction, useCopilotReadable } from '@copilotkit/react-core'
import { useState } from 'react'
function MyComponent() {
const [state, setState] = useState({})
// …
}
useCopilotReadable({
name: "current_state",
description: "Current application state",
value: state
})
useCopilotAction({
name: "update_state",
description: "Update application state",
parameters: [/* ... */],
handler: (args) => {
setState(args.newState)
}
})
}
```
## Documentation Components
- **[docs/components/react/](mdc:docs/components/react/)** - React component documentation
- **[docs/components/ui/](mdc:docs/components/ui/)** - UI component library
- **[docs/snippets/](mdc:docs/snippets/)** - Code snippets and examples
## Integration with Agents
### Runtime Configuration
- **[runtime/](mdc:packages/runtime/)** - Core runtime for agent communication
- **[runtime-client-gql/](mdc:packages/runtime-client-gql/)** - GraphQL client
### Agent Communication
- Frontend components communicate with agents via the runtime
- Actions defined in frontend are executed by backend agents
- State is synchronized between frontend and agents
## Development Best Practices
### Component Development
1. Use TypeScript for better type safety
2. Follow the established component patterns
3. Implement proper error handling
4. Use the provided hooks and utilities
### UI/UX Guidelines
1. Maintain consistent styling with Tailwind CSS
2. Use the component registry for reusable components
3. Implement responsive design
4. Provide clear user feedback
### Testing and Quality
1. Test components with different agent configurations
2. Use the E2E testing setup in [examples/e2e/](mdc:examples/e2e/)
3. Follow accessibility best practices
4. Validate agent integration flows
### Styling and Theming
- Uses Tailwind CSS for styling
- Shared configuration in [utilities/tailwind-config/](mdc:utilities/tailwind-config/)
- Custom components in [components.json](mdc:docs/components.json)
- UI components follow modern design patterns
.cursor/rules/quick-reference.mdc
+76
View File
@@ -0,0 +1,76 @@
---
description:
globs:
alwaysApply: false
---
# CopilotKit Quick Reference
## Need to...?
### Build a Simple Copilot
- Start with [copilot-chat-with-your-data/](mdc:examples/copilot-chat-with-your-data)
- Use [react-core/](mdc:packages/react-core) for basic integration
- Add [react-ui/](mdc:packages/react-ui) for pre-built components
### Create Multi-Agent Systems
- Check [coagents-starter/](mdc:examples/coagents-starter) for basic setup
- Use [coagents-routing/](mdc:examples/coagents-routing) for routing patterns
- See [coagents-shared-state/](mdc:examples/coagents-shared-state) for state management
### Integrate with CrewAI
- **Flows**: [coagents-starter-crewai-flows/](mdc:examples/coagents-starter-crewai-flows)
### Develop Python Agents
- Use [sdk-python/](mdc:sdk-python) package
- Check [copilotkit/agent.py](mdc:sdk-python/copilotkit/agent.py) for main agent class
- See [coagents-starter/agent-py/](mdc:examples/coagents-starter/agent-py) for example
### Develop JavaScript Agents
- Use [sdk-js/](mdc:packages/sdk-js) package
- Check [coagents-starter/agent-js/](mdc:examples/coagents-starter/agent-js) for example
### Customize UI Components
- Browse [registry/](mdc:registry) for reusable components
- Check [docs/components/react/](mdc:docs/components/react) for documentation
- Use [react-ui/](mdc:packages/react-ui) for pre-built components
### Set Up Development Environment
- Review [package.json](mdc:package.json) for workspace setup
- Use scripts in [scripts/](mdc:scripts)
- Check [utilities/](mdc:utilities) for shared configurations
### Run Tests
- Use [examples/e2e/](mdc:examples/e2e) for end-to-end testing
- Check [playwright.config.ts](mdc:examples/e2e/playwright.config.ts) for configuration
### Build Documentation
- Check [docs/](mdc:docs) for documentation site
- Use [docs/snippets/](mdc:docs/snippets) for code examples
- See [docs/content/docs/](mdc:docs/content/docs) for markdown files
## Key Files to Know
- **[package.json](mdc:package.json)** - Main workspace configuration
- **[sdk-python/pyproject.toml](mdc:sdk-python/pyproject.toml)** - Python SDK configuration
- **[CopilotKit.code-workspace](mdc:CopilotKit.code-workspace)** - VS Code workspace settings
- **[examples/shared/](mdc:examples/shared)** - Shared utilities and templates
## Common Patterns
1. **Frontend**: Next.js app with CopilotProvider and CopilotChat
2. **Backend**: Python or Node.js agent with actions and state management
3. **Integration**: Runtime connects frontend to backend agents
4. **Testing**: Playwright E2E tests for full integration validation
## Getting Started Checklist
1. Clone the repository
2. Navigate to the project root directory
3. Run `npm install` to set up workspace
4. Choose an example from [examples/](mdc:examples)
5. Follow the example's README.md
6. Start developing your custom copilot or agent
## Need Help?
- Check [CONTRIBUTING.md](mdc:CONTRIBUTING.md) for contribution guidelines
- Browse [community/](mdc:community) for demos and examples
- Look at [docs/](mdc:docs) for comprehensive documentation
.cursor/rules/suggestions-development.mdc
+100
View File
@@ -0,0 +1,100 @@
---
description: When working with suggesitons, always load this up.
globs:
alwaysApply: false
---
# Suggestions development guide
## Summary
CopilotKit comes with suggestions behavior that allows an LLM generate (or the developer to statically program) suggestions that appear in the UI. When clicked, these suggestions will add a message. The logic for suggestions is currently divided between Headless UI or our Prebuilt components.
The suggestions system includes intelligent streaming validation, debouncing, and robust error handling to ensure reliable performance and prevent infinite retry loops.
### Prebuilt components (CopilotChat)
The `CopilotChat` component has a `suggestions` prop that controls suggestion behavior:
- **"auto"** (default) - suggestions are generated automatically at the start of a chat and after every turn
- **"manual"** - suggestions will only be shown via `setSuggestions` or `generateSuggestions` from the `useCopilotChat` hook
- **SuggestionItem[]** - an array of static suggestion items to be used as suggestions always
The system automatically handles debouncing and cooldowns to prevent excessive API calls. It also waits for `useCopilotChatSuggestions` hooks to register their configuration before generating initial suggestions.
### Headless UI (useCopilotChat)
The `useCopilotChat` hook provides programmatic control over suggestions:
- `suggestions` - current suggestion array
- `setSuggestions` - manually set suggestions
- `generateSuggestions` - trigger AI generation
- `resetSuggestions` - clear all suggestions
- `isLoadingSuggestions` - loading state
Users can configure suggestions via `useCopilotChatSuggestions` hook which registers configuration that the auto-generation system uses.
## Core files
- **@react-ui**
- [Suggestions.tsx](mdc:packages/react-ui/src/components/chat/Suggestions.tsx) - How suggestions are rendered
- [Messages.tsx](mdc:packages/react-ui/src/components/chat/Messages.tsx) - Includes relevant code for what renders [Suggestions.tsx](mdc:packages/react-ui/src/components/chat/Suggestions.tsx)
- [Chat.tsx](mdc:packages/react-ui/src/components/chat/Chat.tsx) - Includes relevant logic for our prebuilt components loading suggestions
- [use-copilot-chat-suggestions.tsx](mdc:packages/react-ui/src/hooks/use-copilot-chat-suggestions.tsx) - How users specify the configuration for their suggestions
- [suggestions.css](mdc:packages/react-ui/src/css/suggestions.css) - Styling for suggestions
- **@react-core**
- [copilot-context.tsx](mdc:packages/react-core/src/context/copilot-context.tsx) - Where the actual suggestions are stored, the "provider" or "context"
- [use-copilot-chat.ts](mdc:packages/react-core/src/hooks/use-copilot-chat.ts) - Hook that controls and contains logic for suggestions, often referred to as "headless UI"
- [suggestions.ts](mdc:packages/react-core/src/utils/suggestions.ts) - Core suggestion generation logic with streaming validation and error handling
- [suggestions-constants.ts](mdc:packages/react-core/src/utils/suggestions-constants.ts) - Retry configuration constants
## How Suggestions Work
### Architecture Separation
- **CopilotChat Component**: Handles automatic suggestion behavior based on `suggestions` prop
- **useCopilotChat Hook**: Provides programmatic functions for manual control
- **useCopilotChatSuggestions Hook**: Registers configuration for auto-generation
### Timing and Race Conditions
The system handles race conditions between component mounting and configuration registration:
- Auto-suggestion logic waits for `chatSuggestionConfiguration` to be populated
- Effect dependencies include configuration to trigger when it becomes available
- No timeouts needed - React's effect system handles the timing naturally
### Streaming & Validation
During suggestion generation, the AI builds suggestions incrementally (e.g., `{}` → `{title: ''}` → `{title: 'Plan a trip'}`). The system handles this partial data gracefully without console spam, allowing partial suggestions during streaming but ensuring only complete, valid suggestions are shown to users.
### Performance & Reliability
- **Global Debouncing**: Only one suggestion generation can run at a time across the entire app
- **Error Handling**: Network/API errors (missing API keys, rate limits) are categorized and don't cause infinite retries
- **Abort Handling**: Clean cancellation of in-flight requests when new ones are initiated
- **Deduplication**: Automatic removal of duplicate suggestions based on message content
- **Fallback Messages**: If a suggestion doesn't have a message, the title is used as a fallback
## Development Guidelines
### Best Practices
1. **Don't modify suggestions state directly** - Always use the provided hooks and functions
2. **Test with missing API keys** - Ensure your app doesn't infinite loop on network errors
3. **Monitor console for errors** - Check for network or configuration issues
4. **Handle empty states** - Some configurations may not generate suggestions
5. **Use the right approach for your use case**:
- Use `suggestions="auto"` on CopilotChat for most cases
- Use `suggestions="manual"` when you want full programmatic control
- Use static arrays for fixed suggestions
### Common Issues & Solutions
- **No initial suggestions**: Check if `useCopilotChatSuggestions` is being called in your component
- **Race conditions**: The new architecture automatically handles timing between configuration and generation
- **Infinite re-renders**: Check useEffect dependencies, ensure they're properly memoized
- **Console spam**: Usually indicates streaming validation issues - check for partial data handling
- **Duplicate suggestions**: The system automatically deduplicates, but check your configurations
### Debugging
- Check console for error messages about network issues or invalid configurations
- Verify `useCopilotChatSuggestions` is registering configuration
- Check network tab for repeated API calls (should be minimal due to global debouncing)
- Verify abort controllers are cleaning up properly
## Testing Checklist
- [ ] Suggestions load on empty chat (when configuration is present)
- [ ] Suggestions clear when sending message
- [ ] No infinite API calls on network errors
- [ ] Clean console output (no spam)
- [ ] Proper abort handling when component unmounts
- [ ] Configuration registration timing works correctly
- [ ] Manual mode provides full programmatic control
.cursor/rules/working-with-rules.mdc
+6
View File
@@ -0,0 +1,6 @@
---
description:
globs:
alwaysApply: true
---
When you utilize a rule, always reconcile your work against the current rule you utilized. If they no longer match, please update the rule to reflect it and explicitly call out that you're doing so.