> For the complete documentation index, see [llms.txt](https://docs.frayme.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.frayme.ai/examples/ai-news-brief.md).

# AI news brief

A whole morning briefing from one sentence — breaking-news ticker, a scrubbable chaptered audio waveform, and three tab-filtered story feeds.

## The ask

> Brief me on today's AI news.

The agent gathers six lead stories across research, products, and policy and composes the brief — with the 4-minute audio version sitting at the top.

## What comes back

| Piece           | Component           | Behavior                                      |
| --------------- | ------------------- | --------------------------------------------- |
| Breaking ticker | `Marquee`           | Auto-scrolling headlines, pauses on hover     |
| Audio brief     | `MediaScrubber`     | A waveform you can scrub, with four chapters  |
| Story feeds     | `Tabs` + `FeedItem` | Research / Products / Policy, tab-filtered    |
| Sources         | `Sources`           | The 6 of 14 consulted sources, as a grid      |
| Video           | `YouTube`           | An embedded segment                           |
| Save brief      | `Button`            | A fully local optimistic flip — no round-trip |

## The interesting mechanic: everything here is local

This is the gallery's pure local-interactivity showcase — there is no agent action in the whole screen. The scrubber binds its playhead into state and carries its chapters in the spec:

```json
{"op":"add","path":"/elements/scrubber","value":{"type":"MediaScrubber","props":{
  "duration":252,"currentTime":38,"variant":"waveform",
  "value":{"$bindState":"/playhead"},
  "waveform":[0.18,0.42,0.66,0.51,0.83,0.37,0.72],
  "chapters":[
    {"id":"c0","time":0,"label":"Top stories"},
    {"id":"c1","time":52,"label":"Research"},
    {"id":"c2","time":128,"label":"Products"},
    {"id":"c3","time":198,"label":"Policy"}
  ],
  "showTime":true,"accent":"#dc2626"}}}
```

*(excerpt — waveform trimmed)*

The tab filter is the same pattern: `Tabs` binds `value` to `/activeTab`, and each feed section declares `visible` against that state path — switching tabs swaps feeds without touching the network.

The *Save brief* button shows conditional bindings doing optimistic UI on their own:

```json
{"op":"add","path":"/elements/hdr-save","value":{"type":"Button","props":{
  "label":{"$cond":{"$state":"/saved","eq":true},"$then":"Saved ✓","$else":"Save brief"},
  "variant":"secondary",
  "disabled":{"$state":"/saved","eq":true}},
  "on":{"commit":[{"action":"setState","params":{"statePath":"/saved","value":true}}]}}}
```

One press writes `/saved`, the label and disabled state react through `$cond` — all inside the renderer.

## Compose it yourself

```ts
import Frayme from '@frayme/api';

const frayme = new Frayme({ apiKey: process.env.FRAYME_API_KEY });

const stream = frayme.compose.stream({
  prompt: "Brief me on today's AI news.",
  ui_type: 'dashboard',
  data: { stories: [/* headline, outlet, url, summary — rendered verbatim */] },
});
```

## Try it

Open [frayme.ai/examples](https://frayme.ai/examples) and select **AI briefing — 31 Jul 2026**. Scrub the waveform between chapters, flip the story tabs, and save the brief.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.frayme.ai/examples/ai-news-brief.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.