AI.JSX brings React-style component composition to LLM applications, with asynchronous streaming and parallel execution.
2
AI.JSX combines prompts, retrieval, tools, APIs, generated UI, and React integration in TypeScript code.
3
Fixie hosts and manages AI.JSX applications with managed retrieval, conversation state, model access, and realtime voice interaction.
Summary
Matt Welsh introduces AI.JSX, an open-source TypeScript and JSX framework for building reactive applications powered by large language models. He presents it as React-style composition for LLMs: components form a tree, run asynchronously and in parallel, and stream results through one another rather than rendering to the browser DOM. The examples cover prompt composition, child components, output constraints, GitHub API tools, retrieval-augmented generation, and embedding an application into a React interface. Welsh argues that TypeScript makes this work more accessible to front-end and full-stack developers, who have been less well served by existing AI tooling. He then describes the Fixie platform for hosting AI.JSX applications, with managed document ingestion, embeddings, vector storage, conversational state, and model connections. The talk ends with a recorded realtime voice demo for a fictional donut restaurant, showing an agent taking an order and answering a question before returning to the transaction.
AI.JSX targets developers who want to build AI experiences in TypeScript
Welsh says front-end and full-stack developers do not yet have good tools for building AI applications, while Python developers have received most of the attention. AI.JSX is built in TypeScript so this group can work with familiar JavaScript tooling and integrate AI features into React applications. He also points out that there are more JavaScript developers than Python developers. The goal is to make AI application development available to people building the user experience, rather than requiring every developer to work through a separate Python backend.
AI.JSX uses JSX components to compose prompts and LLM calls
The simplest example defines a chat completion component and gives it a user prompt asking for a Shakespearean sonnet about large language models. Welsh then defines a custom component called MakeSetting. It asks the model for a one-paragraph setting description and places its children inside the prompt. Those children can be text or the output of another JSX tree. Calling the component only requires instantiating it with the desired prompt. The syntax resembles React, but the components are used to assemble model interactions.
The component tree runs asynchronously, in parallel, and as a stream
Welsh says AI.JSX defines a tree of nodes that renders as a stream, asynchronously and in parallel. In his story example, separate components define the character, setting, and plot. All three run at the same time, creating three concurrent LLM calls whose tokens stream back to the parent MakeStory component. That parent then streams its own output to the render result. This structure gives developers a way to compose several model calls while receiving partial results as they are produced.
Wrapper components can constrain another component's output
A KidsSafe component demonstrates how one JSX component can wrap another and modify its behavior. The wrapper supplies a system message telling the model to rewrite the following text so it is safe for children. The wrapped component's output becomes the user message content. Any component placed inside KidsSafe is therefore processed through that instruction. Welsh uses this example to show that composition can express behavior constraints without rewriting the component being constrained.
AI.JSX connects model calls to tools and external APIs
Welsh defines a record of tools that the LLM can access, including a tool backed by GitHub's GraphQL API. The tool has an English description and a JavaScript function that calls the API with fetch. A UseTools component receives the tool set, allowing components in the application to invoke those tools during rendering. This lets an AI.JSX application combine natural-language model behavior with calls to external services, without hiding the API integration in a separate application layer.
Retrieval-augmented generation is expressed as ordinary component composition
The retrieval example places a DocsQA component inside a chat completion. The system message tells the model to use supplied information when answering the user's query. DocsQA receives a corpus that has been crawled, indexed, and stored in a vector database. It runs the query, returns relevant document chunks, and inserts them into the system message. The user message contains the query again. Welsh says this is easier to understand and integrate than coordinating many separate libraries.
AI.JSX applications can be embedded directly in React interfaces
Once an application is built, Welsh says it can be placed into a website, web app, or mobile app as a React component. His example uses a Floating Fixie Embed component. Instantiating it provides a rendered interface with a chat window, session management, Markdown rendering, and custom UI. This gives the application a usable front end without requiring the developer to build those interface pieces separately.
Fixie provides managed infrastructure for AI.JSX applications
The Fixie platform hosts, runs, and manages AI.JSX applications. Its managed retrieval pipeline handles document ingestion, chunking, embedding, vector database storage, and document storage. Fixie also manages conversational state between the end user and the agent, provides interfaces to popular LLMs, and supports both no-code applications in its web interface and custom AI.JSX applications. Welsh says developers can use AI.JSX without Fixie because the framework is open source.
Realtime voice agents can combine conversation with grounded application data
Welsh introduces a realtime voice capability with bidirectional speech interaction. The recorded demo uses a fictional Dr Donut drive-through. The agent takes an order for pumpkin spice iced donuts and caramel macchiatos, answers a question about available coffee, and then returns to confirming the order. Welsh says the system is grounded in the application's documents and data, and that the Fixie backend supports the low-latency interaction. He invites developers to try the voice experience themselves.
"You can build your applications either in a no code way completely in the web UI here or you can use AI jsx to build a completely custom thing."12:38
Who should watch
You build React or full-stack applications and want to add LLM features without moving the whole application to Python.
Your application needs prompts, retrieval, tool calls, or streamed model output to work together in one composable program.
You are evaluating whether a hosted platform can manage retrieval, conversation state, model access, and voice interaction for an AI application.
