Connecting Your Data

Specify `"use client"` (Next.js App Router)

This is only necessary if you are using Next.js with the App Router.

YourComponent.tsx

"use client"

Like other React hooks such as useState and useEffect, this is a client-side hook. If you're using Next.js with the App Router, you'll need to add the "use client" directive at the top of any file using this hook.

The `useCopilotReadable` Hook

For your copilot to best answer your users' needs, you will want to provide it with context-specific, user-specific, and oftentimes realtime data. CopilotKit makes it easy to do so.

YourComponent.tsx

import { useCopilotReadable } from "@copilotkit/react-core"; 
 
export function YourComponent() {
  const { colleagues } = useColleagues();
 
  // Define Copilot readable state

  useCopilotReadable({
    description: "The current user's colleagues",
    value: colleagues,
  });
 
  return (
    // Your custom UI component
    <>...</>
  );
}