snapshot of https://github.com/tldraw/tldraw.git (main, 2026-09-23; blobs > 131072B omitted)

templates/agent/client/App.tsx

@@ -0,0 +1,99 @@
+import { useCallback, useMemo, useState } from 'react'
+import {
+	DefaultSizeStyle,
+	ErrorBoundary,
+	TLComponents,
+	Tldraw,
+	TldrawUiToastsProvider,
+	TLUiOverrides,
+} from 'tldraw'
+import { TldrawAgentApp } from './agent/TldrawAgentApp'
+import {
+	TldrawAgentAppContextProvider,
+	TldrawAgentAppProvider,
+} from './agent/TldrawAgentAppProvider'
+import { ChatPanel } from './components/ChatPanel'
+import { ChatPanelFallback } from './components/ChatPanelFallback'
+import { CustomHelperButtons } from './components/CustomHelperButtons'
+import { AgentHighlightOverlayUtil } from './overlays/AgentHighlightOverlayUtil'
+import { TargetAreaTool } from './tools/TargetAreaTool'
+import { TargetShapeTool } from './tools/TargetShapeTool'
+
+// Customize tldraw's styles to play to the agent's strengths
+DefaultSizeStyle.setDefaultValue('s')
+
+// Custom tools for picking context items
+const tools = [TargetShapeTool, TargetAreaTool]
+const overlayUtils = [AgentHighlightOverlayUtil]
+const overrides: TLUiOverrides = {
+	tools: (editor, tools) => {
+		return {
+			...tools,
+			'target-area': {
+				id: 'target-area',
+				label: 'Pick Area',
+				kbd: 'c',
+				icon: 'tool-frame',
+				onSelect() {
+					editor.setCurrentTool('target-area')
+				},
+			},
+			'target-shape': {
+				id: 'target-shape',
+				label: 'Pick Shape',
+				kbd: 's',
+				icon: 'tool-frame',
+				onSelect() {
+					editor.setCurrentTool('target-shape')
+				},
+			},
+		}
+	},
+}
+
+function App() {
+	const [app, setApp] = useState<TldrawAgentApp | null>(null)
+
+	const handleUnmount = useCallback(() => {
+		setApp(null)
+	}, [])
+
+	// Custom components that need the agent app's React context
+	const components: TLComponents = useMemo(() => {
+		return {
+			HelperButtons: () =>
+				app && (
+					<TldrawAgentAppContextProvider app={app}>
+						<CustomHelperButtons />
+					</TldrawAgentAppContextProvider>
+				),
+		}
+	}, [app])
+
+	return (
+		<TldrawUiToastsProvider>
+			<div className="tldraw-agent-container">
+				<div className="tldraw-canvas">
+					<Tldraw
+						persistenceKey="tldraw-agent-demo"
+						tools={tools}
+						overlayUtils={overlayUtils}
+						overrides={overrides}
+						components={components}
+					>
+						<TldrawAgentAppProvider onMount={setApp} onUnmount={handleUnmount} />
+					</Tldraw>
+				</div>
+				<ErrorBoundary fallback={ChatPanelFallback}>
+					{app && (
+						<TldrawAgentAppContextProvider app={app}>
+							<ChatPanel />
+						</TldrawAgentAppContextProvider>
+					)}
+				</ErrorBoundary>
+			</div>
+		</TldrawUiToastsProvider>
+	)
+}
+
+export default App