https://github.com/valyentdev/fragments-on-valyent
An open-source alternative to Claude Artifacts/V0/... on Valyent. A fork from Fragments (E2B).
https://github.com/valyentdev/fragments-on-valyent
Last synced: about 1 year ago
JSON representation
An open-source alternative to Claude Artifacts/V0/... on Valyent. A fork from Fragments (E2B).
- Host: GitHub
- URL: https://github.com/valyentdev/fragments-on-valyent
- Owner: valyentdev
- License: apache-2.0
- Created: 2025-01-27T17:46:53.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-28T10:12:51.000Z (over 1 year ago)
- Last Synced: 2025-05-31T23:17:40.677Z (about 1 year ago)
- Language: TypeScript
- Homepage: https://valyent.cloud
- Size: 4.46 MB
- Stars: 3
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Codeowners: CODEOWNERS
Awesome Lists containing this project
README
# Geppetto by Valyent
This is an open-source fork from [Fragments](https://github.com/e2b-dev/fragments), which is an open-source alternative to apps like [Anthropic's Claude Artifacts](https://www.anthropic.com/news/claude-3-5-sonnet), Vercel [v0](https://v0.dev), or [GPT Engineer](https://gptengineer.app).
Powered by the [Valyent TypeScript SDK](https://github.com/valyentdev/valyent.ts).
## Features
- Based on Next.js 14 (App Router, Server Actions), shadcn/ui, TailwindCSS, Vercel AI SDK.
- Uses the [Valyent TypeScript SDK](https://github.com/valyentdev/valyent.ts) by [Valyent](https://valyent.cloud) 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](#adding-custom-personas)):
- 🔸 Python interpreter
- 🔸 Next.js
- 🔸 Vue.js
- 🔸 Streamlit
- 🔸 Gradio
- Supported LLM Providers ([add your own](#adding-custom-llm-models)):
- 🔸 OpenAI
- 🔸 Anthropic
- 🔸 Google AI
- 🔸 Mistral
- 🔸 Groq
- 🔸 Fireworks
- 🔸 Together AI
- 🔸 Ollama
**Make sure to give us a star!**
## Get started
### Prerequisites
- [git](https://git-scm.com)
- Recent version of [Node.js](https://nodejs.org) and npm package manager
- [Valyent API Key](https://valyent.cloud)
- 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:
```sh
# Get your API key here - https://valyent.cloud
VALYENT_API_KEY=""
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](https://docs.valyent.cloud/cli#installation) is installed and you're logged in.
2. Add a new folder under [sandbox-templates/](sandbox-templates/)
_TO BE COMPLETED_
### Adding custom LLM models
1. Open [lib/models.json](lib/models.ts) in your code editor.
2. Add a new entry to the models list:
```json
{
"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](#adding-custom-llm-providers) below).
### Adding custom LLM providers
1. Open [lib/models.ts](lib/models.ts) in your code editor.
2. Add a new entry to the `providerConfigs` list:
Example for fireworks:
```ts
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:
```ts
if (providerId === 'fireworks') {
return 'json'
}
```
4. Optionally, add a new logo under [public/thirdparty/logos](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.