---
title: "Resource Kit"
description: "Resource tree, editor primitives, file picker/search, attachments, and local file mode."
---
# Resource Kit
The Resource Kit gives apps a shared way to browse, edit, upload, attach, and
search files or agent resources. It powers the agent panel's Resources tab,
can be rendered as a page or drawer, and connects naturally to local file mode
for repo-backed content.
Q3 forecast.md
"
}
/>
## Pieces {#pieces}
| Piece | Purpose |
| ------------------------------------- | ------------------------------------------------------------- |
| `` | Complete resource browser/editor panel. |
| `` | Tree primitive for personal, shared, and workspace resources. |
| `` | Editor primitive for selected resources. |
| `useResourceTree()` / `useResource()` | Data hooks for custom resource chrome. |
| Resource mutations | Create, update, delete, upload, rename, and move resources. |
| File uploads | Shared attachment path for chat, resources, and app actions. |
| Local file mode | Repo-backed resources where files are the source of truth. |
## Usage {#usage}
Mount the complete panel when you want the whole browser/editor surface with
no assembly required:
```tsx
import { ResourcesPanel } from "@agent-native/core/client/resources";
;
```
`showMcpServers`, `showOnlyRequestedScope`, `resourceTreeVariant`, and
`mcpIntegrations` let an app hide the virtual MCP folder, lock the panel to one
scope, render special collections as cards, or add app-owned remote MCP
entries — all props are optional.
Compose the tree and editor primitives yourself for custom chrome:
```tsx
import {
ResourceEditor,
ResourceTree,
useResource,
useResourceTree,
} from "@agent-native/core/client/resources";
const tree = useResourceTree("workspace");
const resource = useResource(selectedId);
```
## Mutations {#mutations}
Reads and writes go through the same hooks the panel uses internally, so a
custom toolbar button stays wired into the same cache invalidation as
``:
```tsx
import {
useCreateResource,
useResourceTree,
} from "@agent-native/core/client/resources";
export function NewNoteButton() {
const tree = useResourceTree("personal");
const createResource = useCreateResource();
return (
);
}
```
`useUpdateResource()`, `useDeleteResource()`, and `useUploadResource()` follow
the same shape and invalidate the tree/resource queries on success.
## UX Standard {#ux-standard}
- Use a stable tree/editor split for file-heavy apps.
- Keep attachments inspectable and agent-readable.
- Local file mode should preserve the repo as source of truth, while hosted
collaboration still uses SQL-backed runtime state.
- Resource actions should return deep links to the focused file/resource.
## What's next
- [**Local File Mode**](/docs/local-file-mode) — repo-backed resources where
files are the source of truth.
- [**File Uploads**](/docs/file-uploads) — the shared attachment path resource
uploads reuse.
- [**Component API**](/docs/components#resources) — the full prop reference for
the resource components.