Agent Read-Only Context
Publish UI values to the agent as a one-way read-only channel via useAgentContext.
"""MS Agent Framework agent with sales todos state, weather tool, query data,and HITL schedule meeting tool.Adapted from examples/integrations/ms-agent-framework-python/agent/src/agent.py"""from __future__ import annotationsimport jsonfrom textwrap import dedentfrom typing import Annotatedfrom agent_framework import Agent, BaseChatClient, toolfrom agent_framework_ag_ui import AgentFrameworkAgentfrom pydantic import Field# =====================================================================# Shared tool implementations# =====================================================================from tools import ( get_weather_impl, query_data_impl, manage_sales_todos_impl, get_sales_todos_impl, schedule_meeting_impl, search_flights_impl, build_a2ui_operations_from_tool_call,)STATE_SCHEMA: dict[str, object] = { "salesTodos": { "type": "array", "items": { "type": "object", "properties": { "id": {"type": "string"}, "title": {"type": "string"}, "stage": {"type": "string"}, "value": {"type": "number"}, "dueDate": {"type": "string"}, "assignee": {"type": "string"}, "completed": {"type": "boolean"}, }, }, "description": "Ordered list of the user's sales pipeline todos.", }}PREDICT_STATE_CONFIG: dict[str, dict[str, str]] = { "salesTodos": { "tool": "manage_sales_todos", "tool_argument": "todos", }}@tool( name="manage_sales_todos", description=( "Replace the entire list of sales todos with the provided values. " "Always include every todo you want to keep." ),)def manage_sales_todos( todos: Annotated[ list[dict], Field( description=( "The complete source of truth for the user's sales todos. " "Maintain ordering and include the full list on each call." ) ), ],) -> str: """Persist the provided set of sales todos.""" result = manage_sales_todos_impl(todos) return f"Sales todos updated. Tracking {len(result)} item(s)."@tool( name="get_sales_todos", description="Get the current list of sales todos.",)def get_sales_todos() -> str: """Return the current sales todos or defaults.""" result = get_sales_todos_impl() return json.dumps(result)@tool( name="get_weather", description="Get the current weather for a location. Use this to render the frontend weather card.",)def get_weather( location: Annotated[ str, Field( description="The city or region to describe. Use fully spelled out names." ), ],) -> str: """Return weather data as JSON for UI rendering.""" result = get_weather_impl(location) return json.dumps(result)@tool( name="query_data", description="Query the database. Takes natural language. Always call before showing a chart or graph.",)def query_data( query: Annotated[ str, Field(description="Natural language query to run against the database.") ],) -> str: """Query the database and return results as JSON.""" result = query_data_impl(query) return json.dumps(result)@tool( name="schedule_meeting", description="Schedule a meeting. The user will be asked to pick a time via the meeting time picker UI.", approval_mode="always_require",)def schedule_meeting( reason: Annotated[str, Field(description="Reason for scheduling the meeting.")], duration_minutes: Annotated[ int, Field(description="Duration of the meeting in minutes.") ] = 30,) -> str: """Request human approval to schedule a meeting.""" result = schedule_meeting_impl(reason, duration_minutes) return json.dumps(result)@tool( name="search_flights", description=( "Search for flights and display the results as rich A2UI cards. Return exactly 2 flights. " "Each flight must have: airline, airlineLogo, flightNumber, origin, destination, " "date, departureTime, arrivalTime, duration, status, statusColor, price, currency." ),)def search_flights( flights: Annotated[ list[dict], Field(description="List of flight objects to search and display."), ],) -> str: """Search for flights and display as rich cards.""" result = search_flights_impl(flights) return json.dumps(result)@tool( name="generate_a2ui", description=( "Generate dynamic A2UI components based on the conversation. " "A secondary LLM designs the UI schema and data." ),)def generate_a2ui( context: Annotated[ str, Field(description="Conversation context to generate UI from.") ],) -> str: """Generate dynamic A2UI dashboard from conversation context.""" from openai import OpenAI client = OpenAI() tool_schema = { "type": "function", "function": { "name": "_design_a2ui_surface", "description": "Render a dynamic A2UI v0.9 surface.", "parameters": { "type": "object", "properties": { "surfaceId": {"type": "string"}, "catalogId": {"type": "string"}, "components": {"type": "array", "items": {"type": "object"}}, "data": {"type": "object"}, }, "required": ["surfaceId", "catalogId", "components"], }, }, } response = client.chat.completions.create( model="gpt-4.1", messages=[ {"role": "system", "content": context or "Generate a useful dashboard UI."}, { "role": "user", "content": "Generate a dynamic A2UI dashboard based on the conversation.", }, ], tools=[tool_schema], tool_choice={"type": "function", "function": {"name": "_design_a2ui_surface"}}, ) if not response.choices[0].message.tool_calls: return json.dumps({"error": "LLM did not call _design_a2ui_surface"}) tool_call = response.choices[0].message.tool_calls[0] args = json.loads(tool_call.function.arguments) result = build_a2ui_operations_from_tool_call(args) return json.dumps(result)def create_agent(chat_client: BaseChatClient) -> AgentFrameworkAgent: """Instantiate the CopilotKit demo agent backed by Microsoft Agent Framework.""" base_agent = Agent( client=chat_client, name="sales_agent", instructions=dedent( """ You help users manage their sales pipeline, check weather, query data, and schedule meetings. State sync: - The current list of sales todos is provided in the conversation context. - When you add, remove, or reorder todos, call `manage_sales_todos` with the full list. Never send partial updates--always include every todo that should exist. - CRITICAL: When asked to "add" a todo, you must: 1. First, identify ALL existing todos from the conversation history 2. Create EXACTLY ONE new todo (never more than one unless explicitly requested) 3. Call manage_sales_todos with: [all existing todos] + [the one new todo] - When asked to "remove" a todo, remove exactly ONE item unless user specifies otherwise. Tool usage rules: - When user asks to schedule a meeting, you MUST call the `schedule_meeting` tool immediately. Do NOT ask for approval yourself--the tool's approval workflow and the client UI will handle it. Frontend integrations: - `get_weather` renders a weather card in the UI. Only call this tool when the user explicitly asks for weather. Do NOT call it after unrelated tasks or approvals. - `query_data` fetches database records. Always call before showing charts or graphs. - `schedule_meeting` requires explicit user approval before you proceed. Only use it when a user asks to schedule or set up a meeting. Always call the tool instead of asking manually. Conversation tips: - Reference the latest todo list before suggesting changes. - Keep responses concise and friendly unless the user requests otherwise. - After you finish executing tools for the user's request, provide a brief, final assistant message summarizing exactly what changed. Do NOT call additional tools or switch topics after that summary unless the user asks. ALWAYS send this conversational summary so the message persists. """.strip() ), tools=[ manage_sales_todos, get_sales_todos, get_weather, query_data, schedule_meeting, search_flights, generate_a2ui, ], ) return AgentFrameworkAgent( agent=base_agent, name="CopilotKitMicrosoftAgentFrameworkAgent", description="Manages sales pipeline todos, weather, data queries, and meeting scheduling.", predict_state_config=PREDICT_STATE_CONFIG, require_confirmation=False, )What is this?#
Sometimes you want the agent to know something about the current UI, like the logged-in user, the current page, or a recent activity log, but you don't want the agent to be able to modify it. That's what
useAgentContext is for: a one-way UI → agent channel for
read-only context.
Unlike full shared state (where the agent can call tools that mutate
the state back to the UI), useAgentContext values are pure inputs.
The agent sees them on every turn via the runtime's context injection,
but it has no setter and no tool to write them back.
When should I use this?#
Reach for useAgentContext instead of full shared state when:
- The value is UI-owned and has no meaning to the agent beyond "what the user is looking at right now".
- The agent should read but never write (user identity, feature flags, selected record, scroll position).
- You want the value to automatically unregister on unmount (e.g. the "current record" context disappears when you leave the page).
Think of it as "props for the agent".
How it works in code#
Call useAgentContext({ description, value }) once per value you want
to publish. Each call registers a dynamic context entry with the
runtime that is:
- Refreshed whenever
valuechanges (React re-renders). - Automatically removed when the component unmounts.
- Surfaced to the agent via the backend's
CopilotKitMiddleware, which threads the entries into the model's message history on every turn.
useAgentContext({ description: "The currently logged-in user's display name", value: userName, }); useAgentContext({ description: "The user's IANA timezone (used when mentioning times)", value: userTimezone, }); useAgentContext({ description: "The user's recent activity in the app, newest first", value: recentActivity, });The description is important: it's a short human-readable label the
agent sees alongside the value, so it knows what to do with it. Treat
it like a parameter docstring.
Wire it to your own state#
useAgentContext doesn't care where the value comes from: local
state, a React Context, Redux, a query cache, anything. The only
requirement is that the identity of the value is stable enough for
React to avoid a render loop. In the demo we use a handful of
useState hooks; in a real app these would likely come from an auth
provider, a router hook, and your domain state stores.
import React, { useState } from "react";import { CopilotKit, CopilotPopup, useAgentContext,} from "@copilotkit/react-core/v2";import { ACTIVITIES, DemoLayout } from "./demo-layout";import { useReadonlyStateAgentContextSuggestions } from "./suggestions";export default function ReadonlyStateAgentContextDemo() { return ( <CopilotKit runtimeUrl="/api/copilotkit" agent="readonly-state-agent-context" > <DemoContent /> <CopilotPopup agentId="readonly-state-agent-context" defaultOpen={true} labels={{ chatInputPlaceholder: "Ask about your context..." }} /> </CopilotKit> );}function DemoContent() { const [userName, setUserName] = useState("Atai"); const [userTimezone, setUserTimezone] = useState("America/Los_Angeles"); const [recentActivity, setRecentActivity] = useState<string[]>([ ACTIVITIES[0], ACTIVITIES[2], ]);Read-only, by design#
Because the agent never sees a setter or a mutation tool for these
values, there's no way for a confused LLM to "update" them. That
makes useAgentContext the right tool whenever the value in question
is an input, not a field: the "context object passed to the agent on
every turn", rather than "shared workspace you both edit".
When you need both reads and writes, you want full shared state instead.
Related#
- Shared State (overview) — bidirectional reads + writes.
- State streaming — stream agent-written state back to the UI during a run.
