8- ✅ AI Chat powered by custom agent
9- ✅ **Robust streaming proxy** with proper format conversion and error handling
10- ✅ Real-time streaming responses with proper OpenAI-compatible format
11- ✅ Auto-scrolling to latest messages
12- ✅ Enhanced loading indicators with animated dots
43- **Centered layout** - Takes up 1/2 of screen width and full height
44- **useChat hook** from Vercel AI SDK handles message state and streaming
45- **Robust streaming proxy** - Properly converts agent's custom format to OpenAI-compatible SSE
46- **Custom agent integration** - Seamlessly connects to your agent API with full error handling
47- **Real-time streaming** - Word-by-word responses with proper buffering and parsing
66
67The agent should return either:
68- **Streaming**: Custom format (`f:`, `0:"content"`, `e:`/`d:` markers) which gets converted to OpenAI-compatible `text/event-stream`
69- **Non-streaming**: JSON with `content`, `message`, or `choices[0].message.content`
70
72- Properly parses the agent's custom streaming format line by line
73- Handles incomplete chunks and buffering correctly
74- Converts to OpenAI-compatible Server-Sent Events in real-time
75- Provides graceful error handling and recovery
76- Works seamlessly with the Vercel AI SDK
88Note: When changing a SQLite table's schema, change the table's name (e.g., add _2 or _3) to create a fresh table.
89
90### OpenAI
91
92```ts
93import { OpenAI } from "https://esm.town/v/std/openai";
94const openai = new OpenAI();
95const completion = await openai.chat.completions.create({
96 messages: [
97 { role: "user", content: "Say hello in a creative way" },
9Configure the following variables in your environment:
10- `AGENT_API_KEY` (This is a secure token that you choose to secure the agent.tsx POST endpoint)
11- `OPENAI_API_KEY` (An OpenAI API Key)
12- `EXA_API_KEY` (Optional, though needed if you use the web search tool)
13
1import { anthropic } from "npm:@ai-sdk/anthropic";
2import { openai } from "npm:@ai-sdk/openai";
3import { generateText, streamText } from "npm:ai";
4import { getSystemPrompt } from "./prompt.tsx";
34 const maxSteps = 10;
35
36 const model = Deno.env.get("ANTHROPIC_API_KEY") ? anthropic("claude-3-7-sonnet-latest") : openai("gpt-4.1");
37
38 const options = {
207 },
208 {
209 "title": "An Introduction to OpenAI fine-tuning",
210 "slug": "an-introduction-to-openai-fine-tuning",
211 "link": "/blog/an-introduction-to-openai-fine-tuning",
212 "description": "How to customize OpenAI to your liking",
213 "pubDate": "Fri, 25 Aug 2023 00:00:00 GMT",
214 "author": "Steve Krouse",
439 "link": "/blog/val-town-newsletter-16",
440 "description":
441 "Our seed round, growing team, Codeium completions, @std/openai, and more",
442 "pubDate": "Mon, 22 Apr 2024 00:00:00 GMT",
443 "author": "Steve Krouse",
94Note: When changing a SQLite table's schema, change the table's name (e.g., add _2 or _3) to create a fresh table.
95
96### OpenAI
97
98```ts
99import { OpenAI } from "https://esm.town/v/std/openai";
100const openai = new OpenAI();
101const completion = await openai.chat.completions.create({
102 messages: [
103 { role: "user", content: "Say hello in a creative way" },
1import { anthropic } from "npm:@ai-sdk/anthropic";
2import { openai } from "npm:@ai-sdk/openai";
3import { generateText, streamText } from "npm:ai";
4import { getSystemPrompt } from "./prompt.tsx";
31 const maxSteps = 10;
32
33 const model = openai("gpt-4.1");
34
35 const options = {
1import { discordWebhook } from "https://esm.town/v/stevekrouse/discordWebhook";
2import { socialDataSearch, Tweet } from "https://esm.town/v/stevekrouse/socialDataSearch";
3import { OpenAI } from "https://esm.town/v/std/openai";
4
5interface AnalyzedTweet {
16 if (!tweets.length) return [];
17
18 const openai = new OpenAI();
19
20 const tweetsText = tweets.map((tweet, index) =>
45
46 try {
47 const completion = await openai.chat.completions.create({
48 messages: [{ role: "user", content: prompt }],
49 model: "gpt-4o-mini",
236
237export default async function(req) {
238 const { OpenAI } = await import("https://esm.town/v/std/openai");
239 const CORS_HEADERS = {
240 "Access-Control-Allow-Origin": "*",
247 const action = url.searchParams.get("action");
248 const sourceUrl = import.meta.url.replace("esm.town", "val.town");
249 const openai = new OpenAI();
250 const jsonResponse = (body, status) =>
251 new Response(JSON.stringify(body), { status, headers: { ...CORS_HEADERS, "Content-Type": "application/json" } });
253 async function callAI(systemPrompt, userMessage) {
254 try {
255 const response = await openai.chat.completions.create({
256 model: "gpt-4o",
257 messages: [{ role: "system", content: systemPrompt }, { role: "user", content: userMessage }],
1import askOpenAI from "./openai.tsx"
2
3const PROMPT = `
125 const data = matchData(matchJson)
126 const message = PROMPT + "\n\n" + JSON.stringify(data)
127 return await askOpenAI(message)
128}
129
