open-index/open-npm huggingface dataset:
npm package: @surf-kit/agent
Description: AI agent interface components — chat, streaming, confidence, source attribution
Latest version: 0.4.1

# @surf-kit/agent

> AI agent interface components — the building blocks no other design system has

Part of the [surf-kit](https://github.com/barney-w/surf-kit) design system.

## Install

```bash
npm install @surf-kit/agent @surf-kit/core @surf-kit/theme @surf-kit/tokens
```

## Quick Example

```tsx
import { ThemeProvider } from '@surf-kit/theme';
import { AgentChat } from '@surf-kit/agent';
import '@surf-kit/tokens/css';

function App() {
  return (
    <ThemeProvider>
      <AgentChat
        agentName="Assistant"
        messages={messages}
        onSend={handleSend}
      />
    </ThemeProvider>
  );
}
```

## What's Included

**Chat** — AgentChat, MessageThread, MessageBubble, MessageComposer, WelcomeScreen, ConversationList

**Streaming** — StreamingMessage, ThinkingIndicator, ToolExecution, RetrievalProgress, VerificationProgress, TypewriterText, TypingIndicator, TextGlimmer, StreamingList, StreamingStructure

**Trust & Confidence** — ConfidenceBadge, ConfidenceMeter, ConfidenceBreakdown, VerificationBadge, VerificationDetail

**Sources** — SourceCard, SourceList, SourceInline, SourceDrawer, SourceBadge

**Agent Identity** — AgentAvatar, AgentLabel, AgentHandoff, RoutingIndicator

**Feedback** — ThumbsFeedback, FeedbackDialog, FeedbackConfirmation

**Response** — AgentResponse, ResponseMessage, StructuredResponse, FollowUpChips, ErrorResponse

**Layouts** — AgentFullPage, AgentPanel, AgentWidget, AgentEmbed

**MCP** — MCPToolCall, MCPResourceView, MCPServerStatus, MCPApprovalDialog

**Hooks** (via `@surf-kit/agent/hooks`) — useAgentChat, useStreaming, useConversation, useFeedback, useAgentTheme, useCharacterDrain

## Subpath Exports

Import only what you need for smaller bundles:

```tsx
import { MessageThread } from '@surf-kit/agent/chat'
import { StreamingMessage } from '@surf-kit/agent/streaming'
import { MCPToolCall } from '@surf-kit/agent/mcp'
import { ConfidenceBadge } from '@surf-kit/agent/confidence'
import { SourceCard } from '@surf-kit/agent/sources'
import { AgentAvatar } from '@surf-kit/agent/agent-identity'
import { FollowUpChips } from '@surf-kit/agent/response'
import { AgentFullPage } from '@surf-kit/agent/layouts'
import { ThumbsFeedback } from '@surf-kit/agent/feedback'
```

## Docs

- [Storybook](https://barney-w.github.io/surf-kit/storybook)
- [Contributing](https://github.com/barney-w/surf-kit/blob/main/CONTRIBUTING.md)

## License

[Apache-2.0](./LICENSE)
npm package: @surf-kit/ai
Description: Adapter bridging surf-kit agent components with Vercel AI SDK v6
Latest version: 0.1.6

# @surf-kit/ai

Adapter package bridging [surf-kit](https://github.com/barney-w/surf-kit) agent components with [Vercel AI SDK v6](https://sdk.vercel.ai/).

## Installation

```bash
pnpm add @surf-kit/ai ai @ai-sdk/react
```

## Usage

### useAIChat

Wraps `useChat` from `@ai-sdk/react` and maps to surf-kit types (`ChatMessage`, `StreamState`).

```tsx
import { useAIChat } from '@surf-kit/ai'

function Chat() {
  const { messages, streamState, sendMessage, input, setInput, handleSubmit } =
    useAIChat({ api: '/api/chat' })

  return (
    <form onSubmit={handleSubmit}>
      <input value={input} onChange={(e) => setInput(e.target.value)} />
      <button type="submit">Send</button>
    </form>
  )
}
```

### useAIStream

Wraps `useCompletion` from `@ai-sdk/react` for simple text streaming without chat history.

```tsx
import { useAIStream } from '@surf-kit/ai'

function Completion() {
  const { streamState, complete } = useAIStream({ api: '/api/complete' })
  // ...
}
```

### AIChat

Drop-in chat component powered by surf-kit agent UI and the AI SDK.

```tsx
import { AIChat } from '@surf-kit/ai'

function App() {
  return <AIChat api="/api/chat" title="Assistant" />
}
```

## When to Use This vs `@surf-kit/agent`

| | `@surf-kit/agent` | `@surf-kit/ai` |
|---|---|---|
| **Backend** | Custom SSE with surf-kit's bespoke protocol | Vercel AI SDK v6 (`/api/chat`) |
| **Entry point** | `<AgentChat>` | `<AIChat>` |
| **UI components** | surf-kit agent UI | Same surf-kit agent UI |
| **Best for** | Full control over streaming protocol | Standard AI SDK backends (OpenAI, Anthropic, etc.) |

Both packages render the same surf-kit UI components — the difference is how they connect to your backend.

## License

[Apache-2.0](./LICENSE)
npm package: @surf-kit/core
Description: Accessible React UI primitives — Button, Input, Card, Table, Dialog, and more
Latest version: 0.2.2

# @surf-kit/core

> Accessible React UI primitives for the surf-kit design system

Part of the [surf-kit](https://github.com/barney-w/surf-kit) design system.

## Install

```bash
npm install @surf-kit/core @surf-kit/theme @surf-kit/tokens
```

## Quick Example

```tsx
import { Button, Card, Badge } from '@surf-kit/core';

function App() {
  return (
    <Card>
      <Badge intent="info">New</Badge>
      <h2>Hello surf-kit</h2>
      <Button onPress={() => alert('Pressed!')}>Get Started</Button>
    </Card>
  );
}
```

## What's Included

**Primitives** — Box, Text, Stack, Grid, Separator, VisuallyHidden

**Inputs** — Button, IconButton, TextInput, TextArea, Select, Checkbox, RadioGroup, Switch, SearchInput

**Feedback** — Badge, Spinner, Skeleton, Alert, Toast, ProgressBar, AvatarGenerationLoader

**Overlays** — Dialog, Popover, Tooltip, Sheet, DropdownMenu

**Navigation** — Tabs, Breadcrumb, Sidebar

**Data** — Table, DataList, Card, Accordion

All interactive components use [React Aria](https://react-spectrum.adobe.com/react-aria/) for WCAG 2.1 AA accessibility out of the box.

## Docs

- [Storybook](https://barney-w.github.io/surf-kit/storybook)
- [Contributing](https://github.com/barney-w/surf-kit/blob/main/CONTRIBUTING.md)

## License

[Apache-2.0](./LICENSE)
npm package: @surf-kit/hooks
Description: Shared React hooks for surf-kit — clipboard, keyboard shortcuts, media queries, and more
Latest version: 0.1.2

# @surf-kit/hooks

> Shared React hooks for surf-kit — clipboard, keyboard shortcuts, media queries, and more

Part of the [surf-kit](https://github.com/barney-w/surf-kit) design system.

## Install

```bash
npm install @surf-kit/hooks
```

## Quick Example

```tsx
import { useClipboard } from '@surf-kit/hooks';

function CopyButton({ text }: { text: string }) {
  const { copy, copied } = useClipboard();
  return (
    <button onClick={() => copy(text)}>
      {copied ? 'Copied!' : 'Copy'}
    </button>
  );
}
```

## What's Included

| Hook | Description |
|------|-------------|
| `useClipboard` | Copy text to clipboard with copied state |
| `useMediaQuery` | Subscribe to CSS media query matches |
| `useReducedMotion` | Detect `prefers-reduced-motion` preference |
| `useLocalStorage` | Persistent state backed by localStorage |
| `useKeyboardShortcut` | Register global keyboard shortcuts |
| `useFocusTrap` | Trap focus within a container element |
| `useAnnounce` | Announce messages to screen readers via live regions |

## Docs

- [Storybook](https://barney-w.github.io/surf-kit/storybook)
- [Contributing](https://github.com/barney-w/surf-kit/blob/main/CONTRIBUTING.md)

## License

[Apache-2.0](./LICENSE)