{"id":"736a791a-3974-4c3d-9f91-a3e842369985","shortId":"AbnHgu","kind":"skill","title":"cometchat-react-router-patterns","tagline":"Framework-specific patterns for integrating CometChat React UI Kit v6 into React Router projects (v6 library mode and v7 framework mode). Covers SSR prevention, routing patterns, outlet nesting, and common pitfalls.","description":"## Purpose\n\nThis skill teaches Claude how to integrate CometChat into React Router projects. React Router exists in two distinct modes with very different integration patterns:\n\n- **v6 library mode:** React Router is used as a routing library in a Vite/CRA app. No SSR. Simple.\n- **v7 framework mode:** React Router is a full framework (successor to Remix) with file-system routing, loaders, actions, and SSR. Complex -- similar SSR concerns as Next.js.\n\n**Read these companion skills first:**\n- `cometchat-core` -- initialization, login, CSS, provider pattern, anti-patterns\n- `cometchat-components` -- component catalog and composition patterns\n- `cometchat-placement` -- WHERE to put chat (route, modal, drawer, embedded)\n\n---\n\n## 1. Project detection\n\n### Identifying React Router\n\n```bash\n# Check package.json for React Router\ngrep -E '\"react-router-dom\"|\"react-router\"' package.json\n```\n\n### Distinguishing v6 library mode from v7 framework mode\n\n```bash\n# v7 framework mode: has a config file\nls react-router.config.ts react-router.config.js 2>/dev/null\n\n# v6 library mode: uses createBrowserRouter or <BrowserRouter> in source\ngrep -rn \"createBrowserRouter\\|BrowserRouter\\|<Routes\" src/ --include=\"*.tsx\" --include=\"*.jsx\" 2>/dev/null | head -5\n```\n\n**Decision:**\n- If `react-router.config.ts` or `react-router.config.js` exists: **v7 framework mode**\n- If `react-router-dom` is in `package.json` with `createBrowserRouter` or `<BrowserRouter>` in source: **v6 library mode**\n- If `react-router` (not `react-router-dom`) is in `package.json` without a config file: likely v7 in library mode -- treat as v6 library mode\n\n---\n\n## 2. v6 library mode patterns\n\nv6 library mode is essentially a plain React app with routing. There are no SSR concerns. CometChat integration follows the same patterns as the `cometchat-react-patterns` skill, with routing-specific additions.\n\n### CometChatProvider placement\n\nMount the provider at the router level, wrapping the entire router or a specific route subtree:\n\n```tsx\n// src/main.tsx\nimport React from \"react\";\nimport ReactDOM from \"react-dom/client\";\nimport { RouterProvider } from \"react-router-dom\";\nimport { CometChatProvider } from \"./providers/CometChatProvider\";\nimport { router } from \"./router\";\nimport \"@cometchat/chat-uikit-react/css-variables.css\";\nimport \"./index.css\";\n\nReactDOM.createRoot(document.getElementById(\"root\")!).render(\n  <React.StrictMode>\n    <CometChatProvider>\n      <RouterProvider router={router} />\n    </CometChatProvider>\n  </React.StrictMode>\n);\n```\n\nThe provider implementation is the same as in `cometchat-react-patterns` section 2 -- uses `import.meta.env.VITE_COMETCHAT_*` for env vars.\n\n### Adding a route with createBrowserRouter\n\nFind the router configuration and add a new route:\n\n```tsx\n// src/router.tsx\nimport { createBrowserRouter } from \"react-router-dom\";\nimport Layout from \"./components/Layout\";\nimport HomePage from \"./pages/HomePage\";\nimport ChatPage from \"./pages/ChatPage\";\n\nexport const router = createBrowserRouter([\n  {\n    path: \"/\",\n    element: <Layout />,\n    children: [\n      { index: true, element: <HomePage /> },\n      { path: \"messages\", element: <ChatPage /> },\n      // ... existing routes\n    ],\n  },\n]);\n```\n\n### Adding a route with JSX Routes\n\n```tsx\n// In App.tsx\nimport { Routes, Route } from \"react-router-dom\";\nimport Layout from \"./components/Layout\";\nimport ChatPage from \"./pages/ChatPage\";\n\nfunction App() {\n  return (\n    <Routes>\n      <Route path=\"/\" element={<Layout />}>\n        <Route index element={<HomePage />} />\n        <Route path=\"messages\" element={<ChatPage />} />\n      </Route>\n    </Routes>\n  );\n}\n```\n\n### Nested conversation routes with Outlet\n\nA powerful pattern for React Router: use nested routes to show conversation details alongside the conversation list.\n\n```tsx\n// Router config\nexport const router = createBrowserRouter([\n  {\n    path: \"/\",\n    element: <Layout />,\n    children: [\n      {\n        path: \"messages\",\n        element: <ChatLayout />,\n        children: [\n          { index: true, element: <EmptyState /> },\n          { path: \":conversationId\", element: <ConversationView /> },\n        ],\n      },\n    ],\n  },\n]);\n```\n\n```tsx\n// ChatLayout.tsx -- renders conversation list + Outlet for message view\nimport { Outlet } from \"react-router-dom\";\nimport { CometChatConversations } from \"@cometchat/chat-uikit-react\";\nimport { useNavigate } from \"react-router-dom\";\n\nexport default function ChatLayout() {\n  const navigate = useNavigate();\n\n  return (\n    <div style={{ display: \"flex\", height: \"100vh\" }}>\n      <div style={{ width: \"360px\", borderRight: \"1px solid #eee\" }}>\n        <CometChatConversations\n          onItemClick={(conversation) => {\n            const id = conversation.getConversationId();\n            navigate(`/messages/${id}`);\n          }}\n        />\n      </div>\n      <div style={{ flex: 1, display: \"flex\", flexDirection: \"column\" }}>\n        <Outlet />\n      </div>\n    </div>\n  );\n}\n```\n\n```tsx\n// ConversationView.tsx -- renders messages for the selected conversation\nimport { useEffect, useState } from \"react\";\nimport { useParams } from \"react-router-dom\";\nimport {\n  CometChatMessageHeader,\n  CometChatMessageList,\n  CometChatMessageComposer,\n} from \"@cometchat/chat-uikit-react\";\nimport { CometChat } from \"@cometchat/chat-sdk-javascript\";\n\nexport default function ConversationView() {\n  const { conversationId } = useParams();\n  const [user, setUser] = useState<CometChat.User>();\n  const [group, setGroup] = useState<CometChat.Group>();\n\n  useEffect(() => {\n    if (!conversationId) return;\n\n    // Conversation IDs follow the pattern: \"user_<uid>\" or \"group_<guid>\"\n    if (conversationId.startsWith(\"user_\")) {\n      const uid = conversationId.replace(\"user_\", \"\");\n      CometChat.getUser(uid).then((u) => {\n        setUser(u);\n        setGroup(undefined);\n      });\n    } else if (conversationId.startsWith(\"group_\")) {\n      const guid = conversationId.replace(\"group_\", \"\");\n      CometChat.getGroup(guid).then((g) => {\n        setUser(undefined);\n        setGroup(g);\n      });\n    }\n  }, [conversationId]);\n\n  if (!user && !group) return null;\n\n  return (\n    <>\n      {user && <CometChatMessageHeader user={user} />}\n      {group && <CometChatMessageHeader group={group} />}\n      {user && <CometChatMessageList user={user} hideReplyInThreadOption={true} />}\n      {group && <CometChatMessageList group={group} hideReplyInThreadOption={true} />}\n      {user && <CometChatMessageComposer user={user} />}\n      {group && <CometChatMessageComposer group={group} />}\n    </>\n  );\n}\n```\n\n### useNavigate inside CometChat callbacks\n\nCometChat's `onItemClick` callbacks can use React Router's `useNavigate` to drive URL changes:\n\n```tsx\nimport { useNavigate } from \"react-router-dom\";\n\nfunction ConversationsList() {\n  const navigate = useNavigate();\n\n  return (\n    <CometChatConversations\n      onItemClick={(conversation) => {\n        const entity = conversation.getConversationWith();\n        if (entity instanceof CometChat.User) {\n          navigate(`/messages/user_${entity.getUid()}`);\n        } else if (entity instanceof CometChat.Group) {\n          navigate(`/messages/group_${entity.getGuid()}`);\n        }\n      }}\n    />\n  );\n}\n```\n\nThis works because `useNavigate` returns a stable function that CometChat's callback invokes in the browser.\n\n---\n\n## 3. v7 framework mode patterns\n\nReact Router v7 in framework mode is a full meta-framework with SSR, file-system routing, loaders, and actions. It has the same SSR concerns as Next.js: CometChat components cannot run on the server.\n\n### SSR prevention\n\nv7 renders components on the server by default. CometChat components will crash during server rendering. Use a `ClientOnly` wrapper:\n\n```tsx\n// app/components/ClientOnly.tsx\nimport { useState, useEffect, type ReactNode } from \"react\";\n\ninterface ClientOnlyProps {\n  children: ReactNode;\n  fallback?: ReactNode;\n}\n\nexport function ClientOnly({ children, fallback = null }: ClientOnlyProps) {\n  const [mounted, setMounted] = useState(false);\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  return mounted ? <>{children}</> : <>{fallback}</>;\n}\n```\n\nOr use `React.lazy` + `Suspense`:\n\n```tsx\nimport { lazy, Suspense } from \"react\";\n\nconst ChatView = lazy(() => import(\"../components/ChatView\"));\n\nexport default function MessagesRoute() {\n  return (\n    <ClientOnly fallback={<div>Loading chat...</div>}>\n      <Suspense fallback={<div>Loading chat...</div>}>\n        <ChatView />\n      </Suspense>\n    </ClientOnly>\n  );\n}\n```\n\n### CometChatProvider for v7 framework mode\n\nThe provider needs `ClientOnly` wrapping because `useEffect` runs on the client but the module import of `@cometchat/chat-uikit-react` happens on the server too:\n\n```tsx\n// app/providers/CometChatProvider.tsx\nimport React, { useEffect, useState, createContext, useContext } from \"react\";\n\ninterface CometChatContextValue {\n  isReady: boolean;\n  error: string | null;\n}\n\nconst CometChatContext = createContext<CometChatContextValue>({\n  isReady: false,\n  error: null,\n});\n\nexport const useCometChat = () => useContext(CometChatContext);\n\n// Module-level state prevents both double-init AND double-login in React\n// StrictMode. Without the loginInFlight guard, a second mount calls\n// login() while the first is still pending and the SDK throws\n// \"Please wait until the previous login request ends.\"\nlet initialized = false;\nlet loginInFlight: Promise<unknown> | null = null;\n\n// `ensureLoggedIn` is defined inside `setup()` below so it can close over\n// the dynamically-imported `CometChatUIKit`. Hoisting it to module scope\n// would `ReferenceError` because the static import is intentionally\n// removed (SSR safety) — `CometChatUIKit` only exists inside the await.\n\nexport function CometChatProvider({ children }: { children: React.ReactNode }) {\n  const [isReady, setIsReady] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n\n  useEffect(() => {\n    async function setup() {\n      try {\n        // Dynamic import to prevent server-side module resolution\n        const { CometChatUIKit, UIKitSettingsBuilder } = await import(\n          \"@cometchat/chat-uikit-react\"\n        );\n\n        async function ensureLoggedIn(uid: string, authToken?: string): Promise<void> {\n          const existing = await CometChatUIKit.getLoggedinUser();\n          if (existing) return;\n          if (loginInFlight) {\n            await loginInFlight;\n            return;\n          }\n          loginInFlight = authToken\n            ? CometChatUIKit.loginWithAuthToken(authToken)\n            : CometChatUIKit.login(uid);\n          try {\n            await loginInFlight;\n          } finally {\n            loginInFlight = null;\n          }\n        }\n\n        if (!initialized) {\n          initialized = true;\n\n          const settings = new UIKitSettingsBuilder()\n            .setAppId(import.meta.env.VITE_COMETCHAT_APP_ID)\n            .setRegion(import.meta.env.VITE_COMETCHAT_REGION)\n            .setAuthKey(import.meta.env.VITE_COMETCHAT_AUTH_KEY)\n            .subscribePresenceForAllUsers()\n            .build();\n\n          await CometChatUIKit.init(settings);\n        }\n\n        await ensureLoggedIn(\"cometchat-uid-1\"); // DEVELOPMENT ONLY — see cometchat-production skill\n\n        setIsReady(true);\n      } catch (e) {\n        setError(String(e));\n      }\n    }\n\n    setup();\n  }, []);\n\n  if (error) {\n    return (\n      <div style={{ color: \"red\", padding: 16, fontFamily: \"monospace\" }}>\n        CometChat Error: {error}\n      </div>\n    );\n  }\n\n  if (!isReady) return null;\n\n  return (\n    <CometChatContext.Provider value={{ isReady, error }}>\n      {children}\n    </CometChatContext.Provider>\n  );\n}\n```\n\n**Key difference from the plain React provider:** The `import(\"@cometchat/chat-uikit-react\")` is done dynamically inside `useEffect`, NOT at the top level. This prevents the server from trying to resolve the module.\n\n### Mount the provider\n\n**Option A — Chat-only app (all routes use CometChat):**\n\nWrap the entire app. This disables SSR for all routes since `ClientOnly` renders nothing on the server.\n\n```tsx\n// app/root.tsx\nimport { Outlet } from \"react-router\";\nimport { ClientOnly } from \"./components/ClientOnly\";\nimport { CometChatProvider } from \"./providers/CometChatProvider\";\n\nexport default function Root() {\n  return (\n    <html lang=\"en\">\n      <body>\n        <ClientOnly>\n          <CometChatProvider>\n            <Outlet />\n          </CometChatProvider>\n        </ClientOnly>\n      </body>\n    </html>\n  );\n}\n```\n\n**Option B — Mixed app (some routes need SSR):**\n\nKeep the root clean and scope CometChat to a layout route. Non-chat routes keep full SSR.\n\n```tsx\n// app/root.tsx — no CometChat here, SSR works normally\nimport { Outlet } from \"react-router\";\n\nexport default function Root() {\n  return (\n    <html lang=\"en\">\n      <body>\n        <Outlet />\n      </body>\n    </html>\n  );\n}\n```\n\n```tsx\n// app/routes/chat.tsx — layout route for all /chat/* paths\nimport { Outlet } from \"react-router\";\nimport { ClientOnly } from \"../components/ClientOnly\";\nimport { CometChatProvider } from \"../providers/CometChatProvider\";\n\nexport default function ChatLayout() {\n  return (\n    <ClientOnly fallback={<div>Loading chat...</div>}>\n      <CometChatProvider>\n        <Outlet />\n      </CometChatProvider>\n    </ClientOnly>\n  );\n}\n```\n\nThen nest chat routes under this layout (e.g. `app/routes/chat.messages.tsx`). Marketing pages, dashboards, and other non-chat routes render server-side as normal.\n\n**Use Option A** for apps where every page involves chat (messaging apps, social platforms). **Use Option B** for apps that add chat to an existing product (SaaS, marketplaces, support).\n\n### File-system routing\n\nv7 framework mode uses file-based routing. Create a route file:\n\n```tsx\n// app/routes/messages.tsx\nimport { lazy, Suspense } from \"react\";\nimport { ClientOnly } from \"../components/ClientOnly\";\n\nconst ChatView = lazy(() => import(\"../components/ChatView\"));\n\nexport default function MessagesRoute() {\n  return (\n    <ClientOnly fallback={<div>Loading chat...</div>}>\n      <Suspense fallback={<div>Loading chat...</div>}>\n        <ChatView />\n      </Suspense>\n    </ClientOnly>\n  );\n}\n```\n\n### Loaders and actions\n\n**NEVER put CometChat initialization or SDK calls in a `loader` or `action`.** Loaders and actions run on the server in v7 framework mode. CometChat requires browser APIs.\n\n```tsx\n// WRONG -- loader runs on the server\nexport async function loader() {\n  const { CometChat } = await import(\"@cometchat/chat-sdk-javascript\");\n  const user = await CometChat.getUser(\"uid\"); // crashes on server\n  return { user };\n}\n\n// CORRECT -- use clientLoader if you need chat data at route entry\nexport async function clientLoader() {\n  const { CometChat } = await import(\"@cometchat/chat-sdk-javascript\");\n  const user = await CometChat.getUser(\"uid\");\n  return { user };\n}\n```\n\n`clientLoader` runs only in the browser. It is the right place for CometChat data fetching at the route level. However, most CometChat integrations do not need loaders at all -- the components handle their own data fetching.\n\n---\n\n## 4. Outlet patterns for nested conversations\n\nThis pattern works in both v6 and v7. Chat as a parent route with nested child routes:\n\n```\n/messages                → Conversation list (left pane), empty state (right pane)\n/messages/:conversationId → Conversation list (left pane), messages (right pane)\n```\n\n### v6 route config\n\n```tsx\n{\n  path: \"messages\",\n  element: <ChatLayout />,\n  children: [\n    { index: true, element: <div style={{ flex: 1, display: \"flex\", alignItems: \"center\", justifyContent: \"center\", color: \"#999\" }}>Select a conversation</div> },\n    { path: \":conversationId\", element: <ConversationView /> },\n  ],\n}\n```\n\n### v7 file-system routes\n\n```\napp/routes/\n  messages.tsx          → ChatLayout (renders <Outlet />)\n  messages._index.tsx   → Empty state\n  messages.$conversationId.tsx → ConversationView\n```\n\n```tsx\n// app/routes/messages.tsx\nimport { Outlet } from \"react-router\";\nimport { ClientOnly } from \"../components/ClientOnly\";\nimport { lazy, Suspense } from \"react\";\n\nconst ConversationList = lazy(() => import(\"../components/ConversationList\"));\n\nexport default function MessagesLayout() {\n  return (\n    <div style={{ display: \"flex\", height: \"100vh\" }}>\n      <div style={{ width: \"360px\", borderRight: \"1px solid #eee\" }}>\n        <ClientOnly>\n          <Suspense fallback={<div>Loading...</div>}>\n            <ConversationList />\n          </Suspense>\n        </ClientOnly>\n      </div>\n      <div style={{ flex: 1, display: \"flex\", flexDirection: \"column\" }}>\n        <Outlet />\n      </div>\n    </div>\n  );\n}\n```\n\n---\n\n## 5. Environment variables\n\n### v6 library mode (Vite-based)\n\nSame as `cometchat-react-patterns` -- uses `VITE_` prefix:\n\n```env\nVITE_COMETCHAT_APP_ID=your_app_id\nVITE_COMETCHAT_REGION=us\nVITE_COMETCHAT_AUTH_KEY=your_auth_key\n```\n\nAccess: `import.meta.env.VITE_COMETCHAT_APP_ID`\n\n### v7 framework mode\n\nAlso uses Vite under the hood, so the same `VITE_` prefix applies:\n\n```env\nVITE_COMETCHAT_APP_ID=your_app_id\nVITE_COMETCHAT_REGION=us\nVITE_COMETCHAT_AUTH_KEY=your_auth_key\n```\n\nServer-only variables (for auth token generation in actions) can omit the `VITE_` prefix so they are never exposed to the client bundle:\n\n```env\nCOMETCHAT_AUTH_TOKEN=your_server_secret\n```\n\nAccess server-only vars in loaders/actions via `process.env`:\n\n```tsx\n// app/routes/api.cometchat-token.tsx (runs server-side only)\nexport async function action({ request }: ActionFunctionArgs) {\n  const secret = process.env.COMETCHAT_AUTH_TOKEN;\n  // ...\n}\n```\n\n> **Note:** `process.env` is available in loaders/actions when using the\n> default Node adapter (`@react-router/node`). Other adapters (Cloudflare,\n> Deno) expose env differently — check your adapter's docs.\n\n---\n\n## 6. CSS import\n\n### v6 library mode\n\nImport in `src/main.tsx`:\n\n```tsx\nimport \"@cometchat/chat-uikit-react/css-variables.css\";\n```\n\n### v7 framework mode\n\nImport in `app/root.tsx`:\n\n```tsx\nimport \"@cometchat/chat-uikit-react/css-variables.css\";\n```\n\nOr use the `links` export:\n\n```tsx\n// app/root.tsx\nimport cometchatStyles from \"@cometchat/chat-uikit-react/css-variables.css?url\";\n\nexport function links() {\n  return [{ rel: \"stylesheet\", href: cometchatStyles }];\n}\n```\n\nThe `?url` suffix tells Vite to return a URL instead of injecting the CSS, which works with React Router's `links` convention.\n\n---\n\n## 7. Common pitfalls\n\n### Loaders are server-side in v7\n\nThe most common mistake in v7 framework mode. Loaders and actions run on the server. Any CometChat code in a loader crashes with `window is not defined`. Use `clientLoader` instead, or handle data fetching in the component.\n\n### v7's unstable_middleware\n\nReact Router v7's `unstable_middleware` feature does NOT affect CometChat. CometChat has no middleware requirements. Do not add CometChat-related middleware.\n\n### useNavigate in CometChat callbacks\n\n`useNavigate` works inside CometChat's event callbacks (`onItemClick`, etc.) because these callbacks execute in the browser within the React tree. This is safe:\n\n```tsx\nconst navigate = useNavigate();\n\n<CometChatConversations\n  onItemClick={(conv) => navigate(`/messages/${conv.getConversationId()}`)}\n/>\n```\n\n### Don't init in loaders\n\nEven `clientLoader` is not the right place for CometChat initialization. Init should happen once in the provider (app root), not per-route. `clientLoader` is only appropriate for CometChat data queries (like `CometChat.getUser()`) that need to complete before the route renders.\n\n### v6 to v7 migration\n\nIf a project is migrating from v6 library mode to v7 framework mode, the CometChat integration must change:\n- Add `ClientOnly` wrapper\n- Move from static imports to dynamic imports for CometChat modules\n- Move from `createBrowserRouter` routes to file-system routes\n- Add SSR guards\n\nDo not mix v6 and v7 patterns. Detect the mode (section 1) and use the correct pattern.\n\n---\n\n## 8. Complete integration checklist (v6 library mode)\n\n1. Install packages: `npm install @cometchat/chat-uikit-react @cometchat/chat-sdk-javascript`\n2. Create `.env` with `VITE_COMETCHAT_APP_ID`, `VITE_COMETCHAT_REGION`, `VITE_COMETCHAT_AUTH_KEY`\n3. Add `.env` to `.gitignore`\n4. Import `@cometchat/chat-uikit-react/css-variables.css` in `src/main.tsx`\n5. Create `src/providers/CometChatProvider.tsx` (uses `import.meta.env.VITE_*`)\n6. Mount `CometChatProvider` in `src/main.tsx` wrapping `<RouterProvider>`\n7. Create `src/pages/ChatPage.tsx` (see `cometchat-placement` for patterns)\n8. Add `{ path: \"messages\", element: <ChatPage /> }` to the router config\n9. Add a \"Messages\" link to the layout's nav\n\n## 9. Complete integration checklist (v7 framework mode)\n\n1. Install packages: `npm install @cometchat/chat-uikit-react @cometchat/chat-sdk-javascript`\n2. Create `.env` with `VITE_COMETCHAT_APP_ID`, `VITE_COMETCHAT_REGION`, `VITE_COMETCHAT_AUTH_KEY`\n3. Add `.env` to `.gitignore`\n4. Import `@cometchat/chat-uikit-react/css-variables.css` in `app/root.tsx`\n5. Create `app/components/ClientOnly.tsx` (section 3)\n6. Create `app/providers/CometChatProvider.tsx` with dynamic imports (section 3)\n7. Mount `ClientOnly` + `CometChatProvider` in `app/root.tsx`\n8. Create `app/routes/messages.tsx` with `ClientOnly` + lazy import (section 3)\n9. Add a \"Messages\" link to the layout's nav\n10. Verify: loaders/actions contain NO CometChat imports","tags":["cometchat","react","router","patterns","skills","agent-skills","ai-agent","chat","claude-code","cursor","messaging","nextjs"],"capabilities":["skill","source-cometchat","skill-cometchat-react-router-patterns","topic-agent-skills","topic-ai-agent","topic-chat","topic-claude-code","topic-cometchat","topic-cursor","topic-messaging","topic-nextjs","topic-react","topic-react-native","topic-ui-kit"],"categories":["cometchat-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/cometchat/cometchat-skills/cometchat-react-router-patterns","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add cometchat/cometchat-skills","source_repo":"https://github.com/cometchat/cometchat-skills","install_from":"skills.sh"}},"qualityScore":"0.463","qualityRationale":"deterministic score 0.46 from registry signals: · indexed on github topic:agent-skills · 27 github stars · SKILL.md body (21,444 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-18T19:04:56.059Z","embedding":null,"createdAt":"2026-05-07T13:05:16.168Z","updatedAt":"2026-05-18T19:04:56.059Z","lastSeenAt":"2026-05-18T19:04:56.059Z","tsv":"'-5':207 '/chat':1306 '/client':328 '/components/chatview':873,1415 '/components/clientonly':1245,1317,1410,1644 '/components/conversationlist':1654 '/components/layout':401,445 '/dev/null':185,205 '/index.css':347 '/messages':561,1571,1580,2019 '/messages/group_':745 '/messages/user_':737 '/node':1834 '/pages/chatpage':409,449 '/pages/homepage':405 '/providers/cometchatprovider':339,1249,1321 '/router':343 '1':143,566,1134,1603,1680,2125,2138,2216 '10':2286 '100vh':545,1665 '16':1158 '1px':551,1671 '2':184,204,259,368,2145,2223 '3':763,2160,2238,2252,2260,2275 '360px':549,1669 '4':1548,2165,2243 '5':1685,2170,2248 '6':1847,2175,2253 '7':1910,2181,2261 '8':2131,2190,2267 '9':2199,2209,2276 '999':1611 'access':1722,1792 'action':99,788,1431,1443,1446,1770,1811,1930 'actionfunctionarg':1813 'ad':375,425 'adapt':1830,1836,1844 'add':385,1375,1979,2089,2111,2161,2191,2200,2239,2277 'addit':297 'affect':1970 'alignitem':1606 'alongsid':481 'also':1730 'anti':122 'anti-pattern':121 'api':1458 'app':77,272,451,1113,1212,1220,1258,1359,1366,1373,1706,1709,1725,1745,1748,2043,2151,2229 'app.tsx':433 'app/components/clientonly.tsx':826,2250 'app/providers/cometchatprovider.tsx':915,2255 'app/root.tsx':1235,1282,1864,1874,2247,2266 'app/routes':1623 'app/routes/api.cometchat-token.tsx':1802 'app/routes/chat.messages.tsx':1339 'app/routes/chat.tsx':1301 'app/routes/messages.tsx':1401,1634,2269 'appli':1741 'appropri':2052 'async':1051,1070,1467,1497,1809 'auth':1122,1717,1720,1756,1759,1766,1787,1817,2158,2236 'authtoken':1075,1091,1093 'avail':1822 'await':1031,1067,1080,1087,1097,1126,1129,1472,1477,1502,1507 'b':1256,1371 'base':1394,1693 'bash':149,173 'boolean':927 'borderright':550,1670 'browser':762,1457,1517,2003 'browserrout':197 'build':1125 'bundl':1784 'call':966,1438 'callback':697,701,758,1987,1994,1999 'cannot':799 'catalog':128 'catch':1144 'center':1607,1609 'chang':711,2088 'chat':138,882,886,1210,1276,1330,1333,1347,1364,1376,1424,1428,1491,1562 'chat-on':1209 'chatlayout':535,1325,1625 'chatlayout.tsx':506 'chatpag':407,447 'chatview':870,1412 'check':150,1842 'checklist':2134,2212 'child':1569 'children':416,494,498,836,843,857,1035,1036,1173,1596 'claud':42 'clean':1266 'client':902,1783 'clientload':1487,1499,1512,1948,2027,2049 'clienton':823,842,879,895,1228,1243,1315,1327,1408,1421,1642,2090,2263,2271 'clientonlyprop':835,846 'close':1003 'cloudflar':1837 'code':1937 'color':1155,1610 'column':570,1684 'cometchat':2,12,46,114,125,133,280,289,364,371,598,696,698,756,797,814,1112,1117,1121,1132,1139,1161,1216,1269,1284,1434,1455,1471,1501,1524,1533,1697,1705,1712,1716,1724,1744,1751,1755,1786,1936,1971,1972,1981,1986,1991,2034,2054,2085,2100,2150,2154,2157,2186,2228,2232,2235,2291 'cometchat-compon':124 'cometchat-cor':113 'cometchat-plac':132,2185 'cometchat-product':1138 'cometchat-react-pattern':288,363,1696 'cometchat-react-router-pattern':1 'cometchat-rel':1980 'cometchat-uid':1131 'cometchat.getgroup':651 'cometchat.getuser':635,1478,1508,2058 'cometchat.group':743 'cometchat.user':735 'cometchat/chat-sdk-javascript':600,1474,1504,2144,2222 'cometchat/chat-uikit-react':524,596,908,1069,1183,2143,2221 'cometchat/chat-uikit-react/css-variables.css':345,1858,1867,1878,2167,2245 'cometchatcontext':932,942 'cometchatcontext.provider':1169 'cometchatcontextvalu':925 'cometchatconvers':522,554,726,2015 'cometchatmessagecompos':594,687,691 'cometchatmessagehead':592,667,671 'cometchatmessagelist':593,675,681 'cometchatprovid':298,337,887,1034,1247,1319,2177,2264 'cometchatstyl':1876,1887 'cometchatuikit':1009,1026,1065 'cometchatuikit.getloggedinuser':1081 'cometchatuikit.init':1127 'cometchatuikit.login':1094 'cometchatuikit.loginwithauthtoken':1092 'common':36,1911,1922 'companion':110 'complet':2062,2132,2210 'complex':102 'compon':126,127,798,808,815,1542,1956 'composit':130 'concern':105,279,794 'config':179,247,487,1591,2198 'configur':383 'const':411,489,536,557,605,608,612,631,647,722,729,847,869,931,939,1038,1043,1064,1078,1106,1411,1470,1475,1500,1505,1650,1814,2012 'contain':2289 'conv':2017 'conv.getconversationid':2020 'convent':1909 'convers':464,479,483,508,556,578,620,728,1553,1572,1582,1614 'conversation.getconversationid':559 'conversation.getconversationwith':731 'conversationid':503,606,618,659,1581,1616 'conversationid.replace':633,649 'conversationid.startswith':629,645 'conversationid.tsx':1631 'conversationlist':1651 'conversationslist':721 'conversationview':604,1632 'conversationview.tsx':572 'core':115 'correct':1485,2129 'cover':28 'crash':817,1480,1941 'creat':1396,2146,2171,2182,2224,2249,2254,2268 'createbrowserrout':190,196,226,379,392,413,491,2104 'createcontext':920,933 'css':118,1848,1901 'dashboard':1342 'data':1492,1525,1546,1952,2055 'decis':208 'default':533,602,813,875,1251,1296,1323,1417,1656,1828 'defin':996,1946 'deno':1838 'detail':480 'detect':145,2121 'develop':1135 'differ':60,1175,1841 'disabl':1222 'display':542,567,1604,1662,1681 'distinct':56 'distinguish':165 'div':540,546,563,1153,1600,1660,1666,1677 'doc':1846 'document.getelementbyid':349 'dom':160,221,241,327,335,397,441,520,531,590,719 'done':1185 'doubl':950,954 'double-init':949 'double-login':953 'drawer':141 'drive':709 'dynam':1007,1055,1186,2097,2257 'dynamically-import':1006 'e':156,1145,1148 'e.g':1338 'eee':553,1673 'element':415,419,422,455,458,462,493,497,501,504,1595,1599,1617,2194 'els':643,739 'embed':142 'empti':1576,1628 'end':985 'ensureloggedin':994,1072,1130 'entir':309,1219 'entiti':730,733,741 'entity.getguid':746 'entity.getuid':738 'entri':1495 'env':373,1703,1742,1785,1840,2147,2162,2225,2240 'environ':1686 'error':928,936,1044,1151,1162,1163,1172 'essenti':268 'etc':1996 'even':2026 'event':1993 'everi':1361 'execut':2000 'exist':53,213,423,1028,1079,1083,1379 'export':410,488,532,601,840,874,938,1032,1250,1295,1322,1416,1466,1496,1655,1808,1872,1880 'expos':1780,1839 'fallback':838,844,858,880,884,1328,1422,1426,1675 'fals':851,935,988,1042 'featur':1967 'fetch':1526,1547,1953 'file':95,180,248,783,1385,1393,1399,1620,2108 'file-bas':1392 'file-system':94,782,1384,1619,2107 'final':1099 'find':380 'first':112,970 'flex':543,565,568,1602,1605,1663,1679,1682 'flexdirect':569,1683 'follow':282,622 'fontfamili':1159 'framework':7,26,82,89,171,175,215,765,772,779,890,1389,1453,1728,1860,1926,2082,2214 'framework-specif':6 'full':88,776,1279 'function':450,534,603,720,754,841,876,1033,1052,1071,1252,1297,1324,1418,1468,1498,1657,1810,1881 'g':654,658 'generat':1768 'gitignor':2164,2242 'grep':155,194 'group':613,627,646,650,662,670,672,673,680,682,683,690,692,693 'guard':962,2113 'guid':648,652 'handl':1543,1951 'happen':909,2038 'head':206 'height':544,1664 'hidereplyinthreadopt':678,684 'hoist':1010 'homepag':403 'hood':1735 'howev':1531 'href':1886 'id':558,562,621,1114,1707,1710,1726,1746,1749,2152,2230 'identifi':146 'implement':357 'import':318,322,329,336,340,344,346,391,398,402,406,434,442,446,514,521,525,579,584,591,597,713,827,864,872,906,916,1008,1020,1056,1068,1182,1236,1242,1246,1289,1308,1314,1318,1402,1407,1414,1473,1503,1635,1641,1645,1653,1849,1853,1857,1862,1866,1875,2095,2098,2166,2244,2258,2273,2292 'import.meta.env.vite':370,1111,1116,1120,1723,2174 'includ':200,202 'index':417,457,499,1597 'init':951,2023,2036 'initi':116,987,1103,1104,1435,2035 'inject':1899 'insid':695,997,1029,1187,1990 'instal':2139,2142,2217,2220 'instanceof':734,742 'instead':1897,1949 'integr':11,45,61,281,1534,2086,2133,2211 'intent':1022 'interfac':834,924 'invok':759 'involv':1363 'isreadi':926,934,1039,1165,1171 'jsx':203,429 'justifycont':1608 'keep':1263,1278 'key':1123,1174,1718,1721,1757,1760,2159,2237 'kit':15 'layout':399,443,1272,1302,1337,2206,2283 'lazi':865,871,1403,1413,1646,1652,2272 'left':1574,1584 'let':986,989 'level':306,945,1193,1530 'librari':22,64,73,167,187,231,252,257,261,265,1689,1851,2078,2136 'like':249,2057 'link':1871,1882,1908,2203,2280 'list':484,509,1573,1583 'load':881,885,1329,1423,1427,1676 'loader':98,786,1429,1441,1444,1461,1469,1538,1913,1928,1940,2025 'loaders/actions':1798,1824,2288 'login':117,955,967,983 'logininflight':961,990,1086,1088,1090,1098,1100 'ls':181 'market':1340 'marketplac':1382 'messag':421,461,496,512,574,1365,1586,1594,1630,2193,2202,2279 'messages._index.tsx':1627 'messages.tsx':1624 'messageslayout':1658 'messagesrout':877,1419 'meta':778 'meta-framework':777 'middlewar':1960,1966,1975,1983 'migrat':2070,2075 'mistak':1923 'mix':1257,2116 'modal':140 'mode':23,27,57,65,83,168,172,176,188,216,232,253,258,262,266,766,773,891,1390,1454,1690,1729,1852,1861,1927,2079,2083,2123,2137,2215 'modul':905,944,1013,1062,1203,2101 'module-level':943 'monospac':1160 'mount':300,848,856,965,1204,2176,2262 'move':2092,2102 'must':2087 'nav':2208,2285 'navig':537,560,723,736,744,2013,2018 'need':894,1261,1490,1537,2060 'nest':34,463,475,1332,1552,1568 'never':1432,1779 'new':387,1108 'next.js':107,796 'node':1829 'non':1275,1346 'non-chat':1274,1345 'normal':1288,1354 'note':1819 'noth':1230 'npm':2141,2219 'null':664,845,930,937,992,993,1048,1049,1101,1167 'omit':1772 'onitemclick':555,700,727,1995,2016 'option':1207,1255,1356,1370 'outlet':33,467,510,515,1237,1290,1309,1549,1636 'packag':2140,2218 'package.json':151,164,224,244 'pad':1157 'page':1341,1362 'pane':1575,1579,1585,1588 'parent':1565 'path':414,420,454,460,492,495,502,1307,1593,1615,2192 'pattern':5,9,32,62,120,123,131,263,285,291,366,470,624,767,1550,1555,1699,2120,2130,2189 'pend':973 'per':2047 'per-rout':2046 'pitfal':37,1912 'place':1522,2032 'placement':134,299,2187 'plain':270,1178 'platform':1368 'pleas':978 'power':469 'prefix':1702,1740,1775 'prevent':30,805,947,1058,1195 'previous':982 'process.env':1800,1820 'process.env.cometchat':1816 'product':1140,1380 'project':20,50,144,2073 'promis':991,1077 'provid':119,302,356,893,1180,1206,2042 'purpos':38 'put':137,1433 'queri':2056 'react':3,13,18,48,51,66,84,147,153,158,162,219,235,239,271,290,319,321,326,333,365,395,439,472,518,529,583,588,704,717,768,833,868,917,923,957,1179,1240,1293,1312,1406,1639,1649,1698,1832,1905,1961,2006 'react-dom':325 'react-rout':161,234,1239,1292,1311,1638,1831 'react-router-dom':157,218,238,332,394,438,517,528,587,716 'react-router.config.js':183,212 'react-router.config.ts':182,210 'react.lazy':861 'react.reactnode':1037 'reactdom':323 'reactdom.createroot':348 'reactnod':831,837,839 'read':108 'red':1156 'referenceerror':1016 'region':1118,1713,1752,2155,2233 'rel':1884 'relat':1982 'remix':92 'remov':1023 'render':351,507,573,807,820,1229,1349,1626,2066 'request':984,1812 'requir':1456,1976 'resolut':1063 'resolv':1201 'return':452,539,619,663,665,725,751,855,878,1084,1089,1152,1166,1168,1254,1299,1326,1420,1483,1510,1659,1883,1894 'right':1521,1578,1587,2031 'rn':195 'root':350,1253,1265,1298,2044 'rout':31,72,97,139,198,274,295,314,377,388,424,427,430,435,436,453,456,459,465,476,785,1214,1226,1260,1273,1277,1303,1334,1348,1387,1395,1398,1494,1529,1566,1570,1590,1622,2048,2065,2105,2110 'router':4,19,49,52,67,85,148,154,159,163,220,236,240,305,310,334,341,353,354,382,396,412,440,473,486,490,519,530,589,705,718,769,1241,1294,1313,1640,1833,1906,1962,2197 'routerprovid':330,352 'routing-specif':294 'run':800,899,1447,1462,1513,1803,1931 'saa':1381 'safe':2010 'safeti':1025 'scope':1014,1268 'sdk':976,1437 'second':964 'secret':1791,1815 'section':367,2124,2251,2259,2274 'see':1137,2184 'select':577,1612 'server':803,811,819,912,1060,1197,1233,1351,1450,1465,1482,1762,1790,1794,1805,1916,1934 'server-on':1761,1793 'server-sid':1059,1350,1804,1915 'set':1107,1128 'setappid':1110 'setauthkey':1119 'seterror':1045,1146 'setgroup':614,641,657 'setisreadi':1040,1142 'setmount':849,853 'setregion':1115 'setup':998,1053,1149 'setus':610,639,655 'show':478 'side':1061,1352,1806,1917 'similar':103 'simpl':80 'sinc':1227 'skill':40,111,292,1141 'skill-cometchat-react-router-patterns' 'social':1367 'solid':552,1672 'sourc':193,229 'source-cometchat' 'specif':8,296,313 'src':199 'src/main.tsx':317,1855,2169,2179 'src/pages/chatpage.tsx':2183 'src/providers/cometchatprovider.tsx':2172 'src/router.tsx':390 'ssr':29,79,101,104,278,781,793,804,1024,1223,1262,1280,1286,2112 'stabl':753 'state':946,1577,1629 'static':1019,2094 'still':972 'strictmod':958 'string':929,1047,1074,1076,1147 'style':541,547,564,1154,1601,1661,1667,1678 'stylesheet':1885 'subscribepresenceforallus':1124 'subtre':315 'successor':90 'suffix':1890 'support':1383 'suspens':862,866,883,1404,1425,1647,1674 'system':96,784,1386,1621,2109 'teach':41 'tell':1891 'throw':977 'token':1767,1788,1818 'top':1192 'topic-agent-skills' 'topic-ai-agent' 'topic-chat' 'topic-claude-code' 'topic-cometchat' 'topic-cursor' 'topic-messaging' 'topic-nextjs' 'topic-react' 'topic-react-native' 'topic-ui-kit' 'treat':254 'tree':2007 'tri':1054,1096,1199 'true':418,500,679,685,854,1105,1143,1598 'tsx':201,316,389,431,485,505,571,712,825,863,914,1234,1281,1300,1400,1459,1592,1633,1801,1856,1865,1873,2011 'two':55 'type':830 'u':638,640 'ui':14 'uid':632,636,1073,1095,1133,1479,1509 'uikitsettingsbuild':1066,1109 'undefin':642,656 'unstabl':1959,1965 'url':710,1879,1889,1896 'us':1714,1753 'use':69,189,369,474,703,821,860,1215,1355,1369,1391,1486,1700,1731,1826,1869,1947,2127,2173 'usecometchat':940 'usecontext':921,941 'useeffect':580,616,829,852,898,918,1050,1188 'usenavig':526,538,694,707,714,724,750,1984,1988,2014 'useparam':585,607 'user':609,625,630,634,661,666,668,669,674,676,677,686,688,689,1476,1484,1506,1511 'usest':581,611,615,828,850,919,1041,1046 'v6':16,21,63,166,186,230,256,260,264,1559,1589,1688,1850,2067,2077,2117,2135 'v7':25,81,170,174,214,250,764,770,806,889,1388,1452,1561,1618,1727,1859,1919,1925,1957,1963,2069,2081,2119,2213 'valu':1170 'var':374,1796 'variabl':1687,1764 'verifi':2287 'via':1799 'view':513 'vite':1692,1701,1704,1711,1715,1732,1739,1743,1750,1754,1774,1892,2149,2153,2156,2227,2231,2234 'vite-bas':1691 'vite/cra':76 'wait':979 'width':548,1668 'window':1943 'within':2004 'without':245,959 'work':748,1287,1556,1903,1989 'would':1015 'wrap':307,896,1217,2180 'wrapper':824,2091 'wrong':1460","prices":[{"id":"1139d9ae-ac1c-489d-970f-7cd64afb49e3","listingId":"736a791a-3974-4c3d-9f91-a3e842369985","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"cometchat","category":"cometchat-skills","install_from":"skills.sh"},"createdAt":"2026-05-07T13:05:16.168Z"}],"sources":[{"listingId":"736a791a-3974-4c3d-9f91-a3e842369985","source":"github","sourceId":"cometchat/cometchat-skills/cometchat-react-router-patterns","sourceUrl":"https://github.com/cometchat/cometchat-skills/tree/main/skills/cometchat-react-router-patterns","isPrimary":false,"firstSeenAt":"2026-05-07T13:05:16.168Z","lastSeenAt":"2026-05-18T19:04:56.059Z"}],"details":{"listingId":"736a791a-3974-4c3d-9f91-a3e842369985","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"cometchat","slug":"cometchat-react-router-patterns","github":{"repo":"cometchat/cometchat-skills","stars":27,"topics":["agent-skills","ai-agent","chat","claude-code","cometchat","cursor","messaging","nextjs","react","react-native","ui-kit"],"license":null,"html_url":"https://github.com/cometchat/cometchat-skills","pushed_at":"2026-05-18T05:04:24Z","description":"Add CometChat chat to any React, Next.js, React Native, Angular, Android, iOS, or Flutter project through your AI coding agent. Works with Claude Code, Cursor, Codex, VS Code Copilot, Windsurf, Cline, Kiro, and 50+ more agents.","skill_md_sha":"3b3757c40fd3a0c25c8211f1e56972a8304e7a61","skill_md_path":"skills/cometchat-react-router-patterns/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/cometchat/cometchat-skills/tree/main/skills/cometchat-react-router-patterns"},"layout":"multi","source":"github","category":"cometchat-skills","frontmatter":{"name":"cometchat-react-router-patterns","license":"MIT","description":"Framework-specific patterns for integrating CometChat React UI Kit v6 into React Router projects (v6 library mode and v7 framework mode). Covers SSR prevention, routing patterns, outlet nesting, and common pitfalls.","compatibility":"Node.js >=18; React >=18; react-router-dom ^6 or react-router ^7; @cometchat/chat-uikit-react ^6; @cometchat/chat-sdk-javascript ^4"},"skills_sh_url":"https://skills.sh/cometchat/cometchat-skills/cometchat-react-router-patterns"},"updatedAt":"2026-05-18T19:04:56.059Z"}}