+
DeepAgents — {exampleLabel}
+
+ chat id: {chatId}
+
+
+
+ {messages.map(message => (
+
+ {message.role === 'user' ? 'You: ' : 'AI: '}
+ {message.parts.map((part, index) => {
+ switch (part.type) {
+ case 'text': {
+ return (
+
+ {part.text}
+
+ );
+ }
+ case 'reasoning': {
+ return (
+
+ {part.text}
+
+ );
+ }
+ case 'tool-bash': {
+ return ;
+ }
+ case 'tool-read':
+ case 'tool-write': {
+ return ;
+ }
+ case 'tool-grep': {
+ return (
+
+ );
+ }
+ case 'dynamic-tool': {
+ return ;
+ }
+ }
+ })}
+
+ ))}
+
+ {status === 'submitted' && (
+
+ )}
+
+ {error && (
+
+
+ {error.message || String(error)}
+
+
+
+ )}
+
+
+
+
sendMessage({ text })}
+ />
+
+ );
+}
diff --git a/examples/harness-e2e-next/components/weather-deepagents-harness-chat.tsx b/examples/harness-e2e-next/components/weather-deepagents-harness-chat.tsx
new file mode 100644
index 000000000000..0a6d8a4b2e5d
--- /dev/null
+++ b/examples/harness-e2e-next/components/weather-deepagents-harness-chat.tsx
@@ -0,0 +1,128 @@
+'use client';
+
+import type { WeatherDeepAgentsHarnessAgentMessage } from '@/agent/harness/deepagents/weather-agent';
+import { Response } from '@/components/ai-elements/response';
+import { useChatId } from '@/components/chat-id-provider';
+import ChatInput from '@/components/chat-input';
+import DynamicToolView from '@/components/tool/dynamic-tool-view';
+import HarnessBashToolView from '@/components/tool/harness-bash-tool-view';
+import HarnessFileToolView from '@/components/tool/harness-file-tool-view';
+import WeatherView from '@/components/tool/weather-tool-view';
+import { useChat } from '@ai-sdk/react';
+import {
+ DefaultChatTransport,
+ lastAssistantMessageIsCompleteWithApprovalResponses,
+} from 'ai';
+
+export default function WeatherDeepAgentsHarnessChat({
+ apiRoute,
+ exampleLabel,
+}: {
+ apiRoute: string;
+ exampleLabel: string;
+}) {
+ const { chatId, resetChatId } = useChatId();
+ const {
+ error,
+ status,
+ sendMessage,
+ messages,
+ regenerate,
+ addToolApprovalResponse,
+ } = useChat