PHPackages                             solution-forest/ai-kit-ui-livewire - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. solution-forest/ai-kit-ui-livewire

ActiveLibrary

solution-forest/ai-kit-ui-livewire
==================================

Livewire 4 chat UI for ai-kit: streaming RAG responses, markdown rendering, and source citations. No build step required.

v0.2.0(yesterday)017↑2900%MITPHP ^8.3

Since Jul 22Compare

[ Source](https://github.com/solutionforest/ai-kit-ui-livewire)[ Packagist](https://packagist.org/packages/solution-forest/ai-kit-ui-livewire)[ RSS](/packages/solution-forest-ai-kit-ui-livewire/feed)WikiDiscussions Synced today

READMEChangelog (1)Dependencies (6)Versions (2)Used By (0)

ai-kit-ui-livewire
==================

[](#ai-kit-ui-livewire)

[![PHP](https://camo.githubusercontent.com/9b10bfbe61ed78776363b7b6ed761bcd0111f4fa4e005df8d830fcd94951469a/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f5048502d382e332b2d3737374242343f6c6f676f3d706870266c6f676f436f6c6f723d7768697465)](https://camo.githubusercontent.com/9b10bfbe61ed78776363b7b6ed761bcd0111f4fa4e005df8d830fcd94951469a/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f5048502d382e332b2d3737374242343f6c6f676f3d706870266c6f676f436f6c6f723d7768697465)[![Laravel](https://camo.githubusercontent.com/ef749269b4e188533479a48e8d4c00604c54f02116015dee66908c8d8e80cf43/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c61726176656c2d313225323025374325323031332d4646324432303f6c6f676f3d6c61726176656c266c6f676f436f6c6f723d7768697465)](https://camo.githubusercontent.com/ef749269b4e188533479a48e8d4c00604c54f02116015dee66908c8d8e80cf43/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c61726176656c2d313225323025374325323031332d4646324432303f6c6f676f3d6c61726176656c266c6f676f436f6c6f723d7768697465)[![Livewire](https://camo.githubusercontent.com/5513bec6793441dab166e52f8cc0c9961c6c39862ebefa2c5e290203f2c63d64/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c697665776972652d342d4642373041393f6c6f676f3d6c69766577697265266c6f676f436f6c6f723d7768697465)](https://camo.githubusercontent.com/5513bec6793441dab166e52f8cc0c9961c6c39862ebefa2c5e290203f2c63d64/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c697665776972652d342d4642373041393f6c6f676f3d6c69766577697265266c6f676f436f6c6f723d7768697465)[![License](https://camo.githubusercontent.com/f8df3091bbe1149f398a5369b2c39e896766f9f6efba3477c63e9b4aa940ef14/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d4d49542d677265656e)](https://camo.githubusercontent.com/f8df3091bbe1149f398a5369b2c39e896766f9f6efba3477c63e9b4aa940ef14/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d4d49542d677265656e)

**The Livewire chat UI for the ai-kit suite** — a drop-in `` component with streaming RAG answers, markdown, source citations, and conversation history. **No build step required.**

 [![ai-kit chat with citations and history](art/chat.png)](art/chat.png)

Why this package?
-----------------

[](#why-this-package)

You have a knowledge base indexed with [ai-kit-core](https://github.com/solutionforest/ai-kit-core)and want to let users chat with it — with streaming answers and clickable source citations — without building a chat UI from scratch or setting up a JS build pipeline. Drop in one Livewire tag and you're done. It talks to core's `ChatService`, so the answers match your CLI, API, and MCP surfaces exactly.

Requirements
------------

[](#requirements)

- PHP **8.3+**, Laravel **12 or 13**
- **Livewire 4**

> **Depends on [`solution-forest/ai-kit-core`](https://github.com/solutionforest/ai-kit-core)** — the RAG engine (ingestion, retrieval, agents). It is a hard dependency and is installed automatically with this package; you configure your knowledge bases and AI provider there. This package is only the chat UI.

Install
-------

[](#install)

```
composer require solution-forest/ai-kit-ui-livewire
```

Auto-discovered. Views are publishable if you want to customise them:

```
php artisan vendor:publish --tag=ai-kit-ui-views
```

Usage
-----

[](#usage)

Drop it into any Blade view:

```

```

### Props

[](#props)

PropTypeDefaultDescription`collection``string`config defaultKnowledge-base slug to search`agent``string` (class)config agentAgent class override (must extend `RagAgent`)`placeholder``string`"Ask a question…"Input placeholder`history``bool``config('ai-kit.ui.history')` (`false`)Show the conversation-history sidebar (needs an authenticated user)`citations``bool``config('ai-kit.ui.citations')` (`true`)Show source citation chips + popups (set `false` to hide, and skip retrieval for them)`streaming``bool``config('ai-kit.chat.streaming')` (`true`)Stream the answer token-by-token over SSE (else non-streamed)Every boolean prop falls back to its config default when omitted, so you can set an app-wide default in `config/ai-kit.php` and override per instance:

```

```

```

```

Features
--------

[](#features)

- **Streaming** — token-by-token over SSE (route `ai-kit.stream`), controlled by `config('ai-kit.chat.streaming')`, with a non-streamed fallback that runs entirely inside Livewire.
- **Citations** — every answer shows source chips (document title · chunk · relevance %). Click a chip to expand the **source passage** inline with a relevance meter.
- **History** — with `:history="true"` and a signed-in user, a sidebar lists past conversations; click to reload, or start a **New chat**. Scoped to the current user.
- **Empty state** — when the collection is missing or has no embedded content, the component prompts you to create a knowledge base first.
- **Markdown** — assistant responses render GitHub-flavored markdown (HTML escaped).

 [![Citation popup showing the source passage](art/citation-popup.png)](art/citation-popup.png)

Standalone (non-Filament) page
------------------------------

[](#standalone-non-filament-page)

The component needs Livewire assets + a CSRF meta tag. Minimal host page:

```

    @livewireStyles

    @livewireScripts

```

> Conversation **history + token logging require an authenticated user** (the conversation participant). On a public page without auth, chat still works but nothing is persisted.

Theming
-------

[](#theming)

The component ships compiled, scoped CSS using CSS variables — override them in your own stylesheet:

```
.ck-root {
    --ck-accent: #16a34a;      /* buttons, links, active states */
    --ck-user: #16a34a;        /* user bubble */
    --ck-radius: 12px;
    /* --ck-bg, --ck-fg, --ck-muted, --ck-border, --ck-assistant, --ck-user-fg */
}
```

Dark mode is handled automatically via `prefers-color-scheme`.

How streaming works
-------------------

[](#how-streaming-works)

On send, the component dispatches a browser event; JS opens an `EventSource` to `ai-kit.stream` (`StreamController`), which streams the answer and emits `delta` frames, then a `done` frame carrying the final text + conversation id. The route middleware is configurable via `config('ai-kit.ui.stream_middleware')` (default `['web']`).

Architecture
------------

[](#architecture)

The component is a thin view over the core `ChatService`. Both the non-streamed path and the SSE `StreamController` delegate to `SolutionForest\AiKit\Services\ChatService`, so RAG mode (tool/inject), conversation persistence, citations, and token usage are handled once in core and shared with the CLI, HTTP API, and MCP server.

The ai-kit suite
----------------

[](#the-ai-kit-suite)

PackagePurpose[solution-forest/ai-kit-core](https://github.com/solutionforest/ai-kit-core)Ingestion, retrieval, agents + CLI, HTTP API, MCP**solution-forest/ai-kit-ui-livewire** (this)Livewire 4 chat component[solution-forest/ai-kit-filament](https://github.com/solutionforest/ai-kit-filament)Filament v5 admin panelPrefer a headless UI? The same chat is available as an HTTP API or MCP server in `ai-kit-core` — no Livewire required.

Continuous integration
----------------------

[](#continuous-integration)

`.github/workflows/tests.yml` runs the suite on a GitHub **release** (and manual dispatch) — not on every push. Because this package has a local path dependency on `ai-kit-core`, CI clones that (public) sibling repo first. Once `ai-kit-core`is on Packagist, drop the clone step and let Composer resolve it.

License
-------

[](#license)

MIT © [SolutionForest](https://www.solutionforest.com)

###  Health Score

39

—

LowBetter than 84% of packages

Maintenance100

Actively maintained with recent releases

Popularity8

Limited adoption so far

Community2

Small or concentrated contributor base

Maturity38

Early-stage or recently created project

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Unknown

Total

1

Last Release

1d ago

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/68211796?v=4)[Solution Forest](/maintainers/solutionforest)[@solutionforest](https://github.com/solutionforest)

---

Tags

laravelailivewirechatrag

###  Code Quality

TestsPest

### Embed Badge

![Health badge](/badges/solution-forest-ai-kit-ui-livewire/health.svg)

```
[![Health](https://phpackages.com/badges/solution-forest-ai-kit-ui-livewire/health.svg)](https://phpackages.com/packages/solution-forest-ai-kit-ui-livewire)
```

###  Alternatives

[livewire/flux

The official UI component library for Livewire.

9527.8M138](/packages/livewire-flux)[tallstackui/tallstackui

TallStackUI is a powerful suite of Blade components that elevate your workflow of Livewire applications.

726176.2k14](/packages/tallstackui-tallstackui)[tomshaw/electricgrid

A feature-rich Livewire package designed for projects that require dynamic, interactive data tables.

119.4k](/packages/tomshaw-electricgrid)[mati365/ckeditor5-livewire

CKEditor 5 integration for Laravel Livewire

447.9k](/packages/mati365-ckeditor5-livewire)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)