Add the logger (#213)

This was a painful oversight that made observability impossible for
`toTextStream`.

packages/ai-jsx/package.json

@@ -4,7 +4,7 @@
   "repository": "fixie-ai/ai-jsx",
   "bugs": "https://github.com/fixie-ai/ai-jsx/issues",
   "homepage": "https://ai-jsx.com",
-  "version": "0.5.15",
+  "version": "0.5.16",
   "volta": {
     "extends": "../../package.json"
   },

packages/ai-jsx/src/stream/index.ts

@@ -1,3 +1,4 @@
+import { LogImplementation } from '../core/log.js';
 import {
   isElement as isAIElement,
   Element,
@@ -178,9 +179,9 @@ export function toSerializedStreamResponse(
  * this allows the response to be easily consumed by other frameworks (such as https://sdk.vercel.ai/)
  * but does not support UI components or concurrently streaming multiple parts of the tree.
  */
-export function toTextStream(renderable: Renderable): ReadableStream<Uint8Array> {
+export function toTextStream(renderable: Renderable, logger?: LogImplementation): ReadableStream<Uint8Array> {
   let previousValue = '';
-  const generator = createRenderContext().render(renderable, { appendOnly: true })[Symbol.asyncIterator]();
+  const generator = createRenderContext({ logger }).render(renderable, { appendOnly: true })[Symbol.asyncIterator]();
   return new ReadableStream({
     async pull(controller) {
       const next = await generator.next();

packages/docs/docs/changelog.md

@@ -1,6 +1,10 @@
 # Changelog
 
-## 0.5.15
+## 0.5.16
+
+- Update `toTextStream` to accept a `logger`, so you can now see log output when you're running AI.JSX on the server and outputting to a stream. See [AI + UI](./guides/ai-ui.md) and [Observability](./guides/observability.md).
+
+## [0.5.15](https://github.com/fixie-ai/ai-jsx/commit/68adddd)
 
 - Add [`MdxChatCompletion`](./guides/mdx.md), so your model calls can now output [MDX](https://mdxjs.com/) using your components.
 

packages/examples/src/fastify.tsx

@@ -4,6 +4,8 @@ import * as AI from 'ai-jsx';
 import Fastify from 'fastify';
 import { toTextStream } from 'ai-jsx/stream';
 import { ReadableStream } from 'stream/web';
+import { pino } from 'pino';
+import { PinoLogger } from 'ai-jsx/core/log';
 
 /**
  * To run this demo:
@@ -20,6 +22,17 @@ const fastify = Fastify({
   logger: true,
 });
 
+const pinoStdoutLogger = pino({
+  name: 'ai-jsx',
+  level: process.env.loglevel ?? 'trace',
+  transport: {
+    target: 'pino-pretty',
+    options: {
+      colorize: true,
+    },
+  },
+});
+
 function FantasyCharacter() {
   return (
     <JsonChatCompletion>
@@ -44,7 +57,7 @@ fastify.get('/stream-sample', async (request, reply) => {
       </ChatCompletion>
     );
   }
-  const responseStream = toTextStream(<DescribeCharacter />);
+  const responseStream = toTextStream(<DescribeCharacter />, new PinoLogger(pinoStdoutLogger));
   await sendReadableStreamToFastifyReply(reply, responseStream);
 });