React

Add a new typed async function that fetches data from the OpenClaw backend. Export a function like `getMyNewResource()` that returns typed data.

Pattern: Follow the pattern of `getSkills()` or `getAgents()` in src/lib/openclaw-api.ts — each function calls the OpenClaw CLI or reads config, parses the result, and returns a typed array/object

Create a new directory under src/app/api/ with a route.ts file. Export an async `GET` (or `POST`) function that calls the openclaw-api function and returns `NextResponse.json()`.

Pattern: Copy the exact structure of src/app/api/agents/route.ts — it imports from src/lib/openclaw-api.ts, calls the data function in a try/catch, and returns NextResponse.json() with the result or a 500 error response

Add a new custom hook (e.g., `useMyNewResource`) that fetches from your new `/api/{resource}` endpoint and writes the result into the Zustand store.

Pattern: Follow the pattern of existing hooks in src/hooks/use-data.ts — each hook uses useEffect to fetch from an API route, parses the JSON response, and calls a setter from the app store (accessed via `useAppStore`)

Add new state fields and setter actions to the Zustand store for the new resource data (e.g., `myResources: []` and `setMyResources: (data) => set({ myResources: data })`).

Pattern: Follow how `skills`, `agents`, `channels` state slices are defined in src/stores/app-store.ts — each has a typed array field initialized to `[]` and a corresponding setter action

Create a new view component file. This is the main UI for the feature. Export a default React component.

Pattern: Follow the structure of src/components/views/settings-view.tsx — it's a self-contained view component that reads from the Zustand store via `useAppStore()` and renders a complete feature UI with its own local state as needed

Add the new view name to the navigation/active-view type union and add any feature-specific state fields and setters the view needs.

Pattern: Look at how existing view names (like the chat and settings views) are defined as valid values for the active view state in src/stores/app-store.ts, and add your new view identifier to that type

Import the new view component and add a conditional render branch that displays it when the active view state matches your new view identifier.

Pattern: Follow how src/components/app-shell.tsx conditionally renders src/components/views/chat-view.tsx and src/components/views/settings-view.tsx based on the current active view from the store — add an equivalent branch for your new view

Add a new navigation item/tab button that sets the active view to your new view identifier when clicked.

Pattern: Follow the existing tab buttons in src/components/layout/sidebar.tsx — each has an icon, label, and onClick handler that updates the active view in the Zustand store

If the feature needs backend data, add a data fetching hook here (see 'Add a new API endpoint' guide for the full backend chain).

Pattern: Follow existing hooks in src/hooks/use-data.ts that fetch from /api/ routes and sync into the store

Create a new primitive UI component file. Export a named React component that accepts props and uses Tailwind CSS classes for styling.

Pattern: Follow the shadcn-style pattern used by existing components in src/components/ui/ — components use className merging, accept standard HTML element props via React.ComponentProps or similar, and are purely presentational with no business logic or store access

Import and use the new UI component in the view or parent component that needs it.

Pattern: See how src/components/views/chat-view.tsx or src/components/views/settings-view.tsx import and compose UI primitives from src/components/ui/

Modify the chat UI, message display, user input handling, or how messages are sent/received. This file handles the POST to /api/chat and manages conversation state.

Pattern: The chat view in src/components/views/chat-view.tsx sends messages by POSTing to /api/chat with the user message, then reads the response and appends both user and assistant messages to the conversation state in the Zustand store

Modify the backend chat endpoint that bridges the Next.js app with the openclaw CLI agent. Change how messages are processed, add parameters, or modify the response format.

Pattern: src/app/api/chat/route.ts exports a POST handler that extracts the message from the request body, invokes the openclaw agent CLI tool, and returns the agent's text response as JSON

Modify chat-related state fields (messages array, active session, etc.) or add new chat state like typing indicators or message metadata.

Pattern: Chat state in src/stores/app-store.ts includes the messages array and related setters — follow the existing pattern of immutable state updates via the Zustand `set()` function

Add or modify settings UI controls (toggles, inputs, dropdowns) for the new preference.

Pattern: src/components/views/settings-view.tsx reads current settings from useAppStore() and calls store setter actions when the user changes a value — each setting maps to a specific store field

Add the new preference field with a default value and a setter action. If it should persist across sessions, ensure it's included in the persist configuration.

Pattern: Existing preferences in src/stores/app-store.ts use Zustand's persist middleware — add your new field to the state interface, provide a default in the initial state, add a setter, and include the field in the persist partialize config if it should survive page reloads

If the setting affects the app shell (e.g., theme, layout), consume the new store value here and apply it.

Pattern: src/components/app-shell.tsx reads theme preferences from the store and applies them to the root layout — follow this pattern for any setting that affects the overall app appearance or behavior

Modify Next.js build settings, add redirects/rewrites, configure image domains, or adjust webpack settings.

Pattern: next.config.ts exports a Next.js configuration object — add new configuration properties according to the Next.js docs while preserving existing settings

Modify PostCSS plugins if changing CSS processing (e.g., adding autoprefixer or other PostCSS plugins alongside Tailwind).

Pattern: postcss.config.mjs exports a plugins object with tailwindcss — add new plugins to the same plugins object

Add or modify ESLint rules, add ignore patterns, or configure new ESLint plugins.

Pattern: eslint.config.mjs uses the flat config format — add rules or overrides following the existing structure in the file