# syncfusion-react-ai-assistview

Teaches coding agents how to set up the Syncfusion AI AssistView interface in React. Useful when adding conversational LLM views with streaming and file uploads.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 712 installs · ★ 3
- Author: Syncfusion Inc
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/syncfusion/react-ui-components-skills/tree/HEAD/skills/syncfusion-react-ai-assistview/SKILL.md
- Updated: 2026-10-23
- HTML: https://affpapa.org/en/nevibecode/skills/syncfusion-react-ai-assistview

## What it does

The skill provides guidance on implementing the AI AssistView component from the `@syncfusion/ej2-react-interactive-chat` library. It covers conversation tracking, character-by-character live streaming, and rendering thought processes in designated blocks. Markdown rendering is supported directly out of the box.

It also handles audio input, speech output, file attachments, and trigger-based mentions with `@` or `/`. You can toggle multiple views, adjust four distinct toolbars, and record telemetry metrics like tokens or model names on each response.

Without importing Syncfusion CSS theme files, the component will render unstyled. Connection to OpenAI or Azure OpenAI relies on event handlers such as `promptRequest` to process queries.

## Requirements
- Works with: Azure

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-ai-assistview -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/syncfusion-react-ai-assistview/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/syncfusion-react-ai-assistview/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-ai-assistview -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/syncfusion-react-ai-assistview/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-ai-assistview -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/syncfusion-react-ai-assistview/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install syncfusion/react-ui-components-skills syncfusion-react-ai-assistview
```

2. **Manually: put the files in place**
- File: `.github/skills/syncfusion-react-ai-assistview/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-ai-assistview -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/syncfusion/react-ui-components-skills --path skills/syncfusion-react-ai-assistview
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/syncfusion-react-ai-assistview/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-ai-assistview -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/syncfusion/react-ui-components-skills/tree/HEAD/skills/syncfusion-react-ai-assistview/SKILL.md

## When to use it
- embed an AI chat interface into a React application
- display multi-stage model reasoning through thinking blocks
- enable file uploads with file size and type validation
- track token consumption and request duration in response toolbars

## Example prompts
- Implement AI AssistView with live streaming connected to Azure OpenAI
- Add attachment handling to the prompt bar with custom file limits
- Configure response toolbars to show token telemetry and a regenerate button

## Similar
- [frontend-design](https://affpapa.org/en/nevibecode/skills/frontend-design.md) — skill · 1025790 installs
- [design-taste-frontend](https://affpapa.org/en/nevibecode/skills/design-taste-frontend.md) — skill · 678700 installs
- [prototype](https://affpapa.org/en/nevibecode/skills/prototype.md) — skill · 986201 installs
- [hyperframes](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes.md) — skill · 1200000 installs
- [hyperframes-cli](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes-cli.md) — skill · 1300000 installs
- [webapp-testing](https://affpapa.org/en/nevibecode/skills/webapp-testing.md) — skill · 186758 installs

From the same set: [syncfusion/react-ui-components-skills](https://affpapa.org/en/nevibecode/by/syncfusion/react-ui-components-skills.md) — 57 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md