# syncfusion-react-inline-ai-assist

This skill guides React implementations of Syncfusion Inline AI Assist with AI suggestions, commands, response handling, and service integrations.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 700 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-inline-ai-assist/SKILL.md
- Updated: 2026-10-23
- HTML: https://affpapa.org/en/nevibecode/skills/syncfusion-react-inline-ai-assist

## What it does

This skill guides an agent through building `InlineAIAssistComponent` with `@syncfusion/ej2-react-interactive-chat`. It covers prompt suggestions, progressive output, predefined commands, response actions, editor and response templates, and inline or popup presentation.

The material also covers lifecycle events, public methods, prompt history, themes, localization, and right-to-left layouts. Integration sections address OpenAI, Google Gemini, Lite-LLM, and Ollama, including the `enableStreaming` option. Voice input relies on the browser Web Speech API through `speechToTextSettings`, so that API affects whether speech controls work.

The skill is aimed at React projects and includes patterns for `promptRequest`, `addResponse()`, and `executePrompt()`. Connecting an external AI provider requires that provider’s credentials.

## Install

### Claude Code (native platform)

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

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

### Codex

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

2. **Manually: put the files in place**
- File: `.agents/skills/syncfusion-react-inline-ai-assist/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-inline-ai-assist -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/syncfusion-react-inline-ai-assist/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-inline-ai-assist
```

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

### Gemini CLI

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

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

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/syncfusion-react-inline-ai-assist/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-inline-ai-assist -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-inline-ai-assist/SKILL.md

## When to use it
- add AI suggestions to a React interface
- connect OpenAI, Gemini, Lite-LLM, or Ollama
- configure prompt commands and response actions
- turn on streamed output and speech input

## Example prompts
- Add `InlineAIAssistComponent` from `@syncfusion/ej2-react-interactive-chat` to the React app and wire its `promptRequest` handler.
- Configure `speechToTextSettings` with interim transcript updates for voice prompts.
- Connect Ollama and enable `enableStreaming` for generated responses.

## Similar
- [emblem-ai-react](https://affpapa.org/en/nevibecode/skills/emblem-ai-react.md) — skill · 8800 installs
- [vercel-react-view-transitions](https://affpapa.org/en/nevibecode/skills/vercel-react-view-transitions.md) — skill · 168100 installs
- [gsap-react](https://affpapa.org/en/nevibecode/skills/gsap-react.md) — skill · 66900 installs
- [stitch::react-components](https://affpapa.org/en/nevibecode/skills/stitchreact-components.md) — skill · 50400 installs
- [clerk-react-patterns](https://affpapa.org/en/nevibecode/skills/clerk-react-patterns.md) — skill · 19700 installs
- [react-doctor](https://affpapa.org/en/nevibecode/skills/react-doctor.md) — skill · 19200 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