Alem Tuzlak
0b5ed9cd97
Adds the user-facing improvements that make the chat tab usable in
real workspaces:
- Tailwind v4 compile pass on every bundle so per-app utility classes
in user renders actually have CSS rules to match (previously they
shipped unstyled).
- Hot-reload file watcher: edits to *.{ts,tsx,css} in the workspace
trigger a debounced rescan + rebundle so the chat reflects changes
without an extension reload.
- Fixture replay: ▶ on a saved fixture animates the recorded
conversation back into the chat surface message-by-message.
- vscode-lm-factory bug fix: pass assistant tool calls and tool
results through to the model. The previous toLmMessages dropped
both, so every tool result was invisible to the model and it would
loop calling the same tool with slightly tweaked args.
- followUp:false support in chat-source's tool-calling loop so
display-only tools don't trigger a follow-up turn.
- Markdown rendering for assistant text (bold/italic/lists/headings/
fenced code/links), built as React elements with sanitized hrefs.
- Tool-call UI cleanup: drop the dashed inner card, replace the
uppercase header with a clickable tool-name pill that opens the
registering hook in the editor.
- Sidebar redesign: three labeled sections (Model / Recording /
Saved replays) with explanatory copy, full-width save form,
inline play + two-click delete on each fixture row.
- Resizable, collapsible side panels (CSS-var driven, persisted to
localStorage). Floating chevron buttons ride the panel edge.
- Components panel: expandable rows showing each registered hook
("useFrontendTool · displayCurrentWeather") clickable to jump to
the exact line.
- Diagnostics panel surfaces Tailwind detection state alongside the
vscode.lm tools row.
Infrastructure additions:
src/extension/playground/tailwind-compile.ts (+ test)
src/extension/playground/file-watcher.ts (+ test)
src/extension/playground/fixture-replay.ts (+ test)
src/webview/playground/ResizeHandle.tsx
CopilotKit
Docs · Examples · Copilot Cloud · Discord
Build agent-native applications with generative UI, shared state, and human-in-the-loop workflows.
What is CopilotKit
CopilotKit is a best-in-class SDK for building full-stack agentic applications, Generative UI, and chat applications.
We are the company behind the AG-UI Protocol, adopted by Google, LangChain, AWS, Microsoft, Mastra, PydanticAI, and more!
https://github.com/user-attachments/assets/de5bcc17-1b51-4092-9a85-42971ecc1f4c
Features:
- Chat UI – A React-based chat interface that supports message streaming, tool calls, and agent responses.
- Backend Tool Rendering – Enables agents to call backend tools that return UI components rendered directly in the client.
- Generative UI – Allows agents to generate and update UI components dynamically at runtime based on user intent and agent state.
- Shared State – A synchronized state layer that both agents and UI components can read from and write to in real time.
- Human-in-the-Loop – Lets agents pause execution to request user input, confirmation, or edits before continuing.
https://github.com/user-attachments/assets/55bf6714-62a7-4d5d-9232-07747cc0763b
Quick Start
New projects:
npx copilotkit@latest create -f <framework>
Existing projects:
npx copilotkit@latest init
https://github.com/user-attachments/assets/7372b27b-8def-40fb-a11d-1f6585f556ad
What this gives you:
- CopilotKit installed – Core packages are fully set up in your app
- Provider configured – Context, state, and hooks ready to use
- Agent <> UI connected – Agents can stream actions and render UI immediately
- Deployment-ready – Your app is ready to deploy
Complete getting started guide →
How it works:
CopilotKit connects your UI, agents, and tools into a single interaction loop.
This enables:
- Agents that ask users for input
- Tools that render UI
- Stateful workflows across steps and sessions
⭐️ useAgent Hook
The useAgent hook is a proper superset of useCoAgent and sits directly on AG-UI, giving more control over the agent connection.
// Programmatically access and control your agents
const { agent } = useAgent({ agentId: "my_agent" });
// Render and update your agent's state
return <div>
<h1>{agent.state.city}</h1>
<button onClick={() => agent.setState({ city: "NYC" })}>
Set City
</button>
</div>
Check out the useAgent docs to learn more.
https://github.com/user-attachments/assets/67928406-8abc-49a1-a851-98018b52174f
Generative UI
Generative UI is a core CopilotKit pattern that allows agents to dynamically render UI as part of their workflow.
https://github.com/user-attachments/assets/3cfacac0-4ffd-457a-96f9-d7951e4ab7b6
Compare the Three Types
Explore:
Generative UI educational repo →
🖥️ AG-UI: The Agent–User Interaction Protocol
Connect agent workflow to user-facing apps, with deep partnerships and 1st-party integrations across the agentic stack—including LangGraph, CrewAI, and more.
npx create-ag-ui-app my-agent-app
🤝 Community
Have questions or need help?
Join our Discord →Read the Docs →
Try Copilot Cloud →
Stay up to date with our latest releases!
Follow us on LinkedIn →Follow us on X →
🙋🏽♂️ Contributing
Thanks for your interest in contributing to CopilotKit! 💜
We value all contributions, whether it's through code, documentation, creating demo apps, or just spreading the word.
Here are a few useful resources to help you get started:
-
For code contributions, CONTRIBUTING.md.
-
For documentation-related contributions, check out the documentation contributions guide.
-
Want to contribute but not sure how? Join our Discord and we'll help you out!
📄 License
This repository's source code is available under the MIT License.