Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

Show agent thinking and tool calls in the chat UI

Aperta
  • Qualcosa non va?
#23 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
5/5
Tempo stimato
Più di una settimana
Idoneità per principianti
22/100
Tipo di issue
Funzionalità
Chiarezza
Da chiarire
Stato di attività
Ferma
Stack tecnologico
python, typescript
Ambito
ai, backend, frontend

Direzione di ricerca

Start with apps/app/src/components/tool-rendering.tsx and inspect the existing ToolReasoning and useDefaultRenderTool integration. Then read apps/agent/main.py to understand how agent events are emitted; the work is done when thinking and tool activity can be presented as a coherent, collapsible chat view with the proposed status details.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

Summary

Surface the agent's thinking process and tool call activity in the chat UI so users can see how the agent reasons, not just the final answer.

Current State

  • Tool calls: The ToolReasoning component (apps/app/src/components/tool-rendering.tsx) already renders tool names, arguments, and status (executing → complete) via useDefaultRenderTool. This is a good foundation but is minimal — it shows what tool was called, not why.
  • Thinking/reasoning: Not shown at all. The agent's intermediate thought process is invisible to the user. There is no UI for streaming thinking tokens or displaying step-by-step reasoning.

Proposal

1. Agent thinking display

Show the agent's reasoning as it works through a problem. This could be:

  • Streaming thinking tokens — If using a model with extended thinking (e.g. Claude with thinking blocks), render these in a collapsible "Thinking…" section above the response. Show the thinking text streaming in real-time with a subtle visual treatment (muted text, indented, or in a distinct container).
  • Step-by-step reasoning — For multi-step agent tasks, show each reasoning step as the agent progresses (e.g., "Analyzing your request…", "Looking up existing todos…", "Organizing by priority…").
2. Enhanced tool call visualization

Build on the existing ToolReasoning component:

  • Execution timeline — When multiple tools are called in sequence, show them as a vertical timeline so users see the agent's workflow.
  • Tool results — Show a summary of what the tool returned (e.g., "Found 3 todos" or "Updated 2 items"), not just the arguments passed in.
  • Duration — Show how long each tool call took.
  • Grouped display — Collapse completed tool calls into a compact summary, expand only the active one.
3. Thinking + tools combined view

When the agent thinks, then calls a tool, then thinks again — show this as a coherent narrative:

🧠 Thinking: "The user wants to organize their todos by priority..."
🔧 get_todos → returned 5 todos
🧠 Thinking: "I'll group these into high/medium/low priority..."
🔧 manage_todos → updated 5 todos
✅ "I've organized your todos by priority!"

Implementation Notes

  • CopilotKit's useDefaultRenderTool already provides the hook point for tool rendering
  • The agent backend (apps/agent/main.py) would need to emit thinking/reasoning events — this could be done via LangGraph's streaming callbacks or by adding thinking state to AgentState
  • For models with native thinking (Claude extended thinking), CopilotKit may already surface thinking tokens — needs investigation
  • The ToolReasoning component at apps/app/src/components/tool-rendering.tsx is the starting point for enhanced tool visualization

Design Considerations

  • Thinking should be collapsible by default after completion — users who want transparency can expand it, but it shouldn't clutter the chat for those who don't
  • Tool calls should feel like a progress indicator, not noise — compact when done, detailed when active
  • The overall effect should make the agent feel more trustworthy and transparent without overwhelming the UI
Lingua principale
TypeScript
Stelle
3.9k
Fork
414
Merge medio
4h
PR unite (30g)
6

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di CopilotKit/OpenIntelligentUI

Tutte le issue di CopilotKit/OpenIntelligentUI

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.