Search

## Other todos
- [ ] Get OpenTownie or Gemini or Claude or OpenAI to synthesize the core of these patterns into a prompt we can use to make more ReactRouter apps, such as...
- [ ] Convert this or into the basic react router guest book (and preserve this forum app in another project?)
- [ ] To what extent can these patterns be packaged up into a Val Town Router project? Would be neat to get the version pinning thing all centralized, can this as-a-library be that centralized place?

Note: When changing a SQLite table's schema, change the table's name (e.g., add _2 or _3) to create a fresh table.
### OpenAI
```ts
import { OpenAI } from "https://esm.town/v/std/openai";
const openai = new OpenAI();
const completion = await openai.chat.completions.create({
  messages: [
    { role: "user", content: "Say hello in a creative way" },

# OpenAI - [Docs ↗](https://docs.val.town/std/openai)
Use OpenAI's chat completion API with [`std/openai`](https://www.val.town/v/std/openai). This integration enables access to OpenAI's language models without needing to acquire API keys.
For free Val Town users, [all calls are sent to `gpt-4o-mini`](https://www.val.town/v/std/openaiproxy?v=12#L85).
## Basic Usage
```ts title="Example" val
import { OpenAI } from "https://esm.town/v/std/openai";
const openai = new OpenAI();
const completion = await openai.chat.completions.create({
  messages: [
    { role: "user", content: "Say hello in a creative way" },
## Limits
While our wrapper simplifies the integration of OpenAI, there are a few limitations to keep in mind:
* **Usage Quota**: We limit each user to 10 requests per minute.
If these limits are too low, let us know! You can also get around the limitation by using your own keys:
1. Create your own API key on [OpenAI's website](https://platform.openai.com/api-keys)
2. Create an [environment variable](https://www.val.town/settings/environment-variables?adding=true) named `OPENAI_API_KEY`
3. Use the `OpenAI` client from `npm:openai`:
```ts title="Example" val
import { OpenAI } from "npm:openai";
const openai = new OpenAI();
```
[📝 Edit docs](https://github.com/val-town/val-town-docs/edit/main/src/content/docs/std/openai.mdx)

import { type ClientOptions, OpenAI as RawOpenAI } from "npm:openai";
/**
 * API Client for interfacing with the OpenAI API. Uses Val Town credentials.
 */
export class OpenAI {
  private rawOpenAIClient: RawOpenAI;
  /**
   * API Client for interfacing with the OpenAI API. Uses Val Town credentials.
   *
   * @param {number} [opts.timeout=10 minutes] - The maximum amount of time (in milliseconds) the client will wait for a response before timing out.
   */
  constructor(options: Omit<ClientOptions, "baseURL" | "apiKey" | "organization"> = {}) {
    this.rawOpenAIClient = new RawOpenAI({
      ...options,
      baseURL: "https://std-openaiproxy.web.val.run/v1",
      apiKey: Deno.env.get("valtown"),
      organization: null,
  get chat() {
    return this.rawOpenAIClient.chat;
  }
  get beta() {
    return {
      chat: this.rawOpenAIClient.beta.chat,
    };
  }

  },
  {
    "title": "An Introduction to OpenAI fine-tuning",
    "slug": "an-introduction-to-openai-fine-tuning",
    "link": "/blog/an-introduction-to-openai-fine-tuning",
    "description": "How to customize OpenAI to your liking",
    "pubDate": "Fri, 25 Aug 2023 00:00:00 GMT",
    "author": "Steve Krouse",
    "slug": "val-town-newsletter-16",
    "link": "/blog/val-town-newsletter-16",
    "description": "Our seed round, growing team, Codeium completions, @std/openai, and more",
    "pubDate": "Mon, 22 Apr 2024 00:00:00 GMT",
    "author": "Steve Krouse",

# AI Chat App
A sleek, dark-themed AI chat application built with React on Val Town using the OpenAI API.
## Features
- React-based chat interface with component architecture
- Elegant dark theme with purple/indigo accents
- Powered by OpenAI's GPT models
- Modern, responsive design with Tailwind CSS
- TypeScript for type safety and better developer experience
```
├── backend/
│   └── index.ts       # Backend API with Hono and OpenAI integration
├── frontend/
│   ├── components/    # React components
2. Messages are managed with React state
3. API requests are sent to the backend endpoint
4. The backend uses the OpenAI API to generate responses
5. Responses are formatted with enhanced markdown support and displayed in the chat interface
6. UI includes loading indicators and smooth animations for better user experience
- **Tailwind CSS**: For styling without custom CSS files
- **Hono**: Lightweight web framework for the backend
- **OpenAI API**: For generating AI responses
- **CSS Animations**: For smooth transitions and loading indicators
## Requirements
This app requires an OpenAI API key to be set as an environment variable in Val Town.
## Setup
1. Fork this project in Val Town
2. Add your OpenAI API key as an environment variable named `OPENAI_API_KEY`
3. Run the project
You can customize the app by:
- Modifying React components to add new features
- Changing the OpenAI model in the backend (currently using gpt-4o-mini)
- Adjusting the max tokens parameter for longer or shorter responses
- Modifying the color scheme by changing the Tailwind classes

import { Hono } from "https://esm.sh/hono@3.12.6";
import { cors } from "https://esm.sh/hono@3.12.6/cors";
import { OpenAI } from "https://esm.town/v/std/openai";
import { serveFile } from "https://esm.town/v/std/utils@85-main/index.ts";
app.use("/*", cors());
// Initialize OpenAI client
const openai = new OpenAI();
// API endpoint to handle chat requests
    }
    
    const completion = await openai.chat.completions.create({
      messages,
      model: "gpt-4o-mini", // Using a smaller model for cost efficiency
    });
  } catch (error) {
    console.error("Error calling OpenAI:", error);
    return c.json({ error: "Failed to process chat request" }, 500);
  }

        </div>
        <h1 className="text-4xl font-bold text-center bg-clip-text text-transparent bg-gradient-to-r from-indigo-400 to-purple-500">AI Chat Assistant</h1>
        <p className="text-center text-indigo-200 mt-2 opacity-80">Powered by OpenAI</p>
      </header>

  },
  {
    "title": "An Introduction to OpenAI fine-tuning",
    "slug": "an-introduction-to-openai-fine-tuning",
    "link": "/blog/an-introduction-to-openai-fine-tuning",
    "description": "How to customize OpenAI to your liking",
    "pubDate": "Fri, 25 Aug 2023 00:00:00 GMT",
    "author": "Steve Krouse",
    "slug": "val-town-newsletter-16",
    "link": "/blog/val-town-newsletter-16",
    "description": "Our seed round, growing team, Codeium completions, @std/openai, and more",
    "pubDate": "Mon, 22 Apr 2024 00:00:00 GMT",
    "author": "Steve Krouse",

Note: When changing a SQLite table's schema, change the table's name (e.g., add _2 or _3) to create a fresh table.
### OpenAI
```ts
import { OpenAI } from "https://esm.town/v/std/openai";
const openai = new OpenAI();
const completion = await openai.chat.completions.create({
  messages: [
    { role: "user", content: "Say hello in a creative way" },