Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions docs/content/docs/openui-lang/examples/harnesses/pi.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ title: pi Agent Harness
description: Chat with the pi coding agent (a real read/bash/edit/write agent) and get its answers as live generative UI, bridged through the pi SDK over an OpenAI-compatible stream.
---

Anything that can stream text can drive OpenUI's renderer, including a full **coding agent**. This example connects [pi](https://www.npmjs.com/package/@earendil-works/pi-coding-agent) (`@earendil-works/pi-coding-agent`), running its default `read` / `bash` / `edit` / `write` tools, to `<AgentInterface>`. Pi calls **OpenUI Cloud** Completions; `generateSystemPrompt()` is appended so it emits [OpenUI Lang](/docs/openui-lang/overview) for Cloud `chatLibrary` instead of markdown.
Anything that can stream text can drive OpenUI's renderer, including a full **coding agent**. This example connects [pi](https://www.npmjs.com/package/@earendil-works/pi-coding-agent) (`@earendil-works/pi-coding-agent`), running its default `read` / `bash` / `edit` / `write` tools, to `<AgentInterface>`. Pi calls **OpenUI Cloud** Completions; `generateSystemPrompt({ cloud: true })` is appended so it emits [OpenUI Lang](/docs/openui-lang/overview) for `openuiLibrary` instead of markdown.

Its mid-turn activity (reasoning and tool runs) surfaces as cards too.

Expand All @@ -26,9 +26,9 @@ Its mid-turn activity (reasoning and tool runs) surfaces as cards too.

| Piece | File | Role |
| --- | --- | --- |
| Frontend | `src/app/page.tsx` | A single `<AgentInterface>` wired with `fetchLLM({ streamAdapter: openAIReadableStreamAdapter(), messageFormat: openAIMessageFormat })` and Cloud `chatLibrary`. |
| Frontend | `src/app/page.tsx` | A single `<AgentInterface>` wired with `fetchLLM({ streamAdapter: openAIReadableStreamAdapter(), messageFormat: openAIMessageFormat })` and `openuiLibrary`. |
| Bridge route | `src/app/api/chat/route.ts` | Drives a pi `AgentSession` against OpenUI Cloud Completions and re-emits its events as NDJSON OpenAI chunks (`delta.content` is OpenUI Lang). |
| Session registry | `src/lib/pi-session.ts` | One persistent `AgentSession` per chat thread, keyed by `threadId`. Injects `generateSystemPrompt()` and the Cloud model. |
| Session registry | `src/lib/pi-session.ts` | One persistent `AgentSession` per chat thread, keyed by `threadId`. Injects `generateSystemPrompt({ cloud: true })` and the Cloud model. |
| Agent | `@earendil-works/pi-coding-agent` | The pi coding agent: `read` / `bash` / `edit` / `write` on the workspace you choose at launch. |

Everything runs in **one Next.js process**: the App-Router route _is_ the backend. The pi SDK is embedded directly (no separate server), so there is no second service and no CORS. Each chat thread maps to one persistent pi `AgentSession`, so multi-turn context is preserved.
Expand All @@ -44,7 +44,7 @@ import {
openAIMessageFormat,
openAIReadableStreamAdapter,
} from "@openuidev/react-ui";
import { chatLibrary } from "@openuidev/thesys";
import { openuiLibrary } from "@openuidev/react-ui/genui-lib";

const llm = fetchLLM({
url: "/api/chat",
Expand All @@ -54,12 +54,12 @@ const llm = fetchLLM({

<AgentInterface
llm={llm}
componentLibrary={chatLibrary}
componentLibrary={openuiLibrary}
agentName="OpenUI Agent Harness"
/>;
```

`generateSystemPrompt()` from `@openuidev/thesys-server` is the **same** Cloud chat-library sentinel Pi sends on Completions, so the model's markup matches `chatLibrary`.
`generateSystemPrompt({ cloud: true })` from `@openuidev/lang-core` is the **same** Cloud library sentinel Pi sends on Completions, so the model's markup matches `openuiLibrary`.

## The bridge route

Expand Down
11 changes: 5 additions & 6 deletions examples/agent-frameworks/google-adk/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,16 +13,14 @@ An [OpenUI](https://openui.com) example showing how to wire a
supplies a `BaseLlm`
- Bridging ADK's `runAsync` event stream into AG-UI SSE (`TEXT_MESSAGE_*`,
`TOOL_CALL_START`/`ARGS`/`END`/`RESULT`) so OpenUI's `agUIAdapter()` can parse them
- Rendering streamed OpenUI Lang with `<AgentInterface />` and Cloud's
`chatLibrary`
- Rendering streamed OpenUI Lang with `<AgentInterface />` and `openuiLibrary`

## Getting started

1. Create a `.env.local` file with your OpenUI Cloud key
(https://console.thesys.dev/keys):
1. Mint an OpenUI Cloud key into `.env.local`:

```bash
echo "THESYS_API_KEY=sk-th-your-key-here" > .env.local
pnpm generate:apiKey
```

2. Install dependencies from this example directory:
Expand All @@ -43,7 +41,8 @@ Open [http://localhost:3000](http://localhost:3000) and try a starter such as
## How it works

- `src/agent.ts` defines the `get_weather` tool and a `createAgent()` builder.
The instruction is Cloud's `generateSystemPrompt()`. The model is Cloud's
The instruction is `cloudInstructions()`, which reads the generated
`openuiLibrary` spec. The model is Cloud's
Gemini (`google/gemini-3.6-flash-free`).
- `src/app/api/chat/route.ts` runs the agent with a `Runner` and keys ADK
sessions by chat `threadId` (so multi-turn history is preserved).
Expand Down
Loading
Loading