komz

Webエンジニア、AI愛好家|Cursor, Claude, Vercel produ…

komz

Webエンジニア、AI愛好家|Cursor, Claude, Vercel products (Next.js, AI SDK, v0) ...|AI x アプリケーション開発、注目の最新ツール・機能の使い方などについて書いてます|X: @komzweb でも投稿してます

最近の記事

Cursor AI 開発をマスターする!完全ガイド【応用編】

前回の「基礎編」では、Cursor の機能や使い方について紹介した。今回の「応用編」では、Cursor の AI 機能を使って実際にアプリケーションを構築していく。Cursor に不慣れな方は、スムーズに進めるためにまず基礎編から始めることをお勧めする: 今回の応用編では、「管理者は動画をアップロードして公開・販売でき、ユーザーはその動画を購入・視聴できる」Web アプリケーションを構築する。ここでは動画のみを扱うが、画像や音声などさまざまなコンテンツに応用できる。そして決

¥800〜
割引あり
    • Cursor AI 開発をマスターする!完全ガイド【基礎編】

      少し前までコードエディタといえば VS Code だったが、あっという間にその座を奪ってしまったツールがある。「Cursor」だ。X、Reddit、Hacker News などでも頻繁に話題となっており、海外の著名な開発者たちにもすこぶる評判が良いようだ。8月には6,000万ドルを調達したとのニュースがあった。今後さらなる進化を遂げるであろう Cursor に注目せずにはいられない。 VS Code + GitHub Copilot で良いような気もするが、なぜ Curso

      • 複数の AI モデルを同時に実行するツール「Multi LLM Runner」を作った話

        現在、OpenAI、Anthropic、Google、Meta などから様々な AI モデルがリリースされている。あなたが AI 愛好家なら、複数のモデルの性能を並べて比較してみたいと思うはずだ。 また、複数のチャットアプリに同じ質問を投げてファクトチェックを行うことがあると思う。その際にアプリ間を移動するのは手間に感じるだろう。 このような時に使える便利なツールはすでに存在する。最もおすすめなのは、Vercel AI が提供するプレイグラウンドだ。最新モデルをすぐに使え

        • Zed AI が来た!Anthropic x Zed のコラボで実現した超高速・高性能エディタ

          2024年8月20日、Zed エディタに AI を搭載した「Zed AI」がリリースされた。 現在、開発者の間では、Cursor + Claude 3.5 Sonnet の組み合わせが最強であると言われているが、それに待ったをかけるように颯爽と登場したのがこの Zed AI だ。 Zed AI の最大の強みは、なんといっても Anthropic と協力して開発されたことだろう。Anthropic が Zed の最適化と AI の実装に直接関わっているとのことで、ワクワクせ

        Cursor AI 開発をマスターする!完全ガイド【応用編】

        ¥800〜
        • Cursor AI 開発をマスターする!完全ガイド【基礎編】

        • 複数の AI モデルを同時に実行するツール「Multi LLM Runner」を作った話

        • Zed AI が来た!Anthropic x Zed のコラボで実現した超高速・高性能エディタ

          進化した「v0」: Artifacts 搭載のWeb開発特化アシスタント

          2023年10月にパブリックベータ版としてリリースされ、着々と進化を続けてきた生成 UI ツール「v0」。先日この v0 がさらなる進化を遂げた。 これまでは UI を生成するのみであったが、今回新たに「v0 チャット」が追加され、TypeScript、React、Next.js、Vercel、その他のフロントエンド技術に関する質問にステップバイステップで答えてくれるようになった。 それだけではない、Claude Artifacts(アーティファクト)同様の機能を搭載して

          進化した「v0」: Artifacts 搭載のWeb開発特化アシスタント

          Cursor Composer を使ってコードを1行も書かずに5分でチャットアプリを作る

          2024 年 7 月のアップデートで実装された Cursor の Composer 機能。まだ実験的な機能であるため、大々的な告知はされておらず情報も少ない。しかし最近になって、この機能の有能さに多くの人が気づき始めているようだ。 公式サイトの変更ログを見ると、Composer と Tab(最近 Copilot++ から名称が変わった)機能の 2 つは、ここ 1 ヶ月頻繁に更新されている。これは力を入れている証拠だ。 この Composer を使うと何ができるのか、簡単な

          Cursor Composer を使ってコードを1行も書かずに5分でチャットアプリを作る

          AIを活用してテクノロジー特化のソーシャルサイトを構築・公開した話

          最新のテクノロジーに特化したオープンな議論の場を提供する「GironGo」というWebアプリケーションをベータ版でリリースしました。 何が「オープン」なのか? OpenSocial は、ログイン不要で誰でもコンテンツを閲覧できます。また、Discord のようにそれぞれのチャンネルに入らなくてはいけないといった煩わしさもありません。本当に有益な情報はオープンであるべきだと私は思います。 なぜ「議論」することが重要なのか? 現代の日本人は、議論(ディスカッション)を避け

          AIを活用してテクノロジー特化のソーシャルサイトを構築・公開した話

          AI時代の新しいWebブラウザ「Arc」の革新的で心地よい機能を体験せよ

          Arc というWebブラウザをご存知でしょうか?2023年にリリースされたばかりの新しいブラウザですが、世界中で徐々にファンが増え始めています。私もその一人です。 Product Hunt では、2023年の年間プロダクトで、OpenAIのGPT-4に次ぐ2位を受賞しています: Arcブラウザの何がそんなに魅力的なのか?それはArc独自の革新的な機能です。ただ斬新であるというだけではなく、「これだよ、これ!」と言いたくなる使い心地の良さが人々を虜にしていくのです。 使い

          AI時代の新しいWebブラウザ「Arc」の革新的で心地よい機能を体験せよ

          AIで画像の背景を消すWebアプリ5選を性能で比較する

          画像の背景を消したいんだけど、ブラウザで簡単に使える高性能なツールはないかな…? あります。しかも今はAIが被写体を自動で識別してくれるので、ボタンひとつで画像の背景を削除(透明化・透過)できます。背景リムーバー、バックグラウンドリムーバーなどと呼ばれます。 何があるの?どれがいいの? ということで、まずはおすすめのリムーバー5つをピックアップ: Adobe Express remove.bg Removal.AI PhotoRoom Clipdrop そし

          AIで画像の背景を消すWebアプリ5選を性能で比較する

          GPTs作成のヒントと2つの重要な機能

          先日GPT Storeがリリースされ、毎日たくさんのGPTsが誕生しています。でも焦る必要はありません。正直まだストアに有用なGPTsはほとんどないので、じっくりいきましょう。 この記事では、私がGPTsを作って得た経験とOpenAIのベストプラクティスを基に、作り方の基本とヒント、および各機能の使い方をご紹介します。 まだGPTsを作ったことがない、まだ一通りの機能を試していないという方はもちろん、すでに作って公開しているという方でも、見落としていることや改善できること

          GPTs作成のヒントと2つの重要な機能

          マルチ画像チャットアプリを作る:GPT-4 Vision x Vercel AI SDK:実験・開発レポート

          Vercel AI SDK が OpenAI Assistants & Vision API に対応したので早速実験です。今回は Vision API を使って、画像をもとにチャットするアプリの開発にトライしてみます。 Vercel AI SDK って何?については、以前のnoteで簡単に書いてます↓ まずはシンプルに作るNext.js アプリの作成 npx create-next-app@latest モジュールのインストール npm install ai ope

          マルチ画像チャットアプリを作る:GPT-4 Vision x Vercel AI SDK:実験・開発レポート

          WebサイトもページもパーツもAIが作る!生成UIツール「v0」実験レポート

          生成UIツール「v0」のベータ版がリリースされ、招待待ちの多くのユーザーが利用できるようになりました(結構待った…)。Vercelの新製品ということで期待せずにはいられないわけですが、早速色々試してみましたので簡単なレポートを共有します。 v0とは?v0の使い方v0を使用するためにまずやること: Vercelアカウントの作成&ログイン ウェイトリストに参加 どちらもv0のサイトから可能です。すぐに使用できるわけではないので、できるだけ早くウェイトリストに参加しておくこ

          WebサイトもページもパーツもAIが作る!生成UIツール「v0」実験レポート

          次世代AIアシスタント「Claude」のお手並みを拝見させていただこう

          AnthropicのAIアシスタント「Claude」が日本でも利用可能となり数日が経ちましたが、おそらくまだ使っていないという人が多いのではないでしょうか。Claudeでできることを一通り(全てではないですが)テストしてみたので、結果を共有します。一部、ChatGPTとの比較もありますので、Claudeの性能が気になっている方は是非ご覧ください。 質問への回答基本的な事実の確認 こういった質問は得意ですね。日本語でもちゃんと回答できています。 これは少し難しかったようで

          次世代AIアシスタント「Claude」のお手並みを拝見させていただこう

          Claudeを使い始める前に読むべし!公式からのアドバイスと回答

          ついに日本でも Anthropic の「Claude」が使えるようになりました。用途によっては GPT-4 をも凌ぐと言われるその性能が気になるところですが、Claudeについてまだ詳細を知らないという方もいるはず。Anthropic公式の「Advice and answers from the Anthropic Team」から「About Claude」「Claude.ai」「Claude Pro」の記事を日本語訳して以下にまとめましたので、目を通してみてください。 A

          Claudeを使い始める前に読むべし!公式からのアドバイスと回答

          AI搭載コードエディタ「Cursor」で未来のプログラミングを体験せよ

          話題のAI搭載コードエディタ「Cursor」が気になっている方は、まず付属のチュートリアル用プロジェクトで機能を試してみると良いです。簡単なチュートリアルですが、未来のプログラミングを体験できます。CursorはVSCodeのフォークなので、安心の使い心地です。 チュートリアル用プロジェクトはJavaScriptとPythonがありますが、今回はJavaScriptの方で試したのでその流れを紹介します。 Cursor をインストールするCursor のサイトからダウンロー

          AI搭載コードエディタ「Cursor」で未来のプログラミングを体験せよ

          Next.js Server Actions で作るフォームが快適すぎる

          先日、Next.js の leerob 氏が動画を公開してくれたことをきっかけに、以前から気になっていた Server Actions を試してみることにしました。ソースコードは公式の「next-forms」使用しますが、そのままではつまらないので、この機会に新しい話題のツールを使ったり、フォームにちょっと手を加えたりしてみます。 ついでに試す新しいツール: Bun: Node.js互換のパッケージマネージャを備えた、高速JavaScriptランタイム shadcn/u

          Next.js Server Actions で作るフォームが快適すぎる