Code UI

File tree + code block + terminal — the three atoms that build agent coding assistants. Wire these to a tool-calling model that writes files and shell commands.

static demo

FileTree

ai-elements/file-tree

route.ts

layout.tsx

page.tsx

conversation.tsx

prompt-input.tsx

package.json

tsconfig.json

CodeBlock

ai-elements/code-block — src/app/api/chat/route.ts

import { streamText } from "ai";import { openai } from "@ai-sdk/openai";
export async function POST(req: Request) {  const { messages } = await req.json();  const result = streamText({    model: openai("gpt-4o"),    system: "You are a deployment assistant.",    messages,  });  return result.toUIMessageStreamResponse();}

Terminal

ai-elements/terminal — ANSI-tolerant build log

Terminal

14:22:01 INFO  $ bun install
14:22:03 INFO  resolved 1,204 packages in 1.87s
14:22:04 INFO  $ next build --turbopack
14:22:09 OK    ✓ type-check passed
14:22:14 WARN  ⚠ route /api/webhook/stripe uses dynamic rendering
14:22:34 OK    ✓ build completed in 33s

Code UI

Command palette