Geppetto by Valyent

This is an open-source fork from Fragments, which is an open-source alternative to apps like Anthropic's Claude Artifacts, Vercel v0, or GPT Engineer.

Powered by the Valyent TypeScript SDK.

Features

• Based on Next.js 14 (App Router, Server Actions), shadcn/ui, TailwindCSS, Vercel AI SDK.
• Uses the Valyent TypeScript SDK by Valyent to securely execute code generated by AI.
• Streaming in the UI.
• Can install and use any package from npm, pip.
• Supported stacks (add your own):
  • 🔸 Python interpreter
  • 🔸 Next.js
  • 🔸 Vue.js
  • 🔸 Streamlit
  • 🔸 Gradio
• Supported LLM Providers (add your own):
  • 🔸 OpenAI
  • 🔸 Anthropic
  • 🔸 Google AI
  • 🔸 Mistral
  • 🔸 Groq
  • 🔸 Fireworks
  • 🔸 Together AI
  • 🔸 Ollama

Make sure to give us a star!

Get started

Prerequisites

• git
• Recent version of Node.js and npm package manager
• Valyent API Key
• LLM Provider API Key

1. Clone the repository

In your terminal:

git clone https://github.com/valyentdev/geppetto.git

2. Install the dependencies

Enter the repository:

cd geppetto

Run the following to install the required dependencies:

npm i

3. Set the environment variables

Create a .env.local file and set the following:

# Get your API key here - https://valyent.cloud
VALYENT_API_KEY="<your-valyent-api-key>"
VALYENT_ORGANIZATION="<your-valyent-organization>"

# OpenAI API Key
OPENAI_API_KEY=

# Other providers
ANTHROPIC_API_KEY=
GROQ_API_KEY=
FIREWORKS_API_KEY=
TOGETHER_API_KEY=
GOOGLE_AI_API_KEY=
GOOGLE_VERTEX_CREDENTIALS=
MISTRAL_API_KEY=
XAI_API_KEY=

### Optional env vars

# Domain of the site
NEXT_PUBLIC_SITE_URL=

# Disabling API key and base URL input in the chat
NEXT_PUBLIC_NO_API_KEY_INPUT=
NEXT_PUBLIC_NO_BASE_URL_INPUT=

# Rate limit
RATE_LIMIT_MAX_REQUESTS=
RATE_LIMIT_WINDOW=

# Vercel/Upstash KV (short URLs, rate limiting)
KV_REST_API_URL=
KV_REST_API_TOKEN=

# Supabase (auth)
SUPABASE_URL=
SUPABASE_ANON_KEY=

# PostHog (analytics)
NEXT_PUBLIC_POSTHOG_KEY=
NEXT_PUBLIC_POSTHOG_HOST=

4. Start the development server

npm run dev

5. Build the web app

npm run build

Customize

Adding custom personas

1. Make sure Valyent CLI is installed and you're logged in.

2. Add a new folder under sandbox-templates/

TO BE COMPLETED

Adding custom LLM models

1. Open lib/models.json in your code editor.

2. Add a new entry to the models list:

   {
     "id": "mistral-large",
     "name": "Mistral Large",
     "provider": "Ollama",
     "providerId": "ollama"
   }

   Where id is the model id, name is the model name (visible in the UI), provider is the provider name and providerId is the provider tag (see adding providers below).

Adding custom LLM providers

1. Open lib/models.ts in your code editor.

2. Add a new entry to the providerConfigs list:

   Example for fireworks:

   fireworks: () => createOpenAI({ apiKey: apiKey || process.env.FIREWORKS_API_KEY, baseURL: baseURL || 'https://api.fireworks.ai/inference/v1' })(modelNameString),

3. Optionally, adjust the default structured output mode in the getDefaultMode function:

   if (providerId === 'fireworks') {
     return 'json'
   }

4. Optionally, add a new logo under public/thirdparty/logos

Contributing

As an open-source project, we welcome contributions from the community. If you are experiencing any bugs or want to add some improvements, please feel free to open an issue or pull request.