Fix ag-ui example

This commit is contained in:
Yiorgis Gozadinos 2025-12-11 11:09:20 +02:00
parent 99176ba0a1
commit 110e020122
No known key found for this signature in database
5 changed files with 64 additions and 32 deletions

View file

@ -9,7 +9,7 @@ dependencies = [
"uvicorn[standard]>=0.34.2", "uvicorn[standard]>=0.34.2",
"pydantic-ai-slim[ag-ui,openai]>=1.17.0", "pydantic-ai-slim[ag-ui,openai]>=1.17.0",
"python-dotenv>=1.0.1", "python-dotenv>=1.0.1",
"haiku-rag-slim @ file:///Users/ggozad/dev/open-source/haiku.rag-agui/haiku_rag_slim", "haiku.rag-slim[agui]>=0.20.0",
] ]
[dependency-groups] [dependency-groups]

View file

@ -25,12 +25,22 @@ interface GapRecord {
resolved_by: string[]; resolved_by: string[];
} }
interface Citation {
document_id: string;
chunk_id: string;
document_uri: string;
document_title?: string;
page_numbers: number[];
headings?: string[];
content: string;
}
interface SearchAnswer { interface SearchAnswer {
query: string; query: string;
answer: string; answer: string;
confidence: number; confidence: number;
context: string[]; cited_chunks: string[];
sources: string[]; citations: Citation[];
} }
interface ResearchContext { interface ResearchContext {
@ -94,7 +104,6 @@ function AgentContent() {
}, },
}); });
return ( return (
<> <>
<style>{` <style>{`

View file

@ -1,7 +1,7 @@
"use client"; "use client";
import { Markdown } from "@copilotkit/react-ui"; import { Markdown } from "@copilotkit/react-ui";
import { useState, useCallback } from "react"; import { useCallback, useState } from "react";
interface VisualGroundingState { interface VisualGroundingState {
isOpen: boolean; isOpen: boolean;
@ -127,7 +127,7 @@ export default function StateDisplay({ state }: StateDisplayProps) {
try { try {
const response = await fetch( const response = await fetch(
`${process.env.NEXT_PUBLIC_API_URL || "http://localhost:8000"}/api/visualize/${chunkId}` `${process.env.NEXT_PUBLIC_API_URL || "http://localhost:8000"}/api/visualize/${chunkId}`,
); );
const data = await response.json(); const data = await response.json();
@ -241,14 +241,25 @@ export default function StateDisplay({ state }: StateDisplayProps) {
marginBottom: state.iterations > 0 ? "1rem" : 0, marginBottom: state.iterations > 0 ? "1rem" : 0,
}} }}
> >
<div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}> <div
style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}
>
<span></span> <span></span>
<span style={{ fontWeight: "600", color: "#2b6cb0" }}> <span style={{ fontWeight: "600", color: "#2b6cb0" }}>
{state.current_activity.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase())} {state.current_activity
.replace(/_/g, " ")
.replace(/\b\w/g, (c) => c.toUpperCase())}
</span> </span>
</div> </div>
{state.current_activity_message && ( {state.current_activity_message && (
<div style={{ fontSize: "0.875rem", color: "#4299e1", marginTop: "0.25rem", marginLeft: "1.5rem" }}> <div
style={{
fontSize: "0.875rem",
color: "#4299e1",
marginTop: "0.25rem",
marginLeft: "1.5rem",
}}
>
{state.current_activity_message} {state.current_activity_message}
</div> </div>
)} )}
@ -449,7 +460,9 @@ export default function StateDisplay({ state }: StateDisplayProps) {
> >
</div> </div>
<div style={{ flex: 1, fontSize: "0.875rem", color: "#4a5568" }}> <div
style={{ flex: 1, fontSize: "0.875rem", color: "#4a5568" }}
>
<Markdown content={question} /> <Markdown content={question} />
</div> </div>
</div> </div>
@ -510,7 +523,8 @@ export default function StateDisplay({ state }: StateDisplayProps) {
marginTop: "0.25rem", marginTop: "0.25rem",
}} }}
> >
Confidence: {(qaResponse.confidence * 100).toFixed(0)}% Confidence: {(qaResponse.confidence * 100).toFixed(0)}
%
</div> </div>
</div> </div>
<span <span
@ -648,7 +662,9 @@ export default function StateDisplay({ state }: StateDisplayProps) {
</div> </div>
<button <button
type="button" type="button"
onClick={() => fetchVisualGrounding(citation.chunk_id)} onClick={() =>
fetchVisualGrounding(citation.chunk_id)
}
style={{ style={{
marginTop: "0.5rem", marginTop: "0.5rem",
padding: "0.25rem 0.5rem", padding: "0.25rem 0.5rem",

View file

@ -8,7 +8,7 @@
"name": "ag-ui-frontend", "name": "ag-ui-frontend",
"version": "0.1.0", "version": "0.1.0",
"dependencies": { "dependencies": {
"@ag-ui/client": "^0.0.40", "@ag-ui/client": "^0.0.42",
"@copilotkit/react-core": "^1.10.6", "@copilotkit/react-core": "^1.10.6",
"@copilotkit/react-ui": "^1.10.6", "@copilotkit/react-ui": "^1.10.6",
"@copilotkit/runtime": "^1.10.6", "@copilotkit/runtime": "^1.10.6",
@ -39,15 +39,16 @@
} }
}, },
"node_modules/@ag-ui/client": { "node_modules/@ag-ui/client": {
"version": "0.0.40", "version": "0.0.42",
"resolved": "https://registry.npmjs.org/@ag-ui/client/-/client-0.0.40.tgz", "resolved": "https://registry.npmjs.org/@ag-ui/client/-/client-0.0.42.tgz",
"integrity": "sha512-4ftyZgMN7DIAX64k7Mdex/KGq7lfz8yxEKzniqosD6TE/xk65k4Z0v3bxTzPk2iS2+Cj2uVBgFkb5lC7k5Loqg==", "integrity": "sha512-zAbP+sZJImR5bUpR2ni7RtuuNZMuesaxviynyIgzKlr1k2VCM49mFpbDUKU4TH4Cneu+Xe7OEnO8qCOCIzBAww==",
"peer": true, "peer": true,
"dependencies": { "dependencies": {
"@ag-ui/core": "0.0.39", "@ag-ui/core": "0.0.42",
"@ag-ui/encoder": "0.0.39", "@ag-ui/encoder": "0.0.42",
"@ag-ui/proto": "0.0.39", "@ag-ui/proto": "0.0.42",
"@types/uuid": "^10.0.0", "@types/uuid": "^10.0.0",
"compare-versions": "^6.1.1",
"fast-json-patch": "^3.1.1", "fast-json-patch": "^3.1.1",
"rxjs": "7.8.1", "rxjs": "7.8.1",
"untruncate-json": "^0.0.1", "untruncate-json": "^0.0.1",
@ -56,9 +57,9 @@
} }
}, },
"node_modules/@ag-ui/core": { "node_modules/@ag-ui/core": {
"version": "0.0.39", "version": "0.0.42",
"resolved": "https://registry.npmjs.org/@ag-ui/core/-/core-0.0.39.tgz", "resolved": "https://registry.npmjs.org/@ag-ui/core/-/core-0.0.42.tgz",
"integrity": "sha512-T5Hp4oFkQ+H5MynWAvSwrX/rNYJOD+PJ4qPQ0o771oSZQAxoIvDDft47Cx5wRyBNNLXAe1RWqJjfWUUwJFNKqA==", "integrity": "sha512-C2hMg4Gs5oiUDgK9cA2RsTwSSmFZdIsqPklDrFw/Ue+quH6EU3vKp5YoOq7nuaQYO4pO8Em+Z+l5/M5PpcvP1g==",
"peer": true, "peer": true,
"dependencies": { "dependencies": {
"rxjs": "7.8.1", "rxjs": "7.8.1",
@ -66,13 +67,13 @@
} }
}, },
"node_modules/@ag-ui/encoder": { "node_modules/@ag-ui/encoder": {
"version": "0.0.39", "version": "0.0.42",
"resolved": "https://registry.npmjs.org/@ag-ui/encoder/-/encoder-0.0.39.tgz", "resolved": "https://registry.npmjs.org/@ag-ui/encoder/-/encoder-0.0.42.tgz",
"integrity": "sha512-6fsoFwPWkStK7Uyj3pwBn7+aQjUWf7pbDTSI43cD53sBLvTr5oEFNnoKOzRfC5UqvHc4JjUIuLKPQyjHRwWg4g==", "integrity": "sha512-97B5MMCSs82t/y41uk2NrLBYFhbvn4kYsKQHMCfy8tjSWubyxh3zP7N9yHo8zJeSPe3WvzTvclyXNiGxSOsorg==",
"peer": true, "peer": true,
"dependencies": { "dependencies": {
"@ag-ui/core": "0.0.39", "@ag-ui/core": "0.0.42",
"@ag-ui/proto": "0.0.39" "@ag-ui/proto": "0.0.42"
} }
}, },
"node_modules/@ag-ui/langgraph": { "node_modules/@ag-ui/langgraph": {
@ -92,12 +93,12 @@
} }
}, },
"node_modules/@ag-ui/proto": { "node_modules/@ag-ui/proto": {
"version": "0.0.39", "version": "0.0.42",
"resolved": "https://registry.npmjs.org/@ag-ui/proto/-/proto-0.0.39.tgz", "resolved": "https://registry.npmjs.org/@ag-ui/proto/-/proto-0.0.42.tgz",
"integrity": "sha512-xlj/PzZHkJ3CgoQC5QP9g7DEl/78wUK1+A2rdkoLKoNAMOkM2g6jKw0N88iFIh5GZhtiCNN2wb8XwRWPYx9XQQ==", "integrity": "sha512-NDUwSgMnGEqxZGkWIJ1ge5t3Q7Kiddj360x2JAWaIfv9w+7tDJ0pmgyzf3/SXp605aY2wZiDLBtJ6jKZeg1lFg==",
"peer": true, "peer": true,
"dependencies": { "dependencies": {
"@ag-ui/core": "0.0.39", "@ag-ui/core": "0.0.42",
"@bufbuild/protobuf": "^2.2.5", "@bufbuild/protobuf": "^2.2.5",
"@protobuf-ts/protoc": "^2.11.1" "@protobuf-ts/protoc": "^2.11.1"
} }
@ -5266,6 +5267,12 @@
"node": ">= 12" "node": ">= 12"
} }
}, },
"node_modules/compare-versions": {
"version": "6.1.1",
"resolved": "https://registry.npmjs.org/compare-versions/-/compare-versions-6.1.1.tgz",
"integrity": "sha512-4hm4VPpIecmlg59CHXnRDnqGplJFrbLG4aFEl5vl6cK1u76ws3LLvX7ikFnTDl5vo39sjWD6AaDPYodJp/NNHg==",
"license": "MIT"
},
"node_modules/console-table-printer": { "node_modules/console-table-printer": {
"version": "2.14.6", "version": "2.14.6",
"resolved": "https://registry.npmjs.org/console-table-printer/-/console-table-printer-2.14.6.tgz", "resolved": "https://registry.npmjs.org/console-table-printer/-/console-table-printer-2.14.6.tgz",

View file

@ -11,7 +11,7 @@
"format": "biome check --write app components" "format": "biome check --write app components"
}, },
"dependencies": { "dependencies": {
"@ag-ui/client": "^0.0.40", "@ag-ui/client": "^0.0.42",
"@copilotkit/react-core": "^1.10.6", "@copilotkit/react-core": "^1.10.6",
"@copilotkit/react-ui": "^1.10.6", "@copilotkit/react-ui": "^1.10.6",
"@copilotkit/runtime": "^1.10.6", "@copilotkit/runtime": "^1.10.6",