AI Agent UI

The conversation layer, ready to ship

Everything an agent shows mid-conversation: thinking states, tool calls, streaming text, diffs, tables and a full composer. Animated in vanilla JavaScript, copy-paste, built for light and dark.

$ curl -fsSL drift-ui.netlify.app/cli.js | node - add streaming-text
No config, no framework: the command drops a self-contained file into ./drift/. Every card below has its own command. npx drift-ui list shows the whole registry.
/
components

Thinking & Reasoning

Thinking
ThinkingThinking

Locating the jwt.verify call in the auth middleware.

No algorithms allowlist, so a token signed with none could be accepted.

Pinning the algorithm to HS256 and validating issuer and audience.

Thinking StateThinking
Thinking
OrbsThinking
No matches in this group.

Tool & Action States

Web Search searching

"JWT auth vulnerabilities and middleware best practices"

JWT validation best practices auth0.com
Attacking JWT authentication portswigger.net
Node.js security cheat sheet owasp.org
Web SearchTool State
src/auth.ts
41-return localStorage.token;
42+// read session from cookie
43+const t = cookies.get('session');
44+if (!t) throw new Error('no session');
45+return t;
File DiffTool State
Image GenerationTool State
No matches in this group.

Text Outputs

Assistant opus-4.1

Here is a quick summary. The migration touches three modules and is safe to run incrementally.

I would start with the auth-service, then roll the rest out behind a feature flag.

Text ResponseText Output
drift-sonnet-4 streaming

Generating your release notes for v2.4, summarizing the 28 merged pull requests and grouping the changes by area.

Streaming TextText Output
Grounded answer 2 sources

Transformers scale well with data and compute, though attention is quadratic in sequence length.

  • 1 Attention Is All You Need arxiv.org
  • 2 Efficient Transformers: A Survey arxiv.org
Inline CitationsText Output
utils.ts TS
export const NS = "drift/utils"; export const sum = (a: number, b: number): number => a + b; export const clamp = (n: number, min: number, max: number) => Math.min(Math.max(n, min), max);
Code BlockText Output
No matches in this group.

Structured Outputs

To-dos 5 / 5
  • Scaffold the project structure
  • Build the component registry
  • Implement entitlement gating
  • Wire up Stripe checkout
  • Polish the landing page
To-do ListStructured
Model Context $/1M in
gpt-4o 128k $5.00
claude-3.5 200k $3.00
llama-3.1 128k $0.90
Data TableStructured
Features
Personal
Enterprise
Unlimited projects
All components
Team-wide usage
Priority support
Comparison TableStructured
No matches in this group.

Rich & Interactive

Refactor useAuth() to use the new session helper
AI Agent InputInteractive
No matches in this group.