llmuxui-patterns

LLM‑First UI Patterns in TypeScript: From Siri Integrations to Desktop Assistants

UUnknown

2026-02-10

9 min read

Practical TypeScript patterns for LLM-powered assistants: streaming, citations, desktop/mobile UX safeguards, and framework examples.

Hook: You're building an assistant — and users expect it to behave like Siri, not a broken chatbot

If you're a TypeScript engineer building LLM-powered UIs in 2026, your users expect incremental, accurate, and safe responses — across mobile, desktop, and web. They want streaming answers, verifiable citations, and desktop assistants with careful file and privacy safeguards. The last two years of product launches (Anthropic's Cowork desktop agent, the Apple–Google Gemini tie-up for Siri, and the rise of affordable on-device inference hardware like Raspberry Pi AI HAT+2) mean consumers now compare your app to polished assistant experiences.

Executive summary — what matters for LLM‑First UI in TypeScript

Streaming & incremental rendering are table-stakes for responsiveness; implement token-level or chunked updates in the UI.
Citations & provenance are required for trust and compliance — surface sources with snippets and copyable links.
UX safeguards (consent, confirmation flows, rate controls, and file-access sandboxing) are critical for desktop agents and mobile assistants.
Framework integration patterns for React, Next.js (app router), Vue, and Node backends maximize developer ergonomics and maintainability in TypeScript.
On-device & hybrid deployments are rising — plan for offline-first and local LLM inference on edge devices.

Why 2026 is different: context and trends

By early 2026 the landscape shifted: Anthropic's Cowork research preview demonstrated desktop agents that access the file system (raising UX and privacy questions); Apple and Google collaborations pushed assistant expectations on mobile; and affordable inference hardware like the Raspberry Pi AI HAT+2 made on-device LLMs feasible for certain workloads. Regulators and publishers continued to press for better provenance and citation handling after high-profile disputes in 2024–2025.

Design for transparency: users and regulators now require citations and opt-in consent for sensitive capabilities.

Core data types and TypeScript foundations

Start with clearly typed message and stream shapes so your React/Vue components and Node route handlers interoperate cleanly.

// types.ts
export type Role = 'user' | 'assistant' | 'system' | 'tool';

export interface Citation {
  id: string;
  title?: string;
  url: string;
  snippet?: string; // excerpt shown in UI
}

export interface AssistantToken {
  text: string;
  index: number; // token order
  isFinal?: boolean;
  citations?: Citation[]; // optional provenance for this token/chunk
}

export interface AssistantMessage {
  id: string;
  role: Role;
  tokens: AssistantToken[]; // supports incremental rendering
  createdAt: number;
}

Pattern: Streaming & incremental rendering

Goal: Show partial answers as they arrive to improve perceived latency and let users interrupt or refine early.

Server side (Node / Next.js Route Handlers)

Return a streaming response using Server-Sent Events (SSE) or chunked JSON. Below is a minimal TypeScript example using an OpenAI-style streaming API and a Next.js route handler.

// app/api/assistant/route.ts (Next.js app router)
import { NextResponse } from 'next/server';
import type { RequestHandler } from 'next/server';
import { transformStreamFromLLM } from './llm-client';

export const POST: RequestHandler = async (req) => {
  const body = await req.json();
  const stream = await transformStreamFromLLM(body.prompt);
  return new NextResponse(stream, { headers: { 'Content-Type': 'text/event-stream' } });
};

On the client, parse SSE or a ReadableStream and update UI token-by-token:

// react-hook.tsx (client)
export function useAssistantStream(prompt: string) {
  const [tokens, setTokens] = useState<AssistantToken[]>([]);

  useEffect(() => {
    const controller = new AbortController();
    fetch('/api/assistant', { method: 'POST', body: JSON.stringify({ prompt }), signal: controller.signal })
      .then(res => {
        const reader = res.body!.getReader();
        const decoder = new TextDecoder();
        let buffer = '';
        const pump = async () => {
          const { done, value } = await reader.read();
          if (done) return;
          buffer += decoder.decode(value, { stream: true });
          // assume newline-delimited JSON chunks
          const parts = buffer.split('\n');
          buffer = parts.pop() || '';
          for (const p of parts) {
            if (!p.trim()) continue;
            const chunk = JSON.parse(p) as AssistantToken;
            setTokens(prev => [...prev, chunk]);
          }
          await pump();
        };
        pump();
      });

    return () => controller.abort();
  }, [prompt]);

  return tokens;
}

Client considerations

Render tokens progressively, collapse or highlight newly arrived tokens.
Show typing indicator and an interrupt button wired to AbortController.
Debounce UI updates to avoid jank — batch small token updates into ~100ms windows.

Pattern: Citations, provenance and explainability

In 2026, users and regulators expect sources. Make citations scannable and verifiable.

Data model & UI affordances

Attach citations at the chunk or token level and allow users to expand source details.

// attach citations to chunks
const token: AssistantToken = {
  text: 'According to a 2025 study, ...',
  index: 12,
  citations: [
    { id: 'cite-1', title: 'Study X', url: 'https://example.com/study-x', snippet: 'Key finding: ...' }
  ]
};

UI pattern: Inline badges + citation panel

Show a small citation badge next to the sentence.
Open a side panel with the source snippet, link, and confidence score.
Allow users to copy the source or open in a new tab.

Accessibility note: ensure citation badges are keyboard focusable and readable by screen readers.

Pattern: Assistants on desktop (Electron, Tauri, native bridges)

Desktop assistants can access the file system and run background tasks. The UX must prioritize safety and discoverability of powerful actions.

Safety first — permission & sandboxing

Request permission before any broad file-system access — show exactly which directories and why.
Provide a preview of changes before executing any file writes (Anthropic's Cowork highlighted this need in 2025).
Keep a reversible audit trail of aggressive actions the assistant took on the user's behalf.

Desktop integration pattern (Tauri + TypeScript)

// src-tauri/src/main.rs (Tauri) exposes a safe command to the TS frontend
// Frontend: call window.__TAURI__.invoke('scan_project', { path: '/Users/me/Documents' })

Use typed IPC bindings from TypeScript to the native layer so you can control and audit each privileged operation. See security checklists for granting agent privileges and designing consent flows (security checklist).

Pattern: Mobile assistants & Siri-like integrations

With Apple pairing Gemini into Siri, and stronger platform-level assistant hooks, mobile experiences must handle voice, short interactions, and background execution policies.

React Native / Native modules in TypeScript

Offload long-running LLM inference to a server or a background runnable on-device when feasible — follow patterns from mobile studio and edge-resilient workflows.
Stream responses back so the UI speaks or displays partial info while continuing to compute.
Respect platform privacy guidelines — always show when mic, camera, or files are used.

Pattern: Offline & on-device LLM fallback

Devices like Raspberry Pi with AI HAT+2 make local inference possible for privacy-sensitive short tasks. Architect a hybrid pipeline:

Try local low-latency model for simple completions and retrieval.
Fallback to cloud LLM for large-context or higher-accuracy requests (with user consent).
Sync logs and provenance metadata when connected.

Pattern: UX safeguards and anti-hallucination strategies

Hallucinations and unsafe actions are the main trust breakers. Implement UX patterns that both prevent and mitigate bad outputs.

Prevention

Tooling & retrieval-augmented generation (RAG): prefer retrieval-first flows; show source hits early.
Instruction constraints: use system prompts to restrict actions (no legal/advice content without disclaimers).
Rate limiting & intent confirmation: confirm destructive actions (delete/modify files) with an explicit permission step.

Mitigation

Surface a confidence score and a ‘why this answer’ explanation tied to citation snippets.
Allow quick rollbacks and an undo timeline for persistent changes.
Provide an easy path for escalation to a human operator or a feedback loop that feeds into retraining and moderation tooling.

Practical examples: Putting patterns into code (React + TypeScript)

Here's a compact React component showing streaming tokens and citation badges.

import React from 'react';
import type { AssistantToken } from './types';

export function AssistantView({ tokens }: { tokens: AssistantToken[] }) {
  return (
    <div className="assistant" role="log" aria-live="polite">
      {tokens.map(t => (
        <span key={t.index} className="token">
          {t.text}
          {t.citations?.map(c => (
            <a key={c.id} href={c.url} target="_blank" rel="noopener noreferrer" className="cite" title={c.title}>🔗</a>
          ))}
        </span>
      ))}
    </div>
  );
}

Observability: telemetry, transcripts, and audits

Log streamed transcripts and citation metadata separately from PII. In 2026, audits are more than optional — they are expected for desktop agents that act autonomously.

Store token-level timestamps and source IDs.
Keep a secure, user-consented audit log for actions taken on behalf of users.
Expose a “what I did” view for the desktop assistant with revert controls — integrate with operational dashboards and playbooks for resilient monitoring (operational dashboards).

Performance tips & cost control

Batch small requests and use streaming to avoid repeated round-trips — field kits and compact streaming rigs provide practical guidance for on-site capture and streaming set-ups (micro-rig reviews).
Use shorter contexts for mobile and cache retrieval hits aggressively client-side.
Gracefully degrade: if cloud LLM latency spikes, fall back to a cached reply or a concise apology with a retry option.

Cross-framework patterns

React + Next.js (app router)

Use server components to prefetch retrieval data, send streaming responses via route handlers, and render tokens incrementally on the client — see composable UX patterns for edge-ready microapps (composable UX pipelines).

Vue 3 + Vite

Leverage composables for streaming hooks and keep a central TypeScript store for token/citation shapes.

Node backends

Provide typed streaming endpoints with SSE/WebSocket and validate provenance metadata before returning chunks — approaches from realtime workroom architectures are helpful (run realtime workrooms without Meta).

Design patterns for human-in-the-loop

For high-risk actions, use a staged approach:

Show intent summary (what the assistant wants to do).
Request confirmation (explicit and scoped permissions).
Execute with an audit trail and an undo affordance.

Legal & privacy patterns (2026 considerations)

Since 2024–2026, litigation and new regulations emphasize provenance and opt-in data usage. Implement clear consent UIs and offer exportable audit logs to comply with likely requests — and review edge caching and compliance playbooks when designing hybrid deployments (edge caching strategies).

Actionable checklist for your next sprint

Implement a streaming prototype (SSE or ReadableStream) and measure perceived latency.
Start attaching citations at the retrieval stage and expose them in the UI as badges and panels.
Add confirmation flows and sandboxed file access for desktop assistants.
Create telemetry events for token streaming, citation use, and destructive actions (audit-ready).
Prepare a hybrid fallback for on-device inference where privacy-sensitive tasks can remain local — look to hybrid studio ops and mobile studio patterns for low-latency capture and edge resilience (hybrid studio ops, mobile studio essentials).

Final takeaways — how to prioritize

Prioritize streaming and provenance in the first release, then layer on safety, auditability, and desktop-specific permission flows. Integrate with your framework of choice via typed contracts so the UI, backend, and native layers speak the same language.

Closing: start small, ship incrementally

LLM-first UIs in TypeScript reward incremental progress: ship streaming tokens, then citations, then safety flows. Use TypeScript types to lock down your contracts and avoid subtle mismatches between client, server, and native layers. The patterns in this article are practical starting points you can implement in a single sprint and iterate based on real user feedback.

Call to action: Ready to prototype a streaming assistant in TypeScript? Clone a starter repo, wire a typed streaming endpoint, and bring citation panels into your UI — then test with a small user group and iterate on safeguards. If you want, share your code snippets and I’ll review them with targeted improvements for React, Vue, Next.js, or desktop integrations.

Unknown

Contributor

Senior editor and content strategist. Writing about technology, design, and the future of digital media. Follow along for deep dives into the industry's moving parts.