// Integrate CopilotKit AI components into Next.js frontend for building agentic UIs. Enables context-aware AI agents that can read app state and trigger tools/actions. Supports custom adapters for self-hosted LLMs and multiple provider integrations.
| name | copilotkit-nextjs-integration |
| description | Integrate CopilotKit AI components into Next.js frontend for building agentic UIs. Enables context-aware AI agents that can read app state and trigger tools/actions. Supports custom adapters for self-hosted LLMs and multiple provider integrations. |
| license | Proprietary (repository internal) |
| compatibility | Requires Next.js (13+), React (18+), TypeScript (5.0+) |
| metadata | {"repo":"raphaelmansuy/edgequake","area":"frontend-ai-integration","languages":["TypeScript","JavaScript"],"frameworks":["Next.js","React"],"patterns":["Agentic UI","Custom LLM adapters","Context-aware AI"]} |
Integrate CopilotKit AI components into your Next.js application to build intelligent, context-aware interfaces where AI agents can read application state and trigger actionable tools.
Use this skill when you need to:
CopilotKit is a bridge between your Next.js frontend and an LLM runtime endpoint:
[Next.js Frontend]
↕ state/actions/messages
[Copilot Runtime Endpoint]
↕ provider protocol
[LLM Adapter] → [OpenAI/Claude/Groq/Custom LLM]
The runtime:
useCopilotReadable hooks for contextuseCopilotActionCopilotPopup, CopilotSidebar, or custom headless chatnpm install @copilotkit/react @copilotkit/sdk
import { CopilotPopup } from "@copilotkit/react-ui";
import { CopilotKit } from "@copilotkit/react-core";
export default function App() {
return (
<CopilotKit runtimeUrl="http://localhost:8080/copilot">
<YourApp />
<CopilotPopup />
</CopilotKit>
);
}
import { useCopilotReadable } from "@copilotkit/react-core";
export function TaskList({ tasks }) {
useCopilotReadable({
description: "List of tasks for the user",
value: tasks
});
return (
<ul>
{tasks.map(task => <li key={task.id}>{task.title}</li>)}
</ul>
);
}
import { useCopilotAction } from "@copilotkit/react-core";
export function TaskPanel({ tasks, setTasks }) {
useCopilotAction({
name: "complete_task",
description: "Mark a task as complete",
parameters: [
{
name: "task_id",
description: "The ID of the task to complete",
type: "string"
}
],
handler: (taskId) => {
setTasks(tasks.map(t =>
t.id === taskId ? { ...t, completed: true } : t
));
}
});
return (
<div>
{tasks.map(task => (
<TaskCard key={task.id} task={task} />
))}
</div>
);
}
When implementing CopilotKit in your Next.js app:
<CopilotKit> provideruseCopilotReadable to expose relevant app datauseCopilotAction to enable AI-triggered operations<CopilotPopup>, <CopilotSidebar>, or custom chat UI<CopilotKit
runtimeUrl="http://localhost:8080/copilot" // Runtime endpoint
credentials="include" // Include cookies
headers={{ // Custom headers
"Authorization": `Bearer ${token}`
}}
>
useCopilotReadable({
description: "Clear description of this data",
value: importantData,
parentId: "parent-context", // Nest within context
categories: ["data", "state"] // Categorize for filtering
});
useCopilotAction({
name: "action_name", // Unique identifier
description: "What this does", // For AI model understanding
parameters: [ // Function parameters
{
name: "param_name",
description: "Parameter description",
type: "string", // Type for validation
required: true
}
],
handler: async (param) => { // Async function to execute
// Perform action, update state, call APIs
}
});
import { CopilotKit } from "@copilotkit/react-core";
<CopilotKit
runtimeUrl="http://localhost:8080/copilot"
credentials="include"
/>
// Implement custom adapter for proprietary LLM
class CustomLLMAdapter extends CopilotKitAdapter {
async chat(messages, model) {
// Call your custom LLM endpoint
const response = await fetch("https://your-llm/chat", {
method: "POST",
body: JSON.stringify({ messages, model })
});
return response.json();
}
}
// Use in runtime
const adapter = new CustomLLMAdapter({ apiKey: process.env.CUSTOM_API_KEY });
// Point to self-hosted Ollama, LM Studio, or vLLM
<CopilotKit
runtimeUrl="http://localhost:8080/copilot"
// Runtime configured to use self-hosted endpoint
/>
// Share CRM records and deal state
useCopilotReadable({
description: "Current CRM records visible to user",
value: crmRecords
});
// Enable bulk actions
useCopilotAction({
name: "update_deal_status",
description: "Update the status of one or more CRM deals",
parameters: [/* ... */],
handler: async (dealIds, newStatus) => {
await updateDeals(dealIds, newStatus);
refreshData();
}
});
// Expose task list and user preferences
useCopilotReadable({
description: "User's tasks and productivity preferences",
value: { tasks, preferences }
});
// Enable task manipulation
useCopilotAction({
name: "suggest_task_reorganization",
description: "Reorganize tasks based on priority",
handler: async (strategy) => {
const reorganized = reorganizeTasks(tasks, strategy);
setTasks(reorganized);
}
});
// Share cart state
useCopilotReadable({
description: "Shopping cart contents and user profile",
value: { cart, user }
});
// Enable checkout actions
useCopilotAction({
name: "apply_promotion",
description: "Apply a promotional code to the cart",
handler: async (code) => {
const discount = await validatePromo(code);
updateCartDiscount(discount);
}
});
For issues or questions:
Validate documentation traceability between code annotations (@implements), feature registry, business rules, and use cases. Detect ID collisions, undocumented features, broken cross-references, and namespace violations.
Service management for E2E testing in EdgeQuake. Start, stop, and monitor PostgreSQL, backend API, and frontend services. Includes health checks and logging utilities for interactive testing workflows.
Unified development workflow for EdgeQuake using Makefile commands. Use when starting services, running tests, or managing the full development stack (database, backend, frontend). Provides simplified alternatives to raw cargo/npm commands.
Validate PDF to Markdown conversion quality using multi-dimensional metrics. Assess table accuracy, style preservation (bold/italic/headings), robustness, and performance with standardized F1-scoring methodology.
Capture EdgeQuake WebUI routes with Playwright and write artifacts immediately (screenshots + per-page request JSON + capture index). Use when adding/updating Playwright E2E capture specs or when asked to automate UI screenshot collection.
Automatically generate comprehensive documentation for Rust and TypeScript codebases by analyzing code structure, patterns, and relationships. Supports trait-based patterns, async operations, React components, and Next.js applications.