Hacktoberfest 2026: die Issues, die Maintainer für den Oktober markiert haben – offen und einsteigerfreundlich. Hacktoberfest-Issues durchsuchen

Show agent thinking and tool calls in the chat UI

Offen
  • Stimmt etwas nicht?
#23 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Maintainer antworten meist innerhalb von 1 Tag

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
5/5
Geschätzter Aufwand
Über eine Woche
Anfängerfreundlichkeit
22/100
Issue-Typ
Feature
Klarheit
Muss geklärt werden
Aktivitätsstatus
Veraltet
Tech-Stack
python, typescript
Bereich
ai, backend, frontend

Rechercherichtung

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.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

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
Vorherrschende Sprache
TypeScript
Sterne
3.9k
Forks
414
Ø Merge
4 Std.
Gemergte PRs (30 T.)
6

Entwicklungsumgebung

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus CopilotKit/OpenIntelligentUI

Alle Issues in CopilotKit/OpenIntelligentUI

Ähnliche Issues

Weitere Issues zu TypeScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.