ai-native-ui

Files (4)

• SKILL.md
• generative-ui.md · references/
• stream-text-patterns.md · references/
• tool-ui-mapping.md · references/

SKILL.md (first lines)

<!--
id: SK-086
name: ai-native-ui
description: AI-Native UI — Vercel AI SDK patterns for streaming UI. streamText, useChat, tool-to-component mapping, createStreamableValue, generative UI within PPR shells. Load when building AI-powered interfaces.
keywords: ai-sdk, stream-text, use-chat, generative-ui, tool-invocation, streaming-ui, llm, chatbot, ai-native, createStreamableValue, vercel-ai
version: 1.0.0
-->

# AI-Native UI

## When to Use This Skill

Load when building any UI with LLM integration: chat interfaces, AI-generated content, smart search, content generation tools, or any feature that streams AI responses to users.

This is **Tier 4 (Generative)** in the Vanguard architecture. Load `web-l100` (SK-083) for the full tier system.

---

## The Generative Tier

AI streams are a fundamentally different rendering model. Unlike T0-T3 where the final content is known at render time, T4 content builds up token-by-token with structural uncertainty. The UI must:

1. Show useful content immediately (PPR shell + cached content)
2. Progressively reveal AI-generated content as it streams
3. Handle tool invocations mid-stream (AI calls tools → UI renders components)
4. Gracefully handle interruption (user cancels, network drops)

---

## Core Pattern: streamText + Route Handler

### Server: Route Handler

```typescript
// app/api/chat/route.ts
import { streamText } from 'ai';
import { anthropic } from '@ai-sdk/anthropic';

export async function POST(req: Request) {
  const { messages } = await req.json();

  const result = streamText({
    model: anthropic('claude-sonnet-4-5-20250514'),
    system: 'You are a helpful assistant.',
    messages,
    tools: {
      getWeather: {
        description: 'Get weather for a location',
        parameters: z.object({
          location: z.string().describe('City name'),
        }),
        execute: async ({ location }) => {
          const weather = await fetchWeather(location);
          return weather;
        },
      },
    },
  });

  return result.toDataStreamResponse();
}
```

### Client: useChat Hook

```tsx
// components/chat.tsx
'use client';
import { useChat } from '@ai-sdk/react';

export function Chat() {
  const { messages, input, handleInputChange, handleSubmit, isLoading, stop } = useChat({
    api: '/api/chat',
  });

  return (
    <div className="chat">
      <div className="messages">
        {messages.map(message => (
          <div key={message.id} className={`message message--${message.role}`}>
            {message.content}

            {/* Render tool invocations as components */}
            {message.toolInvocations?.map(invocation => (
              <ToolResult key={invocation.toolCallId} invocation={invocation} />
            ))}
          </div>
        ))}
      </div>

      <form onSubmit={handleSubmit}>
        <input value={input} onChange={handleInputChange} placeholder="Ask anything..." />
        {isLoading ? (
          <button type="button" onClick={stop}>Stop</button>
        ) : (
          <button type="submit">Send</button>
        )}
      </form>
    </div>
  );
}
```

---

## Tool Invocations → React Components

The killer pattern: AI calls tools, each tool invocation maps to a React component.

```tsx
// components/tool-result.tsx
function ToolResult({ invocation }: { invocation: ToolInvocation }) {
  // Tool is still being called — show loading state
  if (invocation.state === 'call') {
    return <ToolLoading name={invocation.toolName} />;
  }

  // Tool returned a result — render the appropriate component
  if (invocation.state === 'result') {
    switch (invocation.toolName) {

From Leo-Atienza/atlas-claude, MIT.

More from Leo-Atienza/atlas-claude