Skip to content

Commit 76ac4d2

Browse files
bloveclaude
andcommitted
docs: chat citations + adapter bridge documentation
Add minimal documentation for the @Ngaf 0.0.21 citations release across all adapter libraries and changelog. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
1 parent d040cee commit 76ac4d2

4 files changed

Lines changed: 121 additions & 2 deletions

File tree

CHANGELOG.md

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,16 @@
1+
## 0.0.21 — 2026-05-04
2+
3+
### Added
4+
5+
- **`@ngaf/chat`**`Citation` interface, `Message.citations` field, `<chat-citations>` primitive (sources panel), `MarkdownCitationReferenceComponent` registered in the markdown view registry, `CitationsResolverService` for message-first / markdown-fallback citation lookup.
6+
- **`@ngaf/langgraph`**`extractCitations()` populates `Message.citations` from `additional_kwargs.citations` or `additional_kwargs.sources`.
7+
- **`@ngaf/ag-ui`**`bridgeCitationsState()` populates `Message.citations` from STATE_DELTA at JSON Pointer `/citations/{messageId}`.
8+
- **`@cacheplane/partial-markdown`** peer in `@ngaf/chat` bumped to `^0.2.0`.
9+
10+
### Changed
11+
12+
- **All @ngaf libraries synchronized to `0.0.21`** per project policy (single version across the suite).
13+
114
## 0.0.2 (2026-05-01)
215

316
### 🩹 Fixes

libs/ag-ui/README.md

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,3 +20,29 @@ export class App {
2020
protected readonly agent = inject(AG_UI_AGENT);
2121
}
2222
```
23+
24+
## Citations
25+
26+
The `bridgeCitationsState()` function populates `Message.citations` from AG-UI STATE_DELTA events. Citations are located at JSON Pointer `/citations/{messageId}`.
27+
28+
### Example: AG-UI citations state shape
29+
30+
```json
31+
{
32+
"state": {
33+
"citations": {
34+
"msg-123": [
35+
{
36+
"id": "src1",
37+
"index": 1,
38+
"title": "Example Source",
39+
"url": "https://example.com",
40+
"snippet": "Relevant excerpt from the source..."
41+
}
42+
]
43+
}
44+
}
45+
}
46+
```
47+
48+
Each citation object in the array supports `id`, `index`, `title`, `url`, `snippet`, and custom `extra` fields. The messageId key matches the corresponding message in the chat history.

libs/chat/README.md

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,3 +12,52 @@ Chat primitives consume a runtime-neutral `Agent` contract. Two adapters ship to
1212
Custom backends can implement `Agent` directly with no library dependency.
1313

1414
See the capability matrix in the docs site for which primitives require which runtime capabilities.
15+
16+
## Citations
17+
18+
Chat messages can include citations to sources. The `Citation` interface provides structured metadata for each source:
19+
20+
```ts
21+
interface Citation {
22+
id: string; // Unique identifier for the citation
23+
index?: number; // Display index (1-based) for inline markers
24+
title?: string; // Source title
25+
url?: string; // Source URL
26+
snippet?: string; // Quoted excerpt
27+
extra?: unknown; // Custom fields per adapter
28+
}
29+
```
30+
31+
### Message citations
32+
33+
Adapters populate `Message.citations?: Citation[]` from their respective backends. Messages are rendered with the `<chat-citations [message]="message" />` primitive, which displays a collapsible sources panel under assistant messages.
34+
35+
### Rendering sources
36+
37+
Use the `<chat-citations>` component to render a sources panel. Customize the card layout with the optional `chatCitationCard` ng-template:
38+
39+
```html
40+
<chat [agent]="agent" />
41+
<!-- or explicit: -->
42+
<chat-citations [message]="message">
43+
<ng-template chatCitationCard let-citation>
44+
<div class="custom-card">
45+
<a [href]="citation.url">{{ citation.title }}</a>
46+
<p class="text-sm text-gray-600">{{ citation.snippet }}</p>
47+
</div>
48+
</ng-template>
49+
</chat-citations>
50+
```
51+
52+
### Inline markers
53+
54+
Markdown rendering registers `chat-md-citation-reference` in the markdown view registry. Citation indices are rendered as superscript markers inline with the message text. The markers link to the corresponding citation in the sources panel.
55+
56+
### Adapter integration
57+
58+
Each runtime adapter extracts citations into the `Message.citations` array:
59+
60+
- **LangGraph** — reads from `message.additional_kwargs.citations` (preferred) or `message.additional_kwargs.sources` (fallback)
61+
- **AG-UI** — reads from STATE_DELTA at JSON Pointer `/citations/{messageId}`
62+
63+
The `CitationsResolverService` is provided to query citations in message-first or markdown-fallback order.

libs/langgraph/README.md

Lines changed: 33 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,34 @@
1-
# angular
1+
# @ngaf/langgraph
22

3-
This library was generated with [Nx](https://nx.dev).
3+
Adapter that wraps a LangGraph agent into the runtime-neutral `Agent` contract from `@ngaf/chat`.
4+
5+
## Citations
6+
7+
The `extractCitations()` function populates `Message.citations` from LangGraph message metadata. It reads from `additional_kwargs.citations` (preferred) or `additional_kwargs.sources` (fallback).
8+
9+
### Example: RAG chain with citations
10+
11+
```ts
12+
import { additional_kwargs } from '@langchain/core/messages';
13+
14+
// In your LangGraph node:
15+
const response = await llm.invoke([...]);
16+
17+
// Attach citations metadata:
18+
const messageWithCitations = new AIMessage({
19+
content: response.content,
20+
additional_kwargs: {
21+
citations: [
22+
{
23+
id: 'doc-1',
24+
index: 1,
25+
title: 'Example Article',
26+
url: 'https://example.com/article',
27+
snippet: 'Relevant excerpt...'
28+
}
29+
]
30+
}
31+
});
32+
33+
// Message.citations auto-populates in @ngaf/chat via extractCitations()
34+
```

0 commit comments

Comments
 (0)