Skyfire Playground

Skyfire Playground is a Next.js application designed to showcase the capabilities of the Skyfire SDK in a real-world web application context. This project serves as an interactive demonstration of how developers can integrate and utilize various AI models and services through the Skyfire SDK.

Getting Started

Installation

1. Clone the repository:

   Bash

   git clone [email protected]:skyfire-xyz/sky-playground-nextjs.git
   cd sky-playground-nextjs
   

2. Install dependencies:

   Bash

   yarn install
   

Skyfire API Key Setup

1. Sign up at Skyfire Dashboard to create an account.
2. After signing up, create an API key from your dashboard.
3. Set the API key as an environment variable in .env file:

   SKYFIRE_API_KEY=your_api_key_here
   

Running the App

Start the development server:

yarn dev

Tech Stack

• Next.js: React framework for building the application
• Skyfire SDK: Core SDK for AI model integration and services
• Redux: State management library
• Tailwind CSS: Utility-first CSS framework
• Flowbite React: UI component library based on Tailwind CSS

Skyfire SDK Integration

In this application, we create API routes for calling Skyfire APIs with the Skyfire SDK . The SDK is designed for use in server-side Node.js applications, and we utilize Next.js API routes to treat it as a backend endpoint.

Here are some essential code snippets. The complete code is available here /src/app/api/proxy/route.ts.

• Initializing Skyfire Client using API Key:

import { SkyfireClient } from "@skyfire-xyz/skyfire-sdk";

const client = new SkyfireClient({
   apiKey: process.env.SKYFIRE_API_KEY,
   environment: "production",
});

• Executing OpenRouter Call:

res = await client.chat.createOpenRouterChatCompletionWithHttpInfo({
   messages: messages, // e.g. [{ content: "what is the sum of 10 + 11?", role: "user" }],
   model, // model: "gpt-4o",
});

• Processing Payment Information:
  Payments are processed asynchronously, and the response from the SDK does not contain payment information. We can use the referenceId from the response headers to fetch the payment information using thegetClaimByReferenceId(referenceId).

const referenceId = res.headers["skyfire-payment-reference-id"];
await client.account.wallet.getClaimByReferenceId(referenceId);